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

Commit 96c757e5 authored by Roman Nurik's avatar Roman Nurik Committed by Android (Google) Code Review
Browse files

Merge "docs: move Android Design from static HTML to JD" into ics-mr1

parents 66895ad5 b99ae73c

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

deleted100644 → 0
+0 −197
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 class="nav-section">

            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>

          </li>



          <li>

            <div id="back-dac-section"><a href="../../index.html">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 id="basic">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 id="borderless">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/">

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

          For details and restrictions, see the

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

        </p>



        <p>

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

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

          <a href="http://www.android.com/branding.html">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/buttons.jd

0 → 100644
+40 −0
Original line number Diff line number Diff line 
page.title=Buttons

@jd:body



<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="{@docRoot}design/media/buttons_basic.png">

</div>



<h2 id="basic">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="{@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 &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 id="borderless">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="{@docRoot}design/media/buttons_borderless.png">

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

+112 −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 class="nav-section">

            <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>

          </li>



          <li>

            <div id="back-dac-section"><a href="../../index.html">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>

          



          

page.title=Dialogs

@jd:body



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

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



<div class="with-callouts">
@@ -139,7 +34,7 @@ user to adjust settings or enter text.</p> 


</div>



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

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

<div class="figure-caption">

  Samples of typical dialog use in Android.

</div>
@@ -153,7 +48,7 @@ conveyed.</p> 
<div class="layout-content-row">

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



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

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



  </div>

  <div class="layout-content-col span-5">
@@ -170,7 +65,7 @@ this conversation?") or make a clear statement whose relationship to the action 
<div class="layout-content-row">

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



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

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



  </div>

  <div class="layout-content-col span-5">
@@ -193,7 +88,7 @@ available based on the title and the text of the action buttons.</p> 
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">

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





<h2 id="toasts">Toasts</h2>
@@ -211,59 +106,7 @@ 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>







    <img src="{@docRoot}design/media/dialogs_toasts.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/">

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

          For details and restrictions, see the

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

        </p>



        <p>

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

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

          <a href="http://www.android.com/branding.html">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

deleted100644 → 0
+0 −237

File deleted.

Preview size limit exceeded, changes collapsed.

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

0 → 100644
+79 −0
Original line number Diff line number Diff line 
page.title=Grid Lists

@jd:body



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



<p>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="layout-content-row">

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



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



  </div>

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

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



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



  </div>

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

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



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



  </div>

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