am 2a91ecb1: Doc change: More updates to the design guidelines.

  </div>

</a>

<p>A button consists of text and/or an image that clearly communicates what action will occur when the

user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless

buttons</em>. Both can contain text labels and/or images.</p>

<p>A button consists of text and/or an image that clearly communicates what action

  will occur when the user touches it. A button can have an image, text, or both.

</p>

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

<div class="layout-content-row" style="margin-top:22px">

  <div class="layout-content-col span-3">

    <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;">

  </div>

  <div class="layout-content-col span-3">

    <img src="{@docRoot}design/media/buttons_text.png"  style="height:94px;">

  </div>

  <div class="layout-content-col span-7">

    <img src="{@docRoot}design/media/buttons_image_and_text.png"  style="height:94px;">

  </div>

</div>

<div class="layout-content-row" style="margin-top:0;">

  <div class="layout-content-col span-3">

      <p>An image alone works best when the action can be represented by a symbol that's well understood.</p>

  </div>

  <div class="layout-content-col span-3">

      <p>Text alone is most appropriate for actions that would be difficult to

      represent visually, or are critical to convey in words to avoid any ambiguity.</p>

  </div>

  <div class="layout-content-col span-7">

    <p>

      Both an icon and text is most appropriate when they complement each other:

      each carrying its own bit of information, but together making a larger whole.

    </p>

<h2 id="basic">Basic Buttons</h2>

    <p>

      For example, in a birthday reminder card in Google Now, the button's text

      describes the action while its image indicates that the action will be done

      in Google+.

    </p>

  </div>

</div>

<p>Basic buttons are traditional buttons with borders and background. Android supports two styles for

basic buttons: default and small. Default buttons have slightly larger font size and are optimized

for display outside of form content. Small buttons are intended for display alongside other content.

They have a smaller font and smaller minimum height. Use small buttons in forms where they need to

align with other UI elements.</p>

<h3>What about button backgrounds?</h3>

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

<div class="layout-content-row">

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

    <div class="figure-caption">

      Default buttons in Holo Dark & Light.

    <p>For <strong>image-only</strong> buttons, a background isn't necessary because

    users are accustomed to interacting with objects.</p>

    <div class="layout-content-row" style="margin-left:72px">

      <div class="layout-content-col span-2">

        <div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div>

        <img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;">

      </div>

  </div>

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

    <div class="figure-caption">

      Small buttons in Holo Dark & Light.

      <div class="layout-content-col span-2" style="width:29px;margin-left:10px;">

        <div class="do-dont-label good"><strong>Do</strong></div>

        <img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;">

      </div>

    </div>

  </div>

<h2 id="borderless">Borderless Buttons</h2>

<div class="layout-content-col span-7">

<p>

  For buttons <strong>with text</strong>, a background is also usually

  unnecessary. To invite users to touch, phrase it as a clear action (e.g.

  "Start", "Sign in") and use different color and formatting than the screen's

  usual body text.

</p>

<p>Borderless buttons resemble basic buttons except that they have no borders or background. You can

use borderless buttons with both icons and text. Borderless buttons are visually more lightweight

than basic buttons and integrate nicely with other content.</p>

<p>

  Use buttons with backgrounds sparingly. Because they have a heavy appearance,

  they work best when there's only one or two of them on the screen. They're

  most appropriate for:

</p>

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

<ul>

  <li>A call to action you really want users to pursue (e.g. "Sign up")</li>

  <li>A key decision point (e.g. "Accept" / "Decline")</li>

  <li>When the user is about to commit a significant action (e.g. "Erase

  everything", "Buy now")</li>

</ul>

</div>

</div>

page.title=Downloads

page tags="Icons", "stencils", "color swatches"

@jd:body

<div class="layout-content-row">

<p>

  <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'All Design Assets']);"

    href="{@docRoot}downloads/design/Android_Design_Downloads_20130814.zip">Download All</a>

    href="{@docRoot}downloads/design/Android_Design_Downloads_20131106.zip">Download All</a>

</p>

  </div>

<div class="layout-content-row">

  <div class="layout-content-col span-5">

<p>Drag and drop your way to beautifully designed Ice Cream Sandwich apps. The stencils feature the

rich typography, colors, interactive controls, and icons found throughout Android 4.0, along with

<p>Drag and drop your way to beautifully designed Android apps. The stencils feature the

rich typography, colors, interactive controls, and icons found throughout Android, along with

phone and tablet outlines to frame your creations. Source files for icons and controls are also

available.</p>

  <div class="layout-content-col span-4">

<p>

  <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Fireworks Stencil']);"

  <!--<a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Fireworks Stencil']);"

    href="{@docRoot}downloads/design/Android_Design_Fireworks_Stencil_20120814.png">Adobe&reg; Fireworks&reg; PNG Stencil</a>

  <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Illustrator Stencil']);"

    href="{@docRoot}downloads/design/Android_Design_Illustrator_Vectors_20120814.ai">Adobe&reg; Illustrator&reg; Stencil</a>

  <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'OmniGraffle Stencil']);"

    href="{@docRoot}downloads/design/Android_Design_OmniGraffle_Stencil_20120814.graffle">Omni&reg; OmniGraffle&reg; Stencil</a>

    href="{@docRoot}downloads/design/Android_Design_OmniGraffle_Stencil_20120814.graffle">Omni&reg; OmniGraffle&reg; Stencil</a>-->

  <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Photoshop Sources']);"

    href="{@docRoot}downloads/design/Android_Design_Holo_Widgets_20120814.zip">Adobe&reg; Photoshop&reg; Sources</a>

    href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe&reg; Photoshop&reg; Stencils and Sources</a>

</p>

  </div>

<p>

  <a class="download-button"  onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons']);"

    href="{@docRoot}downloads/design/Android_Design_Icons_20130926.zip">Action Bar Icon Pack</a>

    href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Action Bar Icon Pack</a>

</p>

  </div>

  <div class="layout-content-col span-5">

<h4>Color</h4>

<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker

<p>In Android's color palette, each color has a corresponding darker

shade that can be used as a complement when needed.</p>

<p><a href="{@docRoot}design/style/color.html">More on Color</a></p>