Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 3d0891d1 authored by Roman Nurik's avatar Roman Nurik Committed by Android Git Automerger
Browse files

am 548972d7: Merge "Android Design" into ics-mr1 

* commit '548972d7':
  Android Design
parents 5a3e67c7 548972d7

docs/html/design/building-blocks/buttons.html

0 → 100644
+191 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>



Android Design - Buttons

    </title>

    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">

    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">

    <link rel="stylesheet" href="../static/default.css">



  </head>

  <body>



    <div id="page-container">



      <div id="page-header"><a href="../index.html">Android Design</a></div>



      <div id="main-row">



        <ul id="nav">



          <li class="nav-section">

            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>

            <ul>

              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>

              <li><a href="../get-started/principles.html">Design Principles</a></li>

              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>

            </ul>

          </li>



          <li class="nav-section">

            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>

            <ul>

              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>

              <li><a href="../style/themes.html">Themes</a></li>

              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>

              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>

              <li><a href="../style/typography.html">Typography</a></li>

              <li><a href="../style/color.html">Color</a></li>

              <li><a href="../style/iconography.html">Iconography</a></li>

              <li><a href="../style/writing.html">Writing Style</a></li>

            </ul>

          </li>



          <li class="nav-section">

            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>

            <ul>

              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>

              <li><a href="../patterns/gestures.html">Gestures</a></li>

              <li><a href="../patterns/app-structure.html">App Structure</a></li>

              <li><a href="../patterns/navigation.html">Navigation</a></li>

              <li><a href="../patterns/actionbar.html">Action Bar</a></li>

              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>

              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>

              <li><a href="../patterns/selection.html">Selection</a></li>

              <li><a href="../patterns/notifications.html">Notifications</a></li>

              <li><a href="../patterns/compatibility.html">Compatibility</a></li>

              <li><a href="../patterns/pure-android.html">Pure Android</a></li>

            </ul>

          </li>



          <li class="nav-section">

            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>

            <ul>

              <li><a href="../building-blocks/tabs.html">Tabs</a></li>

              <li><a href="../building-blocks/lists.html">Lists</a></li>

              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>

              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>

              <li><a href="../building-blocks/spinners.html">Spinners</a></li>

              <li><a href="../building-blocks/buttons.html">Buttons</a></li>

              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>

              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>

              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>

              <li><a href="../building-blocks/switches.html">Switches</a></li>

              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>

              <li><a href="../building-blocks/pickers.html">Pickers</a></li>

            </ul>

          </li>



          <li>

            <div id="back-dac-section"><a href="../../index.html" target="_blank">Developers</a></div>

          </li>



        </ul>



        <div id="content">



          

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

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

              <h2>Buttons</h2>

            </div>

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

              <a href="#" class="prev-page-link">Previous</a>

              <a href="#" class="next-page-link">Next</a>

            </div>

          </div>

          



          



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



<div style="text-align: center">

  <img src="../static/content/buttons_basic.png">

</div>



<h2>Basic Buttons</h2>

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



<img src="../static/content/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 &amp; Light.

    </div>

  </div>

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

    <div class="figure-caption">

      Small buttons in Holo Dark &amp; Light.

    </div>

  </div>

</div>



<h2>Borderless Buttons</h2>

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



<img src="../static/content/buttons_borderless.png">







          

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

            <div class="paging-links layout-content-col span-9">&nbsp;</div>

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

              <a href="#" class="prev-page-link">Previous</a>

              <a href="#" class="next-page-link">Next</a>

            </div>

          </div>

          

        </div>



      </div>



      <div id="page-footer">



        <p id="copyright">

          Except as noted, this content is licensed under

          <a href="http://creativecommons.org/licenses/by/2.5/" target="_blank">

          Creative Commons Attribution 2.5</a>.<br>

          For details and restrictions, see the

          <a href="http://developer.android.com/license.html" target="_blank">Content License</a>.

        </p>



        <p>

          <a href="http://www.android.com/terms.html" target="_blank">Site Terms of Service</a> &ndash;

          <a href="http://www.android.com/privacy.html" target="_blank">Privacy Policy</a> &ndash;

          <a href="http://www.android.com/branding.html" target="_blank">Brand Guidelines</a>

        </p>



      </div>

    </div>



    <script src="../static/jquery-1.6.2.min.js"></script>

    <script>

    var SITE_ROOT = '../';

    </script>

    <script src="../static/default.js"></script>





    <script type="text/javascript">

    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

    </script>

    <script type="text/javascript">

    var pageTracker = _gat._getTracker("UA-5831155-1");

    pageTracker._trackPageview();

    </script>

  </body>

</html>

docs/html/design/building-blocks/dialogs.html

0 → 100644
+265 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>



Android Design - Dialogs

    </title>

    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">

    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">

    <link rel="stylesheet" href="../static/default.css">



  </head>

  <body>



    <div id="page-container">



      <div id="page-header"><a href="../index.html">Android Design</a></div>



      <div id="main-row">



        <ul id="nav">



          <li class="nav-section">

            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>

            <ul>

              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>

              <li><a href="../get-started/principles.html">Design Principles</a></li>

              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>

            </ul>

          </li>



          <li class="nav-section">

            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>

            <ul>

              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>

              <li><a href="../style/themes.html">Themes</a></li>

              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>

              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>

              <li><a href="../style/typography.html">Typography</a></li>

              <li><a href="../style/color.html">Color</a></li>

              <li><a href="../style/iconography.html">Iconography</a></li>

              <li><a href="../style/writing.html">Writing Style</a></li>

            </ul>

          </li>



          <li class="nav-section">

            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>

            <ul>

              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>

              <li><a href="../patterns/gestures.html">Gestures</a></li>

              <li><a href="../patterns/app-structure.html">App Structure</a></li>

              <li><a href="../patterns/navigation.html">Navigation</a></li>

              <li><a href="../patterns/actionbar.html">Action Bar</a></li>

              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>

              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>

              <li><a href="../patterns/selection.html">Selection</a></li>

              <li><a href="../patterns/notifications.html">Notifications</a></li>

              <li><a href="../patterns/compatibility.html">Compatibility</a></li>

              <li><a href="../patterns/pure-android.html">Pure Android</a></li>

            </ul>

          </li>



          <li class="nav-section">

            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>

            <ul>

              <li><a href="../building-blocks/tabs.html">Tabs</a></li>

              <li><a href="../building-blocks/lists.html">Lists</a></li>

              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>

              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>

              <li><a href="../building-blocks/spinners.html">Spinners</a></li>

              <li><a href="../building-blocks/buttons.html">Buttons</a></li>

              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>

              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>

              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>

              <li><a href="../building-blocks/switches.html">Switches</a></li>

              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>

              <li><a href="../building-blocks/pickers.html">Pickers</a></li>

            </ul>

          </li>



          <li>

            <div id="back-dac-section"><a href="../../index.html" target="_blank">Developers</a></div>

          </li>



        </ul>



        <div id="content">



          

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

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

              <h2>Dialogs</h2>

            </div>

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

              <a href="#" class="prev-page-link">Previous</a>

              <a href="#" class="next-page-link">Next</a>

            </div>

          </div>

          



          



<p>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="../static/content/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. As a rule, the dismissive action of a dialog is always on the left

 whereas the affirmative actions are on the right.</p>

</li>

</ol>



</div>



<img src="../static/content/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="layout-content-row">

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



    <img src="../static/content/dialogs_w_no_title.png">



  </div>

  <div class="layout-content-col span-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="layout-content-row">

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



    <img src="../static/content/dialogs_w_title.png">



  </div>

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





<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="../static/content/dialogs_popups_example.png">





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





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

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



    <div class="vspace size-6"></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>



  </div>

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



    <img src="../static/content/dialogs_toasts.png">



  </div>

</div>







          

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

            <div class="paging-links layout-content-col span-9">&nbsp;</div>

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

              <a href="#" class="prev-page-link">Previous</a>

              <a href="#" class="next-page-link">Next</a>

            </div>

          </div>

          

        </div>



      </div>



      <div id="page-footer">



        <p id="copyright">

          Except as noted, this content is licensed under

          <a href="http://creativecommons.org/licenses/by/2.5/" target="_blank">

          Creative Commons Attribution 2.5</a>.<br>

          For details and restrictions, see the

          <a href="http://developer.android.com/license.html" target="_blank">Content License</a>.

        </p>



        <p>

          <a href="http://www.android.com/terms.html" target="_blank">Site Terms of Service</a> &ndash;

          <a href="http://www.android.com/privacy.html" target="_blank">Privacy Policy</a> &ndash;

          <a href="http://www.android.com/branding.html" target="_blank">Brand Guidelines</a>

        </p>



      </div>

    </div>



    <script src="../static/jquery-1.6.2.min.js"></script>

    <script>

    var SITE_ROOT = '../';

    </script>

    <script src="../static/default.js"></script>





    <script type="text/javascript">

    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

    </script>

    <script type="text/javascript">

    var pageTracker = _gat._getTracker("UA-5831155-1");

    pageTracker._trackPageview();

    </script>

  </body>

</html>

docs/html/design/building-blocks/grid-lists.html

0 → 100644
+233 −0

File added.

Preview size limit exceeded, changes collapsed.

docs/html/design/building-blocks/index.html

0 → 100644
+171 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>



Android Design - Building Blocks

    </title>

    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">

    <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">

    <link rel="stylesheet" href="../static/default.css">



<style>

#landing-graphic-container {

  position: relative;

}



#text-overlay {

  position: absolute;

  left: 10px;

  top: 472px;

  width: 450px;

}

</style>



  </head>

  <body>



    <div id="page-container">



      <div id="page-header"><a href="../index.html">Android Design</a></div>



      <div id="main-row">



        <ul id="nav">



          <li class="nav-section">

            <div class="nav-section-header"><a href="../index.html">Get Started</a></div>

            <ul>

              <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>

              <li><a href="../get-started/principles.html">Design Principles</a></li>

              <li><a href="../get-started/ui-overview.html">UI Overview</a></li>

            </ul>

          </li>



          <li class="nav-section">

            <div class="nav-section-header"><a href="../style/index.html">Style</a></div>

            <ul>

              <li><a href="../style/devices-displays.html">Devices and Displays</a></li>

              <li><a href="../style/themes.html">Themes</a></li>

              <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>

              <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>

              <li><a href="../style/typography.html">Typography</a></li>

              <li><a href="../style/color.html">Color</a></li>

              <li><a href="../style/iconography.html">Iconography</a></li>

              <li><a href="../style/writing.html">Writing Style</a></li>

            </ul>

          </li>



          <li class="nav-section">

            <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>

            <ul>

              <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>

              <li><a href="../patterns/gestures.html">Gestures</a></li>

              <li><a href="../patterns/app-structure.html">App Structure</a></li>

              <li><a href="../patterns/navigation.html">Navigation</a></li>

              <li><a href="../patterns/actionbar.html">Action Bar</a></li>

              <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>

              <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>

              <li><a href="../patterns/selection.html">Selection</a></li>

              <li><a href="../patterns/notifications.html">Notifications</a></li>

              <li><a href="../patterns/compatibility.html">Compatibility</a></li>

              <li><a href="../patterns/pure-android.html">Pure Android</a></li>

            </ul>

          </li>



          <li class="nav-section">

            <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>

            <ul>

              <li><a href="../building-blocks/tabs.html">Tabs</a></li>

              <li><a href="../building-blocks/lists.html">Lists</a></li>

              <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>

              <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>

              <li><a href="../building-blocks/spinners.html">Spinners</a></li>

              <li><a href="../building-blocks/buttons.html">Buttons</a></li>

              <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>

              <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>

              <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>

              <li><a href="../building-blocks/switches.html">Switches</a></li>

              <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>

              <li><a href="../building-blocks/pickers.html">Pickers</a></li>

            </ul>

          </li>



          <li>

            <div id="back-dac-section"><a href="../../index.html" target="_blank">Developers</a></div>

          </li>



        </ul>



        <div id="content">



          

<div class="layout-content-row content-header just-links">

  <div class="layout-content-col span-9">&nbsp;</div>

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

    <a href="#" class="prev-page-link">Previous</a>

    <a href="#" class="next-page-link">Next</a>

  </div>

</div>





          



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

  <div id="text-overlay">

    Your inventory of ready-to-use elements for creating outstanding apps.

    <br><br>

    <a href="../building-blocks/tabs.html" class="landing-page-link">Tabs</a>

  </div>



  <a href="../building-blocks/tabs.html">

    <img src="../static/content/building_blocks_landing.png">

  </a>

</div>







          



        </div>



      </div>



      <div id="page-footer">



        <p id="copyright">

          Except as noted, this content is licensed under

          <a href="http://creativecommons.org/licenses/by/2.5/" target="_blank">

          Creative Commons Attribution 2.5</a>.<br>

          For details and restrictions, see the

          <a href="http://developer.android.com/license.html" target="_blank">Content License</a>.

        </p>



        <p>

          <a href="http://www.android.com/terms.html" target="_blank">Site Terms of Service</a> &ndash;

          <a href="http://www.android.com/privacy.html" target="_blank">Privacy Policy</a> &ndash;

          <a href="http://www.android.com/branding.html" target="_blank">Brand Guidelines</a>

        </p>



      </div>

    </div>



    <script src="../static/jquery-1.6.2.min.js"></script>

    <script>

    var SITE_ROOT = '../';

    </script>

    <script src="../static/default.js"></script>





    <script type="text/javascript">

    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

    </script>

    <script type="text/javascript">

    var pageTracker = _gat._getTracker("UA-5831155-1");

    pageTracker._trackPageview();

    </script>

  </body>

</html>

docs/html/design/building-blocks/lists.html

0 → 100644
+184 −0

File added.

Preview size limit exceeded, changes collapsed.