docs/html/design/style/touch-feedback.jd

page.title=Touch Feedback
page.tags=input,button
@jd:body

    <div class="layout-content-row" style="margin-bottom: -100px">
  <div class="layout-content-col span-7">

<p>Use illumination and dimming to respond to touches, reinforce the resulting behaviors
of gestures, and indicate what actions are enabled and disabled.</p>

<p><strong>Be responsive to touches in a gentle way</strong>. Whenever a user touches an
actionable area in your app, let them know the app is "listening" by providing a visual
response. Make it subtle &mdash;just slightly lighter or darker than the untouched color. This
provides two benefits:</p>

<ul>
<li><a href="{@docRoot}design/get-started/principles.html#sprinkle-encouragement">Sprinkles
of encouragement</a> are more pleasant than jolts.</li>
<li>Incorporating <a href="{@docRoot}design/style/branding.html">your branding</a> is much
easier because the default touch feedback works with whatever hue you choose.</li>
</ul>

</div>

<div class="layout-content-col span-6" style="float:right;">
  <video  class="play-on-hover" width="268" height="442" autoplay style="border:1px solid #ddd;background-color:#f9f9f9;" poster="">
    <source src="{@docRoot}design/media/touch_feedback.mp4" type="video/mp4">
    <source src="{@docRoot}design/media/touch_feedback.webm" type="video/webm">
    <source src="{@docRoot}design/media/touch_feedback.ogv" type="video/ogg">
  </video>
  <div class="figure-caption">
    <div style="color:#a3a3a3;margin-left:130px;"><em>Click image to replay...</em></div>
  </div>
</div>

<h4 style="clear:both;">States</h4>


<div class="vspace size-1">&nbsp;</div>

<img src="{@docRoot}design/media/touch_feedback_states.png">
<div class="figure-caption">
  Most of Android's UI elements have touch feedback built in, including
  states that indicate whether touching the element will have any effect.
</div>

<div class="vspace size-3">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-6">

    <h4>Communication</h4>
<p>When your objects react to more complex gestures, help users
understand what the outcome will be.</p>

<p>In Recents, when a user starts swiping a thumbnail left or right, it
begins to dim. This helps the user understand that swiping will cause the
item to be removed.</p>
  </div>
  <div class="layout-content-col span-7">

    <img src="{@docRoot}design/media/touch_feedback_manipulation.png">

  </div>
</div>
<div class="vspace size-3">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/touch_feedback_communication.png">
    <p><em>If a user attempts to scroll past the last home screen panel, the screen
    content tilts to the right to indicate that further navigation in this direction
    isn’t possible.</em></p>

  </div>
  <div class="layout-content-col span-6">

<h4>Boundaries</h4>
<p>
  When users try to scroll past the beginning or end of a scrollable area,
  communicate the boundary with a visual cue. Many of Android's scrollable UI
  widgets, like lists and grid lists, have support for boundary feedback built
  in. If you’re building custom widgets, keep boundary feedback in mind and
  provide it from within your app.
</p>