Merge "Doc change: remove design content that has moved to material spec." into mnc-preview-docs

page.title=Buttons

page.tags=button,input

@jd:body

<a class="notice-designers-material"

  href="http://www.google.com/design/spec/components/buttons.html">

  <div>

    <h3>Material Design</h3>

    <p>Buttons<p>

  </div>

</a>

<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/button.html">

  <div>

    <h3>Developer Docs</h3>

    <p>Buttons</p>

  </div>

</a>

<p itemprop="description">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>

<div class="cols" style="margin-top:22px">

  <div class="col-3">

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

  </div>

  <div class="col-3">

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

  </div>

  <div class="col-7">

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

  </div>

</div>

<div class="cols" style="margin-top:0;">

  <div class="col-3">

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

  </div>

  <div class="col-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="col-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>

    <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>

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

<div class="cols">

  <div class="col-6">

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

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

    <div class="cols" style="margin-left:72px">

      <div class="col-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 class="col-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>

<div class="col-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>

  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>

<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=Dialogs

page.tags=dialog,alert,popup,toast

@jd:body

<a class="notice-designers-material"

  href="http://www.google.com/design/spec/components/dialogs.html">

  <div>

    <h3>Material Design</h3>

    <p>Dialogs<p>

  </div>

</a>

<a class="notice-developers" href="{@docRoot}guide/topics/ui/dialogs.html">

  <div>

    <h3>Developer Docs</h3>

    <p>Dialogs</p>

  </div>

</a>

<p itemprop="description">Dialogs prompt the user for decisions or additional information required by the app to continue a

task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the

user to adjust settings or enter text.</p>

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

<div class="with-callouts">

<ol>

  <li>

  <h4>Optional title region</h4>

  <p>The title introduces the content of your dialog. It can, for example, identify the name of a

   setting that the user is about to change, or request a decision.</p>

  </li>

  <li>

  <h4>Content area</h4>

  <p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as

   sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system

   settings. In other cases, such as alerts, the content may consist solely of text that provides

   further context for a user decision.</p>

  </li>

  <li>

  <h4>Action buttons</h4>

  <p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely action. However, if the options consist of specific actions such as Close or Wait rather than a confirmation or cancellation of the action described in the content, then all the buttons should be active verbs. Order actions following these rules:</p>

    <ul>

    <li>The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.</li>

    <li>The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.</li>

    </ul>

  </li>

</ol>

</div>

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

<div class="figure-caption">

  Samples of typical dialog use in Android.

</div>

<h2 id="alerts">Alerts</h2>

<p>Alerts inform the user about a situation that requires their confirmation or acknowledgement before

proceeding. They differ slightly in appearance based upon the severity and impact of the message

conveyed.</p>

<div class="cols">

  <div class="col-8">

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

  </div>

  <div class="col-5">

<h4>Alerts without title bars</h4>

<p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed

up succinctly in a sentence or two. The content area should either ask a question (such as "Delete

this conversation?") or make a clear statement whose relationship to the action buttons is obvious.</p>

  </div>

</div>

<div class="cols">

  <div class="col-8">

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

  </div>

  <div class="col-5">

<h4>Alerts with title bars</h4>

<p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving

potential loss of data, connectivity, extra charges, and so on requires a clear question or

statement (the title) and some additional explanation (in the content area).</p>

<p>Keep the question or statement short: for example, "Erase USB storage?" Avoid apologies. A user

should be able to skip the content completely and still have a clear idea of what choices are

available based on the title and the text of the action buttons.</p>

  </div>

</div>

<p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p>

<div class="cols">

  <div class="col-4">

    <div class="do-dont-label bad">Don't</div>

      <table class="ui-table bad">

      <thead>

        <tr>

          <th class="label">

          Are you sure?

          </th>

        </tr>

      </thead>

      </table>

  </div>

  <div class="col-4">

    <div class="do-dont-label bad">Don't</div>

      <table class="ui-table bad">

      <thead>

        <tr>

          <th class="label">

          Warning!

          </th>

        </tr>

      </thead>

      </table>

  </div>

  <div class="col-5">

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

      <table class="ui-table good">

      <thead>

        <tr>

          <th class="label">

          Erase USB storage?

          </th>

        </tr>

      </thead>

      </table>

  </div>

</div>

<h2 id="popups">Popups</h2>

<p>Popups are lightweight version of dialogs that require a single selection from the user. Popups

don't have have explicit buttons that accept or cancel the operation. Instead, making a selection

advances the workflow, and simply touching outside the popup dismisses it.</p>

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

<h2 id="toasts">Toasts</h2>

<div class="cols">

  <div class="col-6">

    <div class="vspace size-3"></div>

<p>Toasts provide lightweight feedback about an operation in a small popup. For example, navigating

away from an email before you send it triggers a "Draft saved" toast to let you know that you can

continue editing later. Toasts automatically disappear after a timeout.</p>

<a class="notice-designers-material left"

  href="http://www.google.com/design/spec/components/snackbars-toasts.html">

  <div>

    <h3>Material Design</h3>

    <p>Toasts<p>

  </div>

</a>

<a class="notice-developers left" href="{@docRoot}guide/topics/ui/notifiers/toasts.html">

  <div>

    <h3>Developer Docs</h3>

    <p>Toasts</p>

  </div>

</a>

  </div>

  <div class="col-7">

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

  </div>

</div>

page.title=Grid Lists

page.tags=gridview,layout,listview

@jd:body

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

<a class="notice-designers-material"

  href="http://www.google.com/design/spec/components/grid-lists.html">

  <div>

    <h3>Material Design</h3>

    <p>Grid lists<p>

  </div>

</a>

<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/gridview.html">

  <div>

    <h3>Developer Docs</h3>

    <p>Grid View</p>

  </div>

</a>

<p itemprop="description">Grid lists are an alternative to standard list views. They are best suited for showing data sets

that represent themselves through images. In contrast to simple lists, grid lists may scroll either

vertically or horizontally.</p>

<h2 id="generic_grid">Generic Grids</h2>

<p>The items in a grid list are arranged in two dimensions, one of which is fixed when scrolling

content. The scrolling direction dictates the ordering of the items within the grid list. Since the

scrolling direction is not deterministic, make it easy for the user to determine the orientation by

cutting off grid items to communicate where the overflow is located.</p>

<p>Avoid creating grid lists that scroll in two dimensions.</p>

<div class="cols">

  <div class="col-7">

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

  </div>

  <div class="col-6">

<h4>Vertical scrolling</h4>

<p>Vertically scrolling grid list items are sorted in traditional western reading direction:

left-to-right and top-down. When displaying the list, cut off the items in the bottom row to

communicate that the user can scroll the list down to show additional items. Be sure to retain this

scheme when the user rotates the screen.</p>

  </div>

</div>

<div class="cols">

  <div class="col-7">

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

  </div>

  <div class="col-6">

<h4>Horizontal scrolling</h4>

<p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically

scrolling lists, the sorting changes slightly to a top-down and left-to-right arrangement. Employ

the same technique of cutting off the items in the rightmost column to indicate the scrolling

direction.</p>

<p>Don't use scrolling tabs as a means to switch views in conjunction with horizontally scrolling grid

lists, because the horizontal gesture for view and content navigation will conflict. If you show

scrolling tabs for view navigation together with a grid list, use vertical grid scrolling for list

navigation.</p>

  </div>

</div>

<h2 id="with-labels">Grid List with Labels</h2>

<p>Use labels to display additional contextual information for your grid list items.</p>

<div class="cols">

  <div class="col-7">

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

  </div>

  <div class="col-6">

<h4>Style</h4>

<p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to

control the contrast and ensures legibility of the labels while letting the content "shine through".</p>

  </div>

</div>

page.title=Building Blocks

header.justLinks=1

footer.hide=1

@jd:body

<style>

#landing-graphic-container {

  position: relative;

}

#text-overlay {

  position: absolute;

  left: 0;

  top: 520px;

  width: 450px;

}

</style>

<div id="landing-graphic-container">

  <div id="text-overlay">

    <span itemprop="description">Your inventory of ready-to-use elements for creating

    outstanding apps.</span>

    <br><br>

    <a href="{@docRoot}design/building-blocks/tabs.html" class="landing-page-link">Tabs</a>

  </div>

  <a href="{@docRoot}design/building-blocks/tabs.html">

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

  </a>

</div>

page.title=Lists

page.tags=listview,layout

@jd:body

<a class="notice-designers-material"

  href="http://www.google.com/design/spec/components/lists.html">

  <div>

    <h3>Material Design</h3>

    <p>Lists<p>

  </div>

</a>

<p itemprop="description">Lists present multiple line items in a vertical arrangement. They can be used for data selection as

well as drilldown navigation.</p>

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

<div class="cols clearfix">

  <div class="col-9">

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

  </div>

  <div class="col-4 with-callouts">

<ol style="margin-bottom: 60px;">

<li>

<h4>Section Divider</h4>

<p>Use section dividers to organize the content of your list into groups and facilitate scanning.</p>

</li>

<li>

<h4>Line Items</h4>

<p>List items can accommodate a wide range of data types in different arrangements, including

 simple single-line items, multi-line items, and custom items with icons, checkboxes, and action

 buttons.</p>

</li>

</ol>

<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/listview.html">

  <div>

    <h3>Developer Docs</h3>

    <p>List View</p>

  </div>

</a>

<a class="notice-designers-material"

  href="http://www.google.com/design/spec/components/lists-controls.html">

  <div>

    <h3>Material Design</h3>

    <p>Lists: Controls<p>

  </div>

</a>

  </div>

</div>