Android/frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge "Android Design" into ics-mr1

Browse Source
This commit is contained in:
Roman Nurik
2012-01-10 17:01:45 -08:00
committed by Android (Google) Code Review
parent d1186cd5bb 7379046690
commit 548972d798
251 changed files with 10437 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
docs/html/design/building-blocks/buttons.html Normal file
View File

@@ -0,0 +1,191 @@
<!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>

265
docs/html/design/building-blocks/dialogs.html Normal file
View File

@@ -0,0 +1,265 @@
<!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>

233
docs/html/design/building-blocks/grid-lists.html Normal file
View File

@@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Grid Lists
</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>Grid Lists</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>
<img src="../static/content/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="../static/content/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="../static/content/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="../static/content/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>
<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>

171
docs/html/design/building-blocks/index.html Normal file
View File

@@ -0,0 +1,171 @@
<!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>

184
docs/html/design/building-blocks/lists.html Normal file
View File

@@ -0,0 +1,184 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Lists
</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>Lists</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>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="layout-content-row clearfix">
<div class="layout-content-col span-9">
<img src="../static/content/lists_main.png">
</div>
<div class="layout-content-col span-4 with-callouts">
<ol>
<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>
</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>

187
docs/html/design/building-blocks/pickers.html Normal file
View File

@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Pickers
</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>Pickers</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>Pickers provide a simple way to select a single value from a set. In addition to touching the
up/down arrow buttons, it's possible to set the desired value from the keyboard or via a swipe
gesture.</p>
<div class="layout-content-row">
<div class="layout-content-col span-2">&nbsp;</div>
<div class="layout-content-col span-6">
<img src="../static/content/picker_space.png">
</div>
<div class="layout-content-col span-5">
<h4>Space considerations</h4>
<p>Pickers can be used inline on a form, but their relatively large footprint is best suited for
display in a dialog. For inline display, consider using more compact controls such as text fields or
spinners.</p>
</div>
</div>
<h2>Date and time pickers</h2>
<p>Android provides these as ready-to-use dialogs. Each picker is a dialog with a set of controls for
entering the parts of the date (month, day, year) or time (hour, minute, AM/PM). Using these in your
app helps ensure that a user's specification of a data or time input is valid and formatted
correctly. The format of a time and date picker adjusts automatically to the locale.</p>
<img src="../static/content/picker_datetime.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>

233
docs/html/design/building-blocks/progress.html Normal file
View File

@@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Progress and Activity
</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 id="system">Feedback</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>When an operation of interest to the user is taking place over a relatively long period of time,
provide visual feedback that it's still happening and in the process of being completed.</p>
<h2>Progress</h2>
<p>If you know the percentage of the operation that has been completed, use a determinate progress bar
to give the user a sense of how much longer it will take.</p>
<img src="../static/content/progress_download.png">
<p>The progress bar should always travel from 0% to 100% completion. Avoid setting the bar to a lower
value than a previous value, or using the same progress bar to represent the progress of multiple
events, since doing so makes the display meaningless. If you're not sure how long a particular
operation will take, use an indeterminate progress indicator.</p>
<div class="vspace size-2">&nbsp;</div>
<img src="../static/content/progress_themes.png">
<div class="figure-caption">
Progress bar in Holo Dark and Holo Light.
</div>
<h2 id="activity">Activity</h2>
<p>If you don't know how much longer an operation will continue, use an indeterminate progress
indicator. There are two styles available: a flat bar and a circle. Use the one that best fits the
available space.</p>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<img src="../static/content/progress_activity.png">
</div>
<div class="layout-content-col span-7 with-callouts">
<ol>
<li class="value-1"><h4>Activity bar (shown with the Holo Dark theme)</h4>
<p>
An indeterminate activity bar is used at the start of an application download because Market hasn't
been able to contact the server yet, and it's not possible to determine how long it will take for
the download to begin.
</p>
</li>
</ol>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<img src="../static/content/progress_activity2.png">
</div>
<div class="layout-content-col span-7 with-callouts">
<ol>
<li class="value-2"><h4>Activity circle (shown with the Holo Light theme)</h4>
<p>
An indeterminate activity circle is used in the Gmail application when a message is being
loaded because it's not possible to determine how long it will take to download the email.
</p>
</li>
</ol>
</div>
</div>
<p>You should only use one activity indicator on screen per activity, and it should appropriately sized
for the surrounding context. For example, the largest activity circle works well when displayed in a
blank content area, but not in a smaller dialog box.</p>
<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>

188
docs/html/design/building-blocks/scrolling.html Normal file
View File

@@ -0,0 +1,188 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Scrolling
</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>Scrolling</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>Scrolling allows the user to navigate to content in the overflow using a swipe gesture. The
scrolling speed is proportional to the speed of the gesture.</p>
<h2>Scroll Indicator</h2>
<p>Appears during scrolling to indicate what portion of the content is currently in view.</p>
<div class="framed-galaxynexus-land-span-13">
<video class="play-on-hover" autoplay>
<source src="../static/content/scroll_indicator.mp4" type="video/mp4">
<source src="../static/content/scroll_indicator.webm" type="video/webm">
<source src="../static/content/scroll_indicator.ogv" type="video/ogg">
</video>
</div>
<div class="figure-caption">
<div class="video-instructions">&nbsp;</div>
</div>
<h2>Index Scrolling</h2>
<p>In addition to traditional scrolling, a long alphabetical list can also offer index scrolling: a way
to quickly navigate to the items that begin with a particular letter. With index scrolling, a scroll
indicator appears even when the user isn't scrolling. Touching or dragging it causes the current
letter to pop up in a prominent way.</p>
<div class="framed-galaxynexus-land-span-13">
<video class="play-on-hover" autoplay>
<source src="../static/content/scroll_index.mp4" type="video/mp4">
<source src="../static/content/scroll_index.webm" type="video/webm">
<source src="../static/content/scroll_index.ogv" type="video/ogg">
</video>
</div>
<div class="figure-caption">
<div class="video-instructions">&nbsp;</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>

190
docs/html/design/building-blocks/seek-bars.html Normal file
View File

@@ -0,0 +1,190 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Seek Bars and Sliders
</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>Seek Bars and Sliders</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>Interactive sliders make it possible to select a value from a continuous or discrete range of values
by moving the slider thumb. The smallest value is to the left, the largest to the right. The
interactive nature of the slider makes it a great choice for settings that reflect intensity levels,
such as volume, brightness, or color saturation.</p>
<div class="layout-content-row">
<div class="layout-content-col span-9">
<img src="../static/content/seekbar_example.png">
</div>
<div class="layout-content-col span-4">
<div class="vspace size-2">&nbsp;</div>
<h4>Example</h4>
<p>Interactive slider to set the ringer volume. The value can either be set through the hardware volume controls or interactively via a gesture.</p>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-9">
<img src="../static/content/seekbar_style.png">
<div class="figure-caption">
Seek bars in Holo Light &amp; Dark
</div>
</div>
<div class="layout-content-col span-4">&nbsp;</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>

190
docs/html/design/building-blocks/spinners.html Normal file
View File

@@ -0,0 +1,190 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Spinners
</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>Spinners</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>Spinners provide a quick way to select one value from a set. In the default state, a spinner shows
its currently selected value. Touching the spinner displays a dropdown menu with all other available
values, from which the user can select a new one.</p>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<img src="../static/content/spinners_form.png">
<h4>Spinners in forms</h4>
<p>Spinners are useful for data picking in forms. They are compact and integrate nicely with other
components. Use spinners in forms for both simple data input and in combination with other input
fields. For example, a text field might let you edit an email address for a contact, while its
associated spinner allows you to select whether it's a Home or Work address.</p>
</div>
<div class="layout-content-col span-7">
<img src="../static/content/spinners_actionbar.png">
<h4>Spinners in action bars</h4>
<p>Use spinners in action bars to switch views. For example, Gmail uses a spinner to permit switching
between accounts or commonly used labels. Spinners are useful when changing the view is important to
your app, but not necessarily a frequent occurrence. In cases where view switching is frequent, use
tabs.</p>
</div>
</div>
<img src="../static/content/spinners_hololightanddark.png">
<div class="figure-caption">
Spinners in the Holo Dark and Holo Light themes, in various states.
</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>

181
docs/html/design/building-blocks/switches.html Normal file
View File

@@ -0,0 +1,181 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Switches
</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>Switches</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>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio
buttons, and on/off switches.</p>
<h2>Checkboxes</h2>
<p>Checkboxes allow the user to select multiple options from a set. Avoid using a single checkbox to
turn an option off or on. Instead, use an on/off switch.</p>
<div style="text-align: center">
<img src="../static/content/switches_checkboxes.png">
</div>
<h2>Radio Buttons</h2>
<p>Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive
selection if you think that the user needs to see all available options side-by-side. Otherwise,
consider a spinner, which uses less space.</p>
<div style="text-align: center">
<img src="../static/content/switches_radios.png">
</div>
<h2>On/off Switches</h2>
<p>On/off switches toggle the state of a single settings option.</p>
<div style="text-align: center">
<img src="../static/content/switches_switches.png">
</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>

213
docs/html/design/building-blocks/tabs.html Normal file
View File

@@ -0,0 +1,213 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Tabs
</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>Tabs</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>
<img src="../static/content/tabs_overview.png">
<p>Tabs in the action bar make it easy to explore and switch between different views or functional
aspects of your app, or to browse categorized data sets.</p>
<h2 id="scrollable">Scrollable Tabs</h2>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate
to the next/previous view, swipe left or right.</p>
</div>
<div class="layout-content-col span-7">
<video width="400" class="with-shadow play-on-hover" autoplay>
<source src="../static/content/tabs_scrolly.mp4" type="video/mp4">
<source src="../static/content/tabs_scrolly.webm" type="video/webm">
<source src="../static/content/tabs_scrolly.ogv" type="video/ogg">
</video>
<div class="figure-caption">
Scrolling tabs in Android Market.
<div class="video-instructions">&nbsp;</div>
</div>
</div>
</div>
<h2 id="fixed">Fixed Tabs</h2>
<p>Fixed tabs display all items concurrently. To navigate to a different view, touch the tab.</p>
<img src="../static/content/tabs_standard.png">
<div class="figure-caption">
Tabs in Holo Dark &amp; Light.
</div>
<img src="../static/content/tabs_youtube.png">
<div class="figure-caption">
Tabs in the YouTube app.
</div>
<h2 id="stacked">Stacked Tabs</h2>
<p>If view navigation is essential to your app, you can break out tabs into a separate action bar. This
permits fast view switching even on narrower screens.</p>
<img src="../static/content/tabs_stacked.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>

223
docs/html/design/building-blocks/text-fields.html Normal file
View File

@@ -0,0 +1,223 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Text Fields
</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>Text Fields</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>Text fields allow the user to type text into your app. They can be either single line or multi-line.
Touching a text field places the cursor and automatically displays the keyboard. In addition to
typing, text fields allow for a variety of other activities, such as text selection (cut, copy,
paste) and data lookup via auto-completion.</p>
<div class="layout-content-row">
<div class="layout-content-col span-12">
<img src="../static/content/text_input_singlevsmultiline.png">
</div>
</div>
<h4>Single line and multi line</h4>
<p>Single-line fields automatically scroll their content to the left as the text input cursor reaches
the right edge of the input field. Multi-line text fields automatically break to a new line for
overflow text and scroll vertically when the cursor reaches the lower edge.</p>
<img src="../static/content/text_input_typesandtypedown.png">
<div class="layout-content-row">
<div class="layout-content-col span-6">
<h4>Text field types</h4>
<p>Text fields can have different types, such as number, message, or email address. The type determines
what kind of characters are allowed inside the field, and may prompt the virtual keyboard to
optimize its layout for frequently used characters.</p>
</div>
<div class="layout-content-col span-6">
<h4>Auto-complete text fields</h4>
<p>Use auto-complete text fields to present real-time completions or search results in popups, so users
can enter information more accurately and efficiently.</p>
</div>
</div>
<h2>Text Selection</h2>
<p>Users can select any word in a text field with a long press. This action triggers a text selection
mode that facilitates extending the selection or choosing an action to perform on the selected text.
Selection mode includes:</p>
<div class="layout-content-row">
<div class="layout-content-col span-9">
<img src="../static/content/text_input_textselection.png">
</div>
<div class="layout-content-col span-4 with-callouts">
<ol>
<li>
<h4>Contextual action bar</h4>
<p>A contextual action bar (CAB) displays the actions available to perform on the selection:
typically cut, copy, and paste, but apps can insert additional commands as needed.</p>
</li>
<li>
<h4>Selection handles</h4>
<p>Selection handles can be dragged to select more or less text while remaining in selection mode.</p>
</li>
</ol>
</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>

201
docs/html/design/get-started/creative-vision.html Normal file
View File

@@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Creative Vision
</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>Creative Vision</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>
<img src="../static/content/creative_vision_main.png">
<div class="vspace size-1">&nbsp;</div>
<p>Ice Cream Sandwich (Android 4.0) marks a major milestone for Android design. We touched nearly every
pixel of the system as we expanded the new design approaches introduced in Honeycomb tablets to all
types of mobile devices. Starting with the most basic elements, we introduced a new font, Roboto,
designed for high-resolution displays. Other big changes include framework-level action bars on
phones and support for new phones without physical buttons.</p>
<p>We focused the design work with three overarching goals for our core apps and the system at large.
As you design apps to work with Android, consider these goals:</p>
<div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-4">
<h4>Enchant me</h4>
<p>Beauty is more than skin deep. Android apps are sleek and aesthetically pleasing on multiple levels.
Transitions are fast and clear; layout and typography are crisp and meaningful. App icons are works
of art in their own right. Just like a well-made tool, your app should strive to combine beauty,
simplicity and purpose to create a magical experience that is effortless and powerful.</p>
</div>
<div class="layout-content-col span-5">
<h4>Simplify my life</h4>
<p>Android apps make life easier and are easy to understand. When people use your app for the first
time, they should intuitively grasp the most important features. The design work doesn't stop at the
first use, though. Android apps remove ongoing chores like file management and syncing. Simple tasks
never require complex procedures, and complex tasks are tailored to the human hand and mind. People
of all ages and cultures feel firmly in control, and are never overwhelmed by too many choices or
irrelevant flash.</p>
</div>
<div class="layout-content-col span-4">
<h4>Make me amazing</h4>
<p>It's not enough to make an app that is easy to use. Android apps empower people to try new things
and to use apps in inventive new ways. Android lets people combine applications into new workflows
through multitasking, notifications, and sharing across apps. At the same time, your app should feel
personal, giving people access to superb technology with clarity and grace.</p>
</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>

452
docs/html/design/get-started/principles.html Normal file
View File

@@ -0,0 +1,452 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Design Principles
</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>Design Principles</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>These design principles were developed by and for the Android User Experience Team to keep users'
best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate
with purpose.</p>
<h2>Enchant Me</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Delight me in surprising ways</h4>
<p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to
experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful
force is at hand.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_delight.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Real objects are more fun than buttons and menus</h4>
<p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort
needed to perform a task while making it more emotionally satisfying.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_real_objects.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Let me make it mine</h4>
<p>Let people add a personal touch because it helps them feel at home and in control. Think about
subtle ways to offer personalization while providing sensible and beautiful default functionality.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_make_it_mine.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Get to know me</h4>
<p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and
over, place previous choices within easy reach.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_get_to_know_me.png">
</div>
</div>
<h2>Simplify My Life</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Keep it brief</h4>
<p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_keep_it_brief.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Pictures are faster than words</h4>
<p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient
than words.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_pictures.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Decide for me but let me have the final say</h4>
<p>Take your best guess and act rather than asking first. Too many choices and decisions make people
unhappy. Just in case you get it wrong, allow for 'undo'.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_decide_for_me.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Only show what I need when I need it</h4>
<p>People get overwhelmed when they see too much at once. Break tasks and information into small,
digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_information_when_need_it.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>I should always know where I am</h4>
<p>Give people confidence that they know their way around. Make places in your app look distinct and
use transitions to show relationships among screens. Provide feedback on tasks in progress.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_navigation.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Never lose my stuff</h4>
<p>Save what people took time to create and let them access it from anywhere. Remember settings,
personal touches, and creations across phones, tablets, and computers. It makes upgrading the
easiest thing in the world.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_never_lose_stuff.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>If it looks the same, it should act the same</h4>
<p>Help people discern functional differences by making them visually distinct rather than subtle.
Avoid modes, which are places that look similar but act differently on the same input.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_looks_same.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Only interrupt me if it's important</h4>
<p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay
focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_important_interruption.png">
</div>
</div>
<h2>Make Me Amazing</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Give me tricks that work everywhere</h4>
<p>People feel great when they figure things out for themselves. Make your app easier to learn by
leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture
may be a good navigational shortcut.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_tricks.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>It's not my fault</h4>
<p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your
app. If something goes wrong, give clear recovery instructions but spare them the technical details.
If you can fix it behind the scenes, even better.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_error.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Sprinkle encouragement</h4>
<p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions,
even if it's just a subtle glow.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_sprinkle_encouragement.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Do the heavy lifting for me</h4>
<p>Make novices feel like experts by enabling them to do things they never thought they could. For
example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in
only a few steps.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_heavy_lifting.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Make important things fast</h4>
<p>Not all actions are equal. Decide what's most important in your app and make it easy to find and
fast to use, like the shutter button in a camera, or the pause button in a music player.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/principles_make_important_fast.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>

301
docs/html/design/get-started/ui-overview.html Normal file
View File

@@ -0,0 +1,301 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - UI Overview
</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>UI Overview</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>Android's system UI provides the framework on top of which you build your app. Important aspects
include the Home screen experience, global device navigation, and notifications.</p>
<p>Your app will play an important part in keeping the overall Android experience consistent and
enjoyable to use. At the end of this chapter we introduce the main elements for achieving this goal
in your app.</p>
<p>Read on for a quick overview of the most important aspects of the Android user interface.</p>
<h2>Home, All Apps, and Recents</h2>
<div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-4">
<img src="../static/content/ui_overview_home_screen.png">
<h4>Home screen</h4>
<p>Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between
different home screen panels by swiping left and right.</p>
<p>The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view
regardless of which panel is currently showing.</p>
<p>Access the entire collection of apps and widgets by touching the All Apps button at the center of
the Favorites Tray.</p>
</div>
<div class="layout-content-col span-4">
<img src="../static/content/ui_overview_all_apps.png">
<h4>All apps screen</h4>
<p>The All Apps screen lets you browse the entire set of apps and widgets that are installed on your
device.</p>
<p>Users can drag an app or widget icon from the All Apps screen and place it in any empty location on
any Home screen.</p>
</div>
<div class="layout-content-col span-4">
<img src="../static/content/ui_overview_recents.png">
<h4>Recents screen</h4>
<p>Recents provides an efficient way of switching between recently used applications. It provides a
clear navigation path between multiple ongoing tasks.</p>
<p>The Recents button at the right side of the navigation bar displays the apps that the user has
interacted with most recently. They are organized in reverse chronological order with the most
recently used app at the bottom.</p>
<p>Switch to an app by touching it. Remove an item by swiping left or right.</p>
</div>
</div>
<h2>UI Bars</h2>
<p>The UI bars are screen areas dedicated to the display of notifications, communication of device
status, and device navigation. Typically the UI bars are displayed concurrently with your app. Apps
that display immersive content, such as movies or images, can temporarily hide the UI bars to allow
the user to enjoy full screen content without distraction.</p>
<img src="../static/content/ui_overview_system_ui.png">
<div class="with-callouts">
<ol>
<li>
<h4>Status Bar</h4>
<p>Displays pending notifications on the left and status, such as time, battery level, or signal
strength, on the right. Swipe down from the status bar to show notification details.</p>
</li>
<li>
<h4>Navigation Bar</h4>
<p>New for phones in Android 4.0, the navigation bar is present only on devices that don't have
the traditional hardware keys. It houses the device navigation controls Back, Home, and
Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p>
</li>
<li>
<h4>System Bar</h4>
<p>Combines the status and navigation bars for display on tablet form factors.</p>
</li>
</ol>
</div>
<h2>Notifications</h2>
<p>Notifications are brief messages that users can access at any time from the status bar. They
provide updates, reminders, or information that's important, but not critical enough to warrant
interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a
notification opens the associated app. <a href="../patterns/notifications.html">More on Notifications</a></p>
<div class="layout-content-row">
<div class="layout-content-col span-4">
<img src="../static/content/ui_overview_notifications.png">
</div>
<div class="layout-content-col span-9">
<img src="../static/content/notifications_dismiss.png">
<p>Most notifications have a one-line title and a one-line message. The recommended layout for a
notification includes two lines. If necessary, you can add a third line. Timestamps are optional.</p>
<p>Swiping a notification right or left removes it from the notification drawer.</p>
</div>
</div>
<h2 id="app">Common App UI</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<img src="../static/content/ui_overview_app_ui.png">
</div>
<div class="layout-content-col span-6 with-callouts">
<p>A typical Android app consists of action bars and the app content area.</p>
<ol>
<li>
<h4>Main Action Bar</h4>
<p>The command and control center for your app. The main action bar includes elements for
navigating your app's hierarchy and views, and also surfaces the most important actions.</p>
<p><a href="../patterns/actionbar.html">More on the Action Bar</a></p>
</li>
<li>
<h4>View Control</h4>
<p>Allows users to switch between the different views that your app provides. Views typically
consist of different arrangements of your data or different functional aspects of your app.</p>
</li>
<li>
<h4>Content Area</h4>
<p>The space where the content of your app is displayed.</p>
</li>
<li>
<h4>Split Action Bar</h4>
<p>Split action bars provide a way to distribute actions across additional bars located below
the main action bar or at the bottom of the screen. In this example, a split action bar moves
important actions that won't fit in the main bar to the bottom.</p>
</li>
</ol>
</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>

164
docs/html/design/index.html Normal file
View File

@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Welcome
</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: 280px;
}
</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 id="landing-graphic-container">
<div id="text-overlay">
Welcome to <strong>Android Design</strong>, your place for learning how to design exceptional Android apps.
<br><br>
<a href="get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
</div>
<a href="get-started/creative-vision.html">
<img src="static/content/index_landing_page.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>

487
docs/html/design/patterns/actionbar.html Normal file
View File

@@ -0,0 +1,487 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Action Bar
</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>Action Bar</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>
<img src="../static/content/action_bar_pattern_overview.png">
<p>The <em>action bar</em> is arguably the most important structural element of an Android app. It's a
dedicated piece of real estate at the top of each screen that is generally persistent throughout the
app.</p>
<p><strong>The main purpose of the action bar is to</strong>:</p>
<ul>
<li>Make important actions (such as <em>New</em> or <em>Search</em>, etc) prominent and accessible in a predictable
way.</li>
<li>Support consistent navigation and view switching within apps.</li>
<li>Reduce clutter by providing an action overflow for rarely used actions.</li>
<li>Provide a dedicated space for giving your app an identity.</li>
</ul>
<p>If you're new to writing Android apps, note that the action bar is one of the most important design
elements you can implement. Following the guidelines described here will go a long way toward making
your app's interface consistent with the core Android apps.</p>
<h2>General Organization</h2>
<p>The action bar is split into four different functional areas that apply to most apps.</p>
<img src="../static/content/action_bar_basics.png">
<div class="layout-content-row">
<div class="layout-content-col span-7 with-callouts">
<ol>
<li class="value-1"><h4>App icon</h4>
<p>
The app icon establishes your app's identity. It can be replaced with a different logo or branding if
you wish.
Important: If the app is currently not displaying the top-level screen, be sure to display the Up
caret to the left of the app icon, so the user can navigate up the hierarchy. For more discussion of
Up navigation, see the "Navigation" pattern.
<div class="figure">
<img src="../static/content/action_bar_pattern_up_app_icon.png">
<div class="figure-caption">
App icon with and without "up" affordance.
</div>
</div>
</p>
</li>
</ol>
</div>
<div class="layout-content-col span-6 with-callouts">
<ol>
<li class="value-2"><h4>View control</h4>
<p>
If your app displays data in different views, this segment of the action bar allows users to switch
views. Examples of view-switching controls are drop-down menus or tab controls.
</p>
<p>
If your app doesn't support different views, you can also use this space to display non-interactive
content, such as an app title or longer branding information.
</p>
</li>
<li class="value-3"><h4>Action buttons</h4>
<p>
Show the most important actions of your app in the actions section. Actions that don't fit in the
action bar are moved automatically to the action overflow.
</p>
</li>
<li class="value-4"><h4>Action overflow</h4>
<p>
Move less often used actions to the action overflow.
</p>
</li>
</ol>
</div>
</div>
<h2>Adapting to Rotation and Different Screen Sizes</h2>
<p>One of the most important UI issues to consider when creating an app is how to adjust to screen
rotation on different screen sizes.</p>
<p>You can adapt to such changes by using <em>split action bars</em>, which allow you to distribute action bar
content across multiple bars located below the main action bar or at the bottom of the screen.</p>
<img src="../static/content/action_bar_pattern_rotation.png">
<div class="figure-caption">
Split action bar showing action buttons at the bottom of the screen in vertical orientation.
</div>
<h2>Layout Considerations for Split Action Bars</h2>
<div class="layout-content-row">
<div class="layout-content-col span-8 with-callouts">
<p>When splitting up content across multiple action bars, you generally have three possible locations
for action bar content:</p>
<ol>
<li><strong>Main action bar</strong></li>
<li><strong>Top bar</strong></li>
<li><strong>Bottom bar</strong></li>
</ol>
<p>If the user can navigate up the hierarchy from a given screen, the main action bar contains the up
caret, at a minimum.</p>
<p>To allow the user to quickly switch between the views your app provides, use tabs or a spinner in
the top bar.</p>
<p>To display actions and, if necessary, the action overflow, use the bottom bar.</p>
</div>
<div class="layout-content-col span-3">
<img src="../static/content/action_bar_pattern_considerations.png">
</div>
</div>
<h2>Contextual Action Bars</h2>
<p>A <em>contextual action bar (CAB)</em> is a temporary action bar that overlays the app's action bar for the
duration of a particular sub-task. CABs are most typically used for tasks that involve acting on
selected data or text.</p>
<img src="../static/content/action_bar_cab.png">
<div class="figure-caption">
Contextual action bar shown in Browser and Gmail
</div>
<p>The selection CAB appears after a long press on a selectable data item triggers selection mode.</p>
<p><strong>From here the user can</strong>:</p>
<ul>
<li>Select additional elements by touching them.</li>
<li>Trigger an action from the CAB that applies to all selected data items. The CAB then
automatically dismisses itself.</li>
<li>Dismiss the CAB via the navigation bar's Back button or the CAB's checkmark button. This removes
the CAB along with all selection highlights.</li>
</ul>
<p>Use CABs whenever you allow the user to select data via long press. You can control the action
content of a CAB in order to insert the actions you would like the user to be able to perform.</p>
<p>For more information, refer to the "Selection" pattern.</p>
<h2>Action Bar Elements</h2>
<h4>Tabs</h4>
<p><em>Tabs</em> display app views concurrently and make it easy to explore and switch between them. Use tabs
if you expect your users to switch views frequently.</p>
<img src="../static/content/tabs_youtube.png">
<p>There are two types of tabs: fixed and scrollable.</p>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<h4>Scrollable tabs</h4>
<p><em>Scrollable tabs</em> always take up the entire width of the bar, with the currently active view item in
the center, and therefore need to live in a dedicated bar. Scrollable tabs can themselves be
scrolled horizontally to bring more tabs into view.</p>
<p>Use scrollable tabs if you have a large number of views or if you're unsure how many views will be
displayed because your app inserts views dynamically (for example, open chats in a messaging app
that the user can navigate between). Scrollable tabs should always allow the user to navigate
between the views by swiping left or right on the content area as well as swiping the tabs
themselves.</p>
</div>
<div class="layout-content-col span-7">
<video width="400" class="with-shadow play-on-hover" autoplay>
<source src="../static/content/tabs_scrolly.mp4" type="video/mp4">
<source src="../static/content/tabs_scrolly.webm" type="video/webm">
<source src="../static/content/tabs_scrolly.ogv" type="video/ogg">
</video>
<div class="figure-caption">
Scrolling tabs in Android Market.
<div class="video-instructions">&nbsp;</div>
</div>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<h4>Fixed tabs</h4>
<p><em>Fixed tabs</em> are always visible on the screen, and can't be moved out of the way like scrollable
tabs. Fixed tabs in the main action bar can move to the top bar when the screen orientation changes.</p>
</div>
<div class="layout-content-col span-7">
<img src="../static/content/action_bar_pattern_default_tabs.png">
<div class="figure-caption">
Default fixed tabs shown in Holo Dark &amp; Light.
</div>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<h4>Spinners</h4>
<p>A <em>spinner</em> is a drop-down menu that allows users to switch between views of your app. </p>
<p><strong>Use spinners rather than tabs in the main action bar if</strong>:</p>
<ul>
<li>You don't want to give up the vertical screen real estate for a dedicated tab bar.</li>
<li>You expect your app's users to switch views infrequently.</li>
</ul>
</div>
<div class="layout-content-col span-7">
<img src="../static/content/action_bar_pattern_spinner.png">
<div class="figure-caption">
Action bar spinner from Calendar application.
</div>
</div>
</div>
<h4>Action buttons</h4>
<p><em>Action buttons</em> on the action bar surface your app's most important activities. Think about which
buttons will get used most often, and order them accordingly. Depending on available screen real
estate, the system shows your most important actions as action buttons and moves the rest to the
action overflow.</p>
<img src="../static/content/action_bar_pattern_action_icons.png">
<div class="figure-caption">
A sampling of action buttons used throughout the Gmail application.
</div>
<p>For guidance on prioritizing actions, use the FIT scheme.</p>
<div class="layout-content-row">
<div class="layout-content-col span-4">
<p><strong>F &mdash; Frequent</strong></p>
<ul>
<li>Will people use this action at least 7 out of 10 times they visit the screen?</li>
<li>Will they typically use it several times in a row?</li>
<li>Would taking an extra step every time truly be burdensome?</li>
</ul>
</div>
<div class="layout-content-col span-4">
<p><strong>I &mdash; Important</strong></p>
<ul>
<li>Do you want everyone to discover this action because it's especially cool or a selling point?</li>
<li>Is it something that needs to be effortless in the rare cases it's needed?</li>
</ul>
</div>
<div class="layout-content-col span-4">
<p><strong>T &mdash; Typical</strong></p>
<ul>
<li>Is it typically presented as a first-class action in similar apps?</li>
<li>Given the context, would people be surprised if it were buried in the action overflow?</li>
</ul>
</div>
</div>
<p>If either F, I, or T apply, then it's appropriate for the action bar. Otherwise, it belongs in the
action overflow.</p>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<h4>Action overflow</h4>
<p>The action overflow in the action bar provides access to your app's less frequently used actions.
The overflow icon only appears on phones that have no menu hardware keys. Phones with menu keys
display the action overflow when the user presses the key.</p>
</div>
<div class="layout-content-col span-7">
<img src="../static/content/action_bar_pattern_overflow.png">
<div class="figure-caption">
Action overflow is pinned to the right side.
</div>
</div>
</div>
<p>How many actions will fit in the main action bar? Action bar capacity is controlled by the following
rules:</p>
<ul>
<li>Action buttons in the main action bar may not occupy more than 50% of the bar's width. Action
buttons on bottom action bars can use the entire width.</li>
<li>The screen width in density-independent pixels
(<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym>)
determine the number of items that will fit in the main action bar:<ul>
<li>smaller than 360 dp = 2 icons</li>
<li>360-499 dp = 3 icons</li>
<li>500-599 dp = 4 icons</li>
<li>600 dp and larger = 5 icons</li>
</ul>
</li>
</ul>
<img src="../static/content/action_bar_pattern_table.png">
<div class="figure-caption">
In the above table "o" denotes an action bar item and "=" an overflow icon.
</div>
<h4>Sharing data</h4>
<p>Whenever your app permits sharing of data, such as images or movie clips, use a <em>share action
provider</em> in your action bar. The share action provider is designed to speed up sharing by
displaying the most recently used sharing service next to a spinner button that contains other
sharing options.</p>
<img src="../static/content/action_bar_pattern_share_pack.png">
<div class="figure-caption">
The Gallery app's share action provider with extended spinner for additional sharing options.
</div>
<h2>Action Bar Checklist</h2>
<p>When planning your split action bars, ask yourself questions like these:</p>
<h4>How important is view navigation to the task?</h4>
<p>If view navigation is very important to your app, use tabs (for fastest view-switching) or spinners.</p>
<h4>Which of the app's actions need to be consistently available directly from the action bar, and which can be moved to the action overflow?</h4>
<p>Use the <acronym title="Frequent, Important or Typical">FIT</acronym> scheme to decide if actions
are displayed at the top-level or can be moved to the action overflow. If the number of top-level
actions exceeds the capacity of the main action bar, display them separately in a bottom action bar.</p>
<h4>What else is important enough to warrant continuous display?</h4>
<p>Sometimes it is important to display contextual information for your app that's always visible.
Examples are the number of unread messages in a messaging inbox view or the Now Playing information
in a music player. Carefully plan which important information you would like to display and
structure your action bars accordingly.</p>
<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>

402
docs/html/design/patterns/app-structure.html Normal file
View File

@@ -0,0 +1,402 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Application Structure
</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>Application Structure</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>Apps come in many varieties that address very different needs. For example:</p>
<ul>
<li>Apps such as Calculator or Camera that are built around a single focused activity handled from a
single screen</li>
<li>Apps such as Phone whose main purpose is to switch between different activities without deeper
navigation</li>
<li>Apps such as Gmail or Market that combine a broad set of data views with deep navigation</li>
</ul>
<p>Your app's structure depends largely on the content and tasks you want to surface for your users.</p>
<h2>General Structure</h2>
<p>A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is
deep and complex, category views connect top level and detail views.</p>
<div class="layout-content-row">
<div class="layout-content-col span-9">
<img src="../static/content/app_structure_overview.png">
</div>
<div class="layout-content-col span-4">
<h4>Top level views</h4>
<p>The top level of the app typically consists of the different views that your app supports. The views
either show different representations of the same data or expose an altogether different functional
facet of your app.</p>
<div class="vspace size-3">&nbsp;</div>
<h4>Category views</h4>
<p>Category views allow you to drill deeper into your data.</p>
<div class="vspace size-11">&nbsp;</div>
<h4>Detail/edit view</h4>
<p>The detail/edit view is where you consume or create data.</p>
</div>
</div>
<h2>Top Level</h2>
<p>The layout of your start screen requires special attention. This is the first screen people see
after launching your app, so it should be an equally rewarding experience for new and frequent
visitors alike.</p>
<p>Ask yourself: "What are my typical users most likely going to want to do in my app?", and structure
your start screen experience accordingly.</p>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Put content forward</h4>
<p>Many apps focus on the content display. Avoid navigation-only screens and instead let people get to
the meat of your app right away by making content the centerpiece of your start screen. Choose
layouts that are visually engaging and appropriate for the data type and screen size.</p>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/app_structure_market.png">
<div class="figure-caption">
Market's start screen primarily allows navigation into the stores for Apps, Music, Books, and
Games. It is also enriched with tailored recommendations and promotions that surface content
of interest to the user. Search is readily available from the action bar.
</div>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Set up action bars for navigation and actions</h4>
<p>All screens in your app should display action bars to provide consistent navigation and surface
important actions.</p>
<p>At the top level, special considerations apply to the action bar:</p>
<ul>
<li>Use the action bar to display your app's icon or title.</li>
<li>If your top level consists of multiple views, or if switching between data from different user
accounts is a significant use case, make sure that it's easy for the user to navigate between them
by adding view controls to your action bar.</li>
<li>If your app allows people to create content, consider making the content accessible right from the
top level.</li>
<li>If your content is searchable, include the Search action in the action bar so people can cut
through the navigation hierarchy.</li>
</ul>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/app_structure_gmail.png">
<div class="figure-caption">
Email is about productivity, so an efficient, easy-to-skim list with higher data density works
well. Navigation supports switching between accounts and recent labels. Icons for creating a
new message or searching are prominent in the split action bar at the bottom.
</div>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Create an identity for your app</h4>
<p>Creating an identity for your app goes beyond the action bar. Your app communicates its identity
through its data, the way that data is arranged, and how people interact with it. Especially for
media-rich applications, try to create unique layouts that showcase your data and go beyond the
monotony of simple list views.</p>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/app_structure_music_lndscp.png">
<div class="figure-caption">
The 3D carousel celebrates cover art and establishes a unique identity for the Music app.
Defaulting to the Recent view keeps the focus on music the user has been listening to lately.
</div>
</div>
</div>
<h2>Categories</h2>
<p>Generally, the purpose of a deep, data-driven app is to navigate through organizational categories
to the detail level, where data can be viewed and managed. Minimize perceived navigation effort by
keeping your apps shallow.</p>
<p>Even though the number of vertical navigation steps from the top level down to the detail views is
typically dictated by the structure of your app's content, there are several ways you can cut down
on the perception of onerous navigation.</p>
<h4>Use tabs to combine category selection and data display</h4>
<p>This can be successful if the categories are familiar or the number of categories is small. It has
the advantage that a level of hierarchy is removed and data remains at the center of the user's
attention. Navigating laterally between data-rich categories is more akin to a casual browsing
experience than to an explicit navigation step.</p>
<div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-8">
<p>If the categories are familiar, predictable, or closely related, use scrolling tabs (where not all
items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to
minimize navigational effort. Rule of thumb: no more than 5&ndash;7 tabs.</p>
<img src="../static/content/app_structure_scrolltabs.png">
<div class="figure-caption">
Market uses tabs to simultaneously show category choice and content. To navigate between
categories, users can swipe left/right on the content.
</div>
</div>
<div class="layout-content-col span-5">
<p>If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are
in view at the same time.</p>
<img src="../static/content/app_structure_fixedtabs.png">
<div class="figure-caption">
YouTube uses fixed tabs to switch between different, relatively unrelated functional areas.
</div>
</div>
</div>
<h4>Allow cutting through hierarchies</h4>
<p>Take advantage of shortcuts that allow people to reach their goals quicker. To allow top-level
invocation of actions for a data item from within list or grid views, display prominent actions
directly on list view items using drop-downs or split list items. This lets people invoke actions on
data without having to navigate all the way down the hierarchy.</p>
<img src="../static/content/app_structure_shortcut_on_item.png">
<div class="figure-caption">
Music allows the user to act upon a data item (song) from within the category view (album),
thereby removing the need to navigate all the way down to the song's detail view.
</div>
<h4>Acting upon multiple data items</h4>
<p>Even though category views mostly serve to guide people to content detail, keep in mind that there
are often good reasons to act on collections of data as well.</p>
<p>For example, if you allow people to delete an item in a detail view, you should also allow them to
delete multiple items in the category view. Analyze which detail view actions are applicable to
collections of items. Then use multi-select to allow application of those actions to multiple items
in a category view.</p>
<h2>Details</h2>
<p>The detail view allows you to view and act on your data. The layout of the detail view depends on
the data type being displayed, and therefore differs widely among apps.</p>
<div class="layout-content-row">
<div class="layout-content-col span-4">
<h4>Layout</h4>
<p>Consider the activities people will perform in the detail view and arrange the layout accordingly.
For immersive content, make use of the lights-out mode to allow for distraction-free viewing of
full-screen content.</p>
<img src="../static/content/app_structure_people_detail.png">
</div>
<div class="layout-content-col span-9">
<img src="../static/content/app_structure_book_detail_page_flip.png">
<div class="figure-caption">
Google Books' detail view is all about replicating the experience of reading an actual book.
The page-flip animation reinforces that notion. To create an immersive experience the app
enters lights-out mode, which hides all system UI affordances.
</div>
<div class="figure-caption">
The purpose of the People app's detail view is to surface communication options. The list view
allows for efficient scanning and quick access of phone numbers, email addresses and other
information items. Split items are used to combine calling and messaging into one compact line
item.
</div>
</div>
</div>
<h4>Make navigation between detail views efficient</h4>
<p>If your users are likely to want to look at multiple items in sequence, allow them to navigate
between items from within the detail view. Use swipe views or other techniques, such as filmstrips,
to achieve this.</p>
<img src="../static/content/app_structure_gmail_swipe.png">
<div class="figure-caption">
Gmail using swipe views to navigate from detail view to detail view.
</div>
<img src="../static/content/app_structure_gallery_filmstrip.png">
<div class="figure-caption">
In addition to supporting swipe gestures to move left or right through images, Gallery provides a
filmstrip control that lets people quickly jump to specific images.
</div>
<h2>Checklist</h2>
<ul>
<li>
<p>Find ways to display useful content on your start screen.</p>
</li>
<li>
<p>Use action bars to provide consistent navigation.</p>
</li>
<li>
<p>Keep your hierarchies shallow by using horizontal navigation and shortcuts.</p>
</li>
<li>
<p>Use multi-select to allow the user to act on collections of data.</p>
</li>
<li>
<p>Allow for quick navigation between detail items with swipe views.</p>
</li>
</ul>
<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>

214
docs/html/design/patterns/compatibility.html Normal file
View File

@@ -0,0 +1,214 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Backwards Compatibility
</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>Backwards Compatibility</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>Significant changes in Android 3.0 included:</p>
<ul>
<li>Deprecation of navigation hardware keys (Back, Menu, Search, Home) in favor of handling navigation
via virtual controls (Back, Home, Recents).</li>
<li>Robust pattern for the use of menus in action bars.</li>
</ul>
<p>Android 4.0 brings these changes for tablets to the phone platform.</p>
<h2>Adapting Android 4.0 to Older Hardware and Apps</h2>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<h4>Phones with virtual navigation controls</h4>
<p>Android apps written for Android 3.0 and later display actions in the action bar. Actions that don't
fit in the action bar or aren't important enough to be displayed at the top level appear in the
action overflow.</p>
<p>Users access the action overflow by touching it in the action bar.</p>
</div>
<div class="layout-content-col span-7">
<img src="../static/content/compatibility_virtual_nav.png">
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<h4>Phones with physical navigation keys</h4>
<p>Android phones with traditional navigation hardware keys don't display the virtual navigation bar at
the bottom of the screen. Instead, the action overflow is available from the menu hardware key. The
resulting actions popup has the same style as in the previous example, but is displayed at the bottom of the screen.</p>
</div>
<div class="layout-content-col span-7">
<img src="../static/content/compatibility_physical_buttons.png">
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<h4>Legacy apps on phones with virtual navigation controls</h4>
<p>When you run an app that was built for Android 2.3 or earlier on a phone with virtual navigation
controls, an action overflow control appears at the right side of the virtual navigation bar. You
can touch the control to display the app's actions in the traditional Android menu styling.</p>
</div>
<div class="layout-content-col span-7">
<img src="../static/content/compatibility_legacy_apps.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>

268
docs/html/design/patterns/gestures.html Normal file
View File

@@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Gestures
</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>Gestures</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>Gestures allow users to interact with your app by manipulating the screen objects you provide. The
following table shows the core gesture set that is supported in Android.</p>
<div class="layout-content-row">
<div class="layout-content-col span-4">
<img src="../static/content/gesture_touch.png">
<h4>Touch</h4>
<p>Triggers the default functionality for a given item.</p>
<ul>
<li class="no-bullet with-icon action">
<h4>Action</h4>
<p>Press, lift</p></li>
</ul>
</div>
<div class="layout-content-col span-4">
<img src="../static/content/gesture_longtouch.png">
<h4>Long press</h4>
<p>Enters data selection mode. Allows you to select one or more items in a view and act upon
the data using a contextual action bar. Avoid using long press for showing contextual menus.</p>
<ul>
<li class="no-bullet with-icon action">
<h4>Action</h4>
<p>Press, wait, lift</p></li>
</ul>
</div>
<div class="layout-content-col span-4">
<img src="../static/content/gesture_swipe.png">
<h4>Swipe</h4>
<p>Scrolls overflowing content, or navigates between views in the same hierarchy.</p>
<ul>
<li class="no-bullet with-icon action">
<h4>Action</h4>
<p>Press, move, lift</p></li>
</ul>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-4">
<img src="../static/content/gesture_drag.png">
<h4>Drag</h4>
<p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p>
<ul>
<li class="no-bullet with-icon action">
<h4>Action</h4>
<p>Long press, move, lift</p></li>
</ul>
</div>
<div class="layout-content-col span-4">
<img src="../static/content/gesture_doubletouch.png">
<h4>Double touch</h4>
<p>Zooms into content. Also used as a secondary gesture for text selection.</p>
<ul>
<li class="no-bullet with-icon action">
<h4>Action</h4>
<p>Two touches in quick succession</p></li>
</ul>
</div>
<div class="layout-content-col span-4">
<img src="../static/content/gesture_pinchopen.png">
<h4>Pinch open</h4>
<p>Zooms into content.</p>
<ul>
<li class="no-bullet with-icon action">
<h4>Action</h4>
<p>2-finger press, move outwards, lift</p></li>
</ul>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-4">
<img src="../static/content/gesture_pinchclose.png">
<h4>Pinch close</h4>
<p>Zooms out of content.</p>
<ul>
<li class="no-bullet with-icon action">
<h4>Action</h4>
<p>2-finger press, move inwards, lift</p></li>
</ul>
</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>

171
docs/html/design/patterns/index.html Normal file
View File

@@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Design Patterns
</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: 492px;
width: 200px;
}
</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">
Design apps that behave in a consistent, predictable fashion.
<br><br>
<a href="../patterns/new-4-0.html" class="landing-page-link">New in Android 4.0</a>
</div>
<a href="../patterns/new-4-0.html">
<img src="../static/content/patterns_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>

260
docs/html/design/patterns/multi-pane-layouts.html Normal file
View File

@@ -0,0 +1,260 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Multi-pane Layouts
</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>Multi-pane Layouts</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>When writing an app for Android, keep in mind that Android devices come in many different screen
sizes and types. Make sure that your app consistently provides a balanced and aesthetically pleasing
layout by adjusting its content to varying screen sizes and orientations.</p>
<p><em>Panels</em> are a great way for your app to achieve this. They allow you to combine multiple views into
one compound view when a lot of horizontal screen real estate is available and by splitting them up
when less space is available.</p>
<h2>Combining Multiple Views Into One</h2>
<p>On smaller devices your content is typically divided into a master grid or list view and a detail
view. Touching an item in the master view opens a different screen showing that item's detail
information.</p>
<img src="../static/content/multipane_views.png">
<p>Because tablets have more screen real estate than phones, you can use panels to combine the related
list and detail views into a single compound view. This uses the additional space more efficiently
and makes navigating the app easier. </p>
<img src="../static/content/multipane_view_tablet.png">
<p>In general, use the pane on the right to present more information about the item you selected in the
left pane. Make sure to keep the item in the left pane selected in order to establish the
relationship between the panels.</p>
<h2>Compound Views and Orientation Changes</h2>
<p>Screens should have the same functionality regardless of orientation. If you use a compound view in
one orientation, don't split it up when the user rotates the screen. There are several techniques
you can use to adjust the layout after orientation change while keeping functional parity intact.</p>
<div class="layout-content-row">
<div class="layout-content-col span-8">
<img src="../static/content/multipane_stretch.png">
</div>
<div class="layout-content-col span-5">
<h4>Stretch/compress</h4>
<p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-8">
<img src="../static/content/multipane_stack.png">
</div>
<div class="layout-content-col span-5">
<h4>Stack</h4>
<p>Rearrange the panels on your screen to match the orientation.</p>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-8">
<img src="../static/content/multipane_expand.png">
</div>
<div class="layout-content-col span-5">
<h4>Expand/collapse</h4>
<p>When the device rotates, collapse the left pane view to only show the most important information.
Provide an <em>expand</em> control that allows the user to bring the left pane content back to its original
width and vice versa.</p>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-8">
<img src="../static/content/multipane_show.png">
</div>
<div class="layout-content-col span-5">
<h4>Show/hide</h4>
<p>After rotating the device, show the right pane in fullscreen view. Use the Up icon in the action bar
to show the left panel and allow navigation to a different email. Hide the left panel by touching
the content in the detail panel.</p>
</div>
</div>
<h2>Checklist</h2>
<ul>
<li>
<p>Plan in advance on how your app scales to different screen sizes and screen orientations.</p>
</li>
<li>
<p>Identify the most appropriate method for the panels in your compound views to reorganize
themselves when screen orientation changes.</p>
</li>
<li>
<p>Look for opportunities to consolidate your views into multi-panel compound views.</p>
</li>
<li>
<p>Make sure that your screens provide functional parity after the screen orientation
changes.</p>
</li>
</ul>
<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>

267
docs/html/design/patterns/navigation.html Normal file
View File

@@ -0,0 +1,267 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Navigation with Back and Up
</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>Navigation with Back and Up</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>Consistent navigation is an essential component of the overall user experience. Few things frustrate
users more than basic navigation that behaves in inconsistent and unexpected ways. Android 3.0
introduced significant changes to the global navigation behavior. Thoughtfully following the
guidelines for Back and Up will make your app's navigation predictable and reliable for your users.</p>
<p>Android 2.3 and earlier relied upon the system <em>Back</em> button for supporting navigation within an
app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared:
the <em>Up</em> button, consisting of the app icon and a left-point caret.</p>
<img src="../static/content/navigation_with_back_and_up.png">
<h2>Up vs. Back</h2>
<p>The Up button is used to navigate within an application based on the hierarchical relationships
between screens. For instance, if screen A displays a list of items, and selecting an item leads to
screen B (which presents that item in more detail), then screen B should offer an Up button that
returns to screen A.</p>
<p>If a screen is the topmost one in an app (i.e. the home of the app), it should not present an Up
button.</p>
<p>The system Back key is used to navigate based on the history of screens the user has recently seen,
in reverse chronological order&mdash;in effect, the temporal relationships between screens.</p>
<p>When the previously viewed screen is also the hierarchical parent of the current screen, pressing
the Back key will have the same result as pressing an Up button -- this is a common occurrence.
However, unlike the Up button, which ensures the user remains within your app, the Back key can
return the user to the Home screen, or even to a different application.</p>
<img src="../static/content/navigation_up_vs_back_gmail.png">
<p>The Back key also supports a few behaviors not directly tied to screen-to-screen navigation:</p>
<ul>
<li>Back dismisses floating windows (dialogs, popups)</li>
<li>Back dismisses contextual action bars, and remove highlight from selected items</li>
<li>Back hides the onscreen keyboard (IME)</li>
</ul>
<h2>Navigation Within Your App</h2>
<h4>Navigating to screens with multiple entry points</h4>
<p>Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached
from multiple entry points&mdash;e.g., a settings screen which can be navigated to from any screen
in your app. In this case, the Up button should choose to return to the referring screen, behaving
identically to Back.</p>
<h4>Changing view within a screen</h4>
<p>Changing view options for a screen does not change the behavior of Up or Back: the screen is still
in the same place within the app's hierarchy, and no new navigation history is created.</p>
<p>Examples of such view changes are:</p>
<ul>
<li>Switching views using tabs and/or left-and-right swipes</li>
<li>Switching views using a dropdown (aka collapsed tabs)</li>
<li>Filtering a list</li>
<li>Sorting a list</li>
<li>Changing display characteristics (e.g. zooming)</li>
</ul>
<h4>Navigating between sibling screens</h4>
<p>When your app supports navigation from a list of items to a detail view of one of those items, it's
often desirable to support direction navigation from that item to another one which precedes or
follows it in the list. For example, in Gmail, it's easy to swipe left or right from a conversation
to view a newer or older one in the same Inbox. Just as when changing view within a screen, such
navigation does not change the behavior of Up or Back.</p>
<img src="../static/content/navigation_between_siblings_gmail.png">
<p>However, a notable exception to this occurs when browsing between "related" detail views not tied
together by the referring list&mdash;for example, when browsing in the Market between apps from
the same developer, or albums by the same artist. In these cases, following each link does create
history, causing the Back button to step through each screen of related content which has been
viewed. Up should continue to bypass these related screens and navigate to the most recently viewed
container screen.</p>
<img src="../static/content/navigation_between_siblings_market1.png">
<p>You have the ability to make the Up behavior even smarter based on your knowledge of detail
view. If we extend our Market sample from above, imagine the user has navigated from the last Book
viewed to the details for the Movie adaptation. In that case, Up can return to a container (Movies)
which the user had not previously navigated through.</p>
<img src="../static/content/navigation_between_siblings_market2.png">
<h2>Navigation From Outside Your App</h2>
<p>There are two categories of navigation from outside your app to screens deep within the app's
hierarchy:</p>
<ul>
<li>App-to-app navigation, such as via intent completion.</li>
<li>System-to-app navigation, such as via notifications and home screen widgets.</li>
</ul>
<p>Gmail provides examples of each of these. For app-to-app navigation, a "Share" intent goes directly
to the compose screen. For system-to-app navigation, both a new message notification and a home
screen widget can bypass the Inbox screen, taking the user directly to a conversation view.</p>
<h4>App-to-app navigation</h4>
<p>When navigating deep into your app's hierarchy directly from another app via an intent, Back will
return to the referring app.</p>
<p>The Up button is handled is follows:
- If the destination screen is typically reached from one particular screen within your app, Up
should navigate to that screen.
- Otherwise, Up should navigate to the topmost ("Home") screen of your app.</p>
<p>For example, after choosing to share a book being view in Market, the user navigates directly to the
Gmail's compose screen. From there, Up returns to the Inbox (which happens to be both the typical
referrer to compose, as well as the topmost screen of the app), while Back returns to Market.</p>
<img src="../static/content/navigation_from_outside_up.png">
<h4>System-to-app navigation</h4>
<p>If the your app was reached via the system mechanisms of notifications or home screen widgets, Up
behaves as described for app-to-app navigation, above.</p>
<p>For the Back key, you should make navigation more predictably by inserting into the task's back
stack the complete upward navigation path to the app's topmost screen. This way, a user who has
forgotten how they entered your app can safely navigate to the app's topmost screen before exiting
it.</p>
<p>For example, Gmail's Home screen widget has a button for diving directly to its compose screen.
After following that path, the Back key first returns to the Inbox, and from there continues to
Home.</p>
<img src="../static/content/navigation_from_outside_back.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>

224
docs/html/design/patterns/new-4-0.html Normal file
View File

@@ -0,0 +1,224 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - New in Android 4.0
</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>New in Android 4.0</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>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Navigation bar</h4>
<p>Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a
virtual navigation bar that houses the Back, Home and Recents buttons. Read the
<a href="../patterns/compatibility.html">Compatibility</a> pattern to learn how the OS adapts to
phones with hardware buttons and how pre-Android 3.0 apps that rely on menu keys are supported.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/whats_new_nav_bar.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Action bar</h4>
<p>The action bar is the most important structural element of an Android app. It provides consistent
navigation across the platform and allows your app to surface actions.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/whats_new_action_bar.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Multi-pane layouts</h4>
<p>Creating apps that scale well across different form factors and screen sizes is important in the
Android world. Multi-pane layouts allow you to combine different activities that show separately on
smaller devices into richer compound views for tablets.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/whats_new_multipanel.png">
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Selection</h4>
<p>The long press gesture which was traditionally used to show contextual actions for objects is now
used for data selection. When selecting data, contextual action bars allow you to surface actions.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/whats_new_multiselect.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>

390
docs/html/design/patterns/notifications.html Normal file
View File

@@ -0,0 +1,390 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Notifications
</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>Notifications</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>The notification system allows your app to keep the user informed about important events, such as
new messages in a chat app or a calendar event.</p>
<p>To create an app that feels streamlined, pleasant, and respectful, it is important to design your
notifications carefully. Notifications embody your app's voice, and contribute to your app's
personality. Unwanted or unimportant notifications can annoy the user, so use them judiciously.</p>
<h4>When to display a notification</h4>
<p>To create an application that people love, it's important to recognize that the user's attention and
focus is a resource that must be protected. To use an analogy that might resonate with software
developers, the user is not a method that can be invoked to return a value. The user's focus is a
resource more akin to a thread, and creating a notification momentarily blocks the user thread as
they process and then dismiss the interruptive notification.</p>
<p>Android's notification system has been designed to quickly inform users of events while they focus
on a task, but it is nonetheless still important to be conscientious when deciding to create a
notification.</p>
<p>While well behaved apps generally only speak when spoken to, there are some limited cases where an
app actually should interrupt the user with an unprompted notification.</p>
<p>Notifications should be used primarily for <strong>time sensitive events</strong>, and especially if these
synchronous events <strong>involve other people</strong>. For instance, an incoming chat is a real time and
synchronous form of communication: there is another user actively waiting on you to respond.
Calendar events are another good example of when to use a notification and grab the user's
attention, because the event is imminent, and calendar events often involve other people.</p>
<img src="../static/content/notifications_pattern_real_time_people.png">
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>When not to display a notification</h4>
<p>There are however many other cases where notifications should not be used:</p>
<ul>
<li>
<p>Don't notify the user of information that is not directed specifically at them, or information
that is not truly time sensitive. For instance the asynchronous and undirected updates flowing
through a social network do not warrant a real time interruption.</p>
</li>
<li>
<p>Don't create a notification if the relevant new information is currently on screen. Instead, use
the UI of the application itself to notify the user of new information directly in context. For
instance, a chat application should not create system notifications while the user is actively
chatting with another user.</p>
</li>
<li>
<p>Don't interrupt the user for low level technical operations, like saving or syncing information,
or updating an application, if it is possible for the system to simply take care of itself without
involving the user.</p>
</li>
<li>
<p>Don't interrupt the user to inform them of an error if it is possible for the application to
quickly recover from the error on its own without the user taking any action.</p>
</li>
<li>
<p>Don't use notifications for services that the user cannot manually start or stop.</p>
</li>
<li>
<p>Don't create superfluous notifications just to get your brand in front of users. Such
notifications will only frustrate and likely alienate your audience. The best way to provide the
user with a small amount of updated information and to keep them engaged with your application is to
develop a widget that they can choose to place on their home screen.</p>
</li>
</ul>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/notifications_pattern_social_fail.png">
</div>
</div>
<h2>Design Guidelines</h2>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<img src="../static/content/notifications_pattern_anatomy.png">
</div>
<div class="layout-content-col span-6">
<h4>Make it personal</h4>
<p>For notifications of items sent by another user (such as a message or status update), include that
person's image.</p>
<p>Remember to include the app icon as a secondary icon in the notification, so that the user can
still identify which app posted it.</p>
</div>
</div>
<h4>Navigate to the right place</h4>
<p>When the user touches a notification, be open your app to the place where the user can consume and
act upon the data referenced in the notification. In most cases this will be the detail view of a
single data item (e.g. a message), but it might also be a summary view if the notification is
stacked (see <em>Stacked notifications</em> below) and references multiple items. If in any of those cases
the user is taken to a hierarchy level below your app's top-level, insert navigation into your app's
back stack to allow them to navigate to your app's top level using the system back key. For more
information, see the chapter on <em>System-to-app navigation</em> in the
<a href="../patterns/notifications.html">Navigation</a> design pattern.</p>
<h4>Timestamps for time sensitive events</h4>
<p>By default, standard Android notifications include a timestamp in the upper right corner. Consider
whether the timestamp is valuable in the context of your notification. If the timestamp is not
valuable, consider if the event is important enough to warrant grabbing the user's attention with a
notification. If the notification is important enough, decide if you would like to opt out of
displaying the timestamp.</p>
<p>Include a timestamp if the user likely needs to know how long ago the notification occurred. Good
candidates for timestamps include communication notifications (email, messaging, chat, voicemail)
where the user may need the timestamp information to understand the context of a message or to
tailor a response.</p>
<h4>Stack your notifications</h4>
<p>If your app creates a notification while another of the same type is still pending, avoid creating
an altogether new notification object. Instead, stack the notification.</p>
<p>A stacked notification builds a summary description and allows the user to understand how many
notifications of a particular kind are pending.</p>
<p><strong>Don't</strong>:</p>
<img src="../static/content/notifications_pattern_additional_fail.png">
<p><strong>Do</strong>:</p>
<img src="../static/content/notifications_pattern_additional_win.png">
<p>If you keep the summary and detail information on different screens, a stacked notification may need
to open to a different place in the app than a single notification.</p>
<p>For example, a single email notification should always open to the content of the email, whereas a
stacked email notification opens to the Inbox view.</p>
<h4>Clean up after yourself</h4>
<p>Just like calendar events, some notifications alert the user to an event that happens at a
particular point in time. After that moment has passed, the notification is likely not important to
the user anymore, and you should consider removing it automatically. The same is true for active
chat conversations or voicemail messages the user has listened to, users should not have to manually
dismiss notifications independently from taking action on them.</p>
<div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
<h4>Provide a peek into your notification</h4>
<p>You can provide a short preview of your notification's content by providing optional ticker text.
The ticker text is shown for a short amount of time when the notification enters the system and then
hides automatically.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/notifications_pattern_phone_ticker.png">
</div>
</div>
<h4>Make notifications optional</h4>
<p>Users should always be in control of notifications. Allow the user to silence the notifications from
your app by adding a notification settings item to your application settings.</p>
<h4>Use distinct icons</h4>
<p>By glancing at the notification area, the user should be able to discern what notification types are
currently pending.</p>
<p><strong>Do</strong>:</p>
<ul>
<li>Look at the notification icons the Android apps already provide and create notification icons for
your app that are sufficiently distinct in appearance.</li>
</ul>
<p><strong>Don't</strong>:</p>
<ul>
<li>Use color to distinguish your app from others. Notification icons should generally be monochrome.</li>
</ul>
<h2>Interacting With Notifications</h2>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<img src="../static/content/notifications_pattern_phone_icons.png">
</div>
<div class="layout-content-col span-6">
<p>Notifications are indicated by icons in the notification area and can be accessed by opening the
notification drawer.</p>
<p>Inside the drawer, notifications are chronologically sorted with the latest one on top. Touching a
notification opens the associated app to detailed content matching the notification. Swiping left or
right on a notification removes it from the drawer.</p>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<p>On tablets, the notification area is integrated with the system bar at the bottom of the screen. The
notification drawer is opened by touching anywhere inside the notification area.</p>
</div>
<div class="layout-content-col span-6">
<img src="../static/content/notifications_pattern_tablet.png">
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<img src="../static/content/notifications_pattern_ongoing_music.png">
</div>
<div class="layout-content-col span-6">
<h4>Ongoing notifications</h4>
<p>Ongoing notifications keep users informed about an ongoing process in the background. For example,
music players announce the currently playing track in the notification system and continue to do so
until the user stops the playback. They can also be used to show the user feedback for longer tasks
like downloading a file, or encoding a video. Ongoing notifications cannot be manually removed from
the notification drawer.</p>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-12">
<h4>Dialogs and toasts are for feedback not notification</h4>
<p>Your app should not create a dialog or toast if it is not currently on screen. Dialogs and Toasts
should only be displayed as the immediate response to the user taking an action inside of your app.
For instance, dialogs can be used to confirm that the user understands the severity of an action,
and toasts can echo back that an action has been successfully taken.</p>
</div>
</div>
<div class="vspace size-1">&nbsp;</div>
<img src="../static/content/notifications_pattern_dialog_toast.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>

288
docs/html/design/patterns/pure-android.html Normal file
View File

@@ -0,0 +1,288 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Pure Android
</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>Pure Android</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>Most developers want to distribute their apps on multiple platforms. As you plan your app for
Android, keep in mind that different platforms play by different rules and conventions. Design
decisions that make perfect sense on one platform will look and feel misplaced in the context of a
different platform. While a "design once, ship anywhere" approach might save you time up-front, you
run the very real risk of creating inconsistent apps that alienate users. Consider the following
guidelines to avoid the most common traps and pitfalls.</p>
<div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Don't mimic UI elements from other platforms</h4>
<p>Platforms typically provide a carefully designed set of UI elements that are themed in a very
distinctive fashion. For example, some platforms advocate rounded corners for their buttons, others
use gradients in their title bars. In some cases, elements may have the same purpose, but are
designed to work a bit differently.</p>
<p>As you build your app for Android, don't carry over themed UI elements from other platforms and
don't mimic their specific behaviors. Review the <a href="../building-
blocks/index.html">Building Blocks</a> section in this styleguide to learn about Android's most important UI elements
and the way they look in the system default themes. Also examine Android's platform apps to get a
sense of how elements are applied in the context of an app. If you want to customize the theme of UI
elements, customize carefully according to your specific branding - and not according to the
conventions of a different platform.</p>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/migrating_ui_elements.png">
<div class="figure-caption">
Sampling of UI elements from Android, iOS and Windows Phone 7.
</div>
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Don't carry over platform-specific icons</h4>
<p>Platforms typically provide sets of icons for common functionality, such as sharing, creating a new
document or deleting.</p>
<p>As you are migrating your app to Android, please swap out platform-specific icons with their Android
counterparts.</p>
<p>You can find a wide variety of icons for use in your app in the Android SDK.</p>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/migrating_icons.png">
<div class="figure-caption">
Sampling of icons from Android, iOS and Windows Phone 7.
</div>
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Don't use bottom tab bars</h4>
<p>Other platforms use the bottom tab bar to switch between the app's views. Per platform convention,
Android's tabs for view control are shown in action bars at the top of the screen instead. In
addition, Android apps may use a bottom bar to display actions on a split action bar.</p>
<p>You should follow this guideline to create a consistent experience with other apps on the Android
platform and to avoid confusion between actions and view switching on Android.</p>
<p>For more information on how to properly use action bars for view control, see
<a href="../patterns/actionbar.html">Action Bars</a>.</p>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/migrating_ios_dialers.png">
<div class="figure-caption">
Android dialer with tabs in an action bar vs. bottom tabs in iOS.
</div>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Don't use labeled back buttons on action bars</h4>
<p>Other platforms use an explicit back button with label to allow the user to navigate up the
application's hierarchy. Instead, Android uses the main action bar's app icon for hierarchical
navigation and the navigation bar's back button for temporal navigation. For more information,
please review the <a href="../patterns/navigation.html">Navigation</a> pattern.</p>
<p>Follow this guideline to provide a consistent navigation experience across the platform.</p>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/migrating_ios_galleries.png">
<div class="figure-caption">
Android action bar with up caret vs. iOS labeled "Back" button.
</div>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Don't use right-pointing carets on line items</h4>
<p>A common pattern on other platforms is the display of right-pointing carets on line items that allow
the user to drill deeper into additional content.</p>
<p>Android does not use such indicators on drill-down line items. Avoid them to stay consistent with
the platform and in order to not have the user guess as to what the meaning of those carets may be.</p>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/migrating_ios_settings.png">
<div class="figure-caption">
Android settings without right-pointing carets in line items vs. iOS settings.
</div>
</div>
</div>
<h2>Device Independence</h2>
<p>Remember that your app will run on a wide variety of different screen sizes. Create visual assets
for different screen sizes and densities and make use of concepts such as multi-pane layouts to
appropriately scale your UI on different device form factors.</p>
<p>For more information, read <a href="../style/devices-displays.html">Devices and Displays</a> as
well as <a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a> in this design guide.</p>
<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>

252
docs/html/design/patterns/selection.html Normal file
View File

@@ -0,0 +1,252 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Selection
</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>Selection</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>Android 3.0 introduced the <em>long press</em> gesture&mdash;that is, a touch that's held in the same
position for a moment&mdash;as the global gesture to select data. This affects the way you should
handle multi-select and contextual actions in your apps.</p>
<div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<h4>What has changed?</h4>
<p>In previous versions of Android, the long press gesture was universally used to display contextual
actions for a given data item in a contextual menu.</p>
<p>This pattern changed with Android 3.0. The long press gesture is now used to select data, combining
contextual actions and selection management functions for selected data into a new element called
the contextual action bar (CAB).</p>
</div>
<div class="layout-content-col span-7">
<img src="../static/content/selection_context_menu.png">
<div class="figure-caption">
Traditional use of the long press gesture to show contextual menus.
</div>
</div>
</div>
<h4>Using the contextual action bar (CAB)</h4>
<p>The selection CAB is a temporary action bar that overlays your app's current action bar while data
is selected. It appears after the user long presses on a selectable data item.</p>
<img src="../static/content/selection_cab_big.png">
<div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<p>From here the user can:</p>
<ul>
<li>Select additional data items by touching them.</li>
<li>Trigger an action from the CAB that applies to all highlighted data items. The CAB then
automatically dismisses itself.</li>
<li>Dismiss the CAB via the navigation bar's Back button or the CAB's checkmark button. This removes
the CAB along with all selection highlights.</li>
</ul>
</div>
<div class="layout-content-col span-7">
<img src="../static/content/selection_cab_example.png">
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<h4>Selecting CAB actions</h4>
<p>You can decide which actions and elements appear in the CAB. Use the guidelines in the <a href="actionbar.html">Action Bar
pattern</a> to decide which items to surface at the top level and which to move to the
action overflow.</p>
<h4>Dynamically adjust CAB actions</h4>
<p>In most cases you need to adjust the actions in the CAB dynamically as the user adds more items to
the selection. Actions that apply to a single selected data item don't necessarily apply to multiple
selected data items of the same kind.</p>
</div>
<div class="layout-content-col span-7">
<img src="../static/content/selection_adjusting_actions.png">
<div class="figure-caption">
Adjusting actions in the CAB as additional items are selected.
</div>
</div>
</div>
<h2>Checklist</h2>
<ul>
<li>
<p>Whenever your app supports the selection of multiple data items, make use of the contextual action
bar (CAB).</p>
</li>
<li>
<p>Reserve the long press gesture for selection exclusively. Don't use it to display traditional
contextual menus.</p>
</li>
<li>
<p>If you don't support multi-selection within a list, long press should do nothing.</p>
</li>
<li>
<p>Plan the actions you want to display inside of a CAB in the same way you would plan the actions
inside your app's action bar.</p>
</li>
</ul>
<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>

225
docs/html/design/patterns/swipe-views.html Normal file
View File

@@ -0,0 +1,225 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Swipe Views
</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>Swipe Views</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>Efficient navigation is one of the cornerstones of a well-designed app. While apps are generally
built in a hierarchical fashion, there are instances where horizontal navigation can flatten
vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views
allow the user to efficiently move from item to item using a simple gesture and thereby make
browsing and consuming data a more fluent experience.</p>
<h2>Swiping Between Detail Views</h2>
<p>An app's data is often organized in a master/detail relationship: The user can view a list of
related data items, such as images, chats, or emails, and then pick one of the items to see the
detail contents in a separate screen.</p>
<img src="../static/content/swipe_views.png">
<div class="figure-caption">
Master (left) and detail (right) views.
</div>
<p>On a phone, since the master and detail are on separate screens, this typically requires the user to
jump back and forth between the list and the detail view, aka "pogo-sticking".</p>
<p>In cases where users will want to view multiple detail items in succession, avoid pogo-sticking by
using the swipe gesture to navigate to the next/previous detail view.</p>
<img src="../static/content/swipe_views2.png">
<div class="figure-caption">
Navigating between consecutive Email messages using the swipe gesture.
</div>
<h2>Swiping Between Tabs</h2>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<div class="framed-galaxynexus-port-span-5">
<video class="play-on-hover" autoplay>
<source src="../static/content/swipe_tabs.mp4" type="video/mp4">
<source src="../static/content/swipe_tabs.webm" type="video/webm">
<source src="../static/content/swipe_tabs.ogv" type="video/ogg">
</video>
</div>
<div class="figure-caption">
People app with swipe gesture navigation between top-level screens.
<div class="video-instructions">&nbsp;</div>
</div>
</div>
<div class="layout-content-col span-8">
<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p>
<div class="vspace size-2">&nbsp;</div>
<h2>Checklist</h2>
<ul>
<li>
<p>Use swipe to quickly navigate between detail views or tabs.</p>
</li>
<li>
<p>Transition between the views as the user performs the swipe gesture. Do not wait for the
gesture to complete and then transition between views.</p>
</li>
<li>
<p>If you used buttons in the past for previous/next navigation, replace them with
the swipe gesture.</p>
</li>
<li>
<p>Consider adding contextual information in your detail view that informs the user about the
relative list position of the currently visible item.</p>
</li>
</ul>
</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>

BIN
docs/html/design/static/callout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
docs/html/design/static/content/action_bar_basics.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
docs/html/design/static/content/action_bar_cab.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
docs/html/design/static/content/action_bar_pattern_action_icons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
docs/html/design/static/content/action_bar_pattern_considerations.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
docs/html/design/static/content/action_bar_pattern_default_tabs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
docs/html/design/static/content/action_bar_pattern_overflow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
docs/html/design/static/content/action_bar_pattern_overview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

BIN
docs/html/design/static/content/action_bar_pattern_rotation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB

BIN
docs/html/design/static/content/action_bar_pattern_share_pack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 678 KiB

BIN
docs/html/design/static/content/action_bar_pattern_spinner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/html/design/static/content/action_bar_pattern_table.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/html/design/static/content/action_bar_pattern_up_app_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
docs/html/design/static/content/app_structure_book_detail_page_flip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 131 KiB

BIN
docs/html/design/static/content/app_structure_fixedtabs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
docs/html/design/static/content/app_structure_gallery_filmstrip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

BIN
docs/html/design/static/content/app_structure_gmail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
docs/html/design/static/content/app_structure_gmail_swipe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
docs/html/design/static/content/app_structure_market.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
docs/html/design/static/content/app_structure_music_lndscp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 KiB

BIN
docs/html/design/static/content/app_structure_overview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
docs/html/design/static/content/app_structure_people_detail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
docs/html/design/static/content/app_structure_scrolltabs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
docs/html/design/static/content/app_structure_shortcut_on_item.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

BIN
docs/html/design/static/content/building_blocks_landing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 139 KiB

BIN
docs/html/design/static/content/buttons_basic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
docs/html/design/static/content/buttons_borderless.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
docs/html/design/static/content/buttons_default_small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
docs/html/design/static/content/color_spectrum.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
docs/html/design/static/content/compatibility_legacy_apps.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
docs/html/design/static/content/compatibility_physical_buttons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
docs/html/design/static/content/compatibility_virtual_nav.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

BIN
docs/html/design/static/content/creative_vision_main.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 507 KiB

BIN
docs/html/design/static/content/design_elements_landing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 265 KiB

BIN
docs/html/design/static/content/devices_displays_density.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
docs/html/design/static/content/devices_displays_main.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
docs/html/design/static/content/dialogs_examples.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
docs/html/design/static/content/dialogs_main.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
docs/html/design/static/content/dialogs_popups_example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

BIN
docs/html/design/static/content/dialogs_toasts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
docs/html/design/static/content/dialogs_w_no_title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
docs/html/design/static/content/dialogs_w_title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
docs/html/design/static/content/gesture_doubletouch.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
docs/html/design/static/content/gesture_drag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
docs/html/design/static/content/gesture_longtouch.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
docs/html/design/static/content/gesture_pinchclose.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
docs/html/design/static/content/gesture_pinchopen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/html/design/static/content/gesture_swipe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
docs/html/design/static/content/gesture_touch.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/html/design/static/content/gridview_example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 345 KiB

BIN
docs/html/design/static/content/gridview_horizontal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/html/design/static/content/gridview_overview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

BIN
docs/html/design/static/content/gridview_style.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 169 KiB

BIN
docs/html/design/static/content/gridview_vertical.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/html/design/static/content/iconography_actionbar_colors.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
docs/html/design/static/content/iconography_actionbar_focal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
docs/html/design/static/content/iconography_actionbar_size.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 541 B

BIN
docs/html/design/static/content/iconography_actionbar_style.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
docs/html/design/static/content/iconography_launcher_example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
docs/html/design/static/content/iconography_launcher_example2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
docs/html/design/static/content/iconography_launcher_focal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
docs/html/design/static/content/iconography_launcher_size.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
docs/html/design/static/content/iconography_launcher_style.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
docs/html/design/static/content/iconography_notification_example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
docs/html/design/static/content/iconography_notification_focal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
docs/html/design/static/content/iconography_notification_size.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 295 B

BIN
docs/html/design/static/content/iconography_notification_style.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
docs/html/design/static/content/iconography_overview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 236 KiB

BIN
docs/html/design/static/content/iconography_small_colors.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 320 B

BIN
docs/html/design/static/content/iconography_small_example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
docs/html/design/static/content/iconography_small_focal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

Some files were not shown because too many files have changed in this diff Show More