Merge "docs: move Android Design from static HTML to JD" into ics-mr1
This commit is contained in:
Roman Nurik
@@ -1,197 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>Buttons</h2>
|
||||
</div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>A button consists of text and/or an image that clearly communicates what action will occur when the
|
||||
user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless
|
||||
buttons</em>. Both can contain text labels and/or images.</p>
|
||||
|
||||
<div style="text-align: center">
|
||||
<img src="../static/content/buttons_basic.png">
|
||||
</div>
|
||||
|
||||
<h2 id="basic">Basic Buttons</h2>
|
||||
|
||||
<p>Basic buttons are traditional buttons with borders and background. Android supports two styles for
|
||||
basic buttons: default and small. Default buttons have slightly larger font size and are optimized
|
||||
for display outside of form content. Small buttons are intended for display alongside other content.
|
||||
They have a smaller font and smaller minimum height. Use small buttons in forms where they need to
|
||||
align with other UI elements.</p>
|
||||
|
||||
<img src="../static/content/buttons_default_small.png">
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-6">
|
||||
<div class="figure-caption">
|
||||
Default buttons in Holo Dark & Light.
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-content-col span-6">
|
||||
<div class="figure-caption">
|
||||
Small buttons in Holo Dark & Light.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="borderless">Borderless Buttons</h2>
|
||||
|
||||
<p>Borderless buttons resemble basic buttons except that they have no borders or background. You can
|
||||
use borderless buttons with both icons and text. Borderless buttons are visually more lightweight
|
||||
than basic buttons and integrate nicely with other content.</p>
|
||||
|
||||
<img src="../static/content/buttons_borderless.png">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="layout-content-row content-footer">
|
||||
<div class="paging-links layout-content-col span-9"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
40
docs/html/design/building-blocks/buttons.jd
Normal file
40
docs/html/design/building-blocks/buttons.jd
Normal file
@@ -0,0 +1,40 @@
|
||||
page.title=Buttons
|
||||
@jd:body
|
||||
|
||||
<p>A button consists of text and/or an image that clearly communicates what action will occur when the
|
||||
user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless
|
||||
buttons</em>. Both can contain text labels and/or images.</p>
|
||||
|
||||
<div style="text-align: center">
|
||||
<img src="{@docRoot}design/media/buttons_basic.png">
|
||||
</div>
|
||||
|
||||
<h2 id="basic">Basic Buttons</h2>
|
||||
|
||||
<p>Basic buttons are traditional buttons with borders and background. Android supports two styles for
|
||||
basic buttons: default and small. Default buttons have slightly larger font size and are optimized
|
||||
for display outside of form content. Small buttons are intended for display alongside other content.
|
||||
They have a smaller font and smaller minimum height. Use small buttons in forms where they need to
|
||||
align with other UI elements.</p>
|
||||
|
||||
<img src="{@docRoot}design/media/buttons_default_small.png">
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-6">
|
||||
<div class="figure-caption">
|
||||
Default buttons in Holo Dark & Light.
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-content-col span-6">
|
||||
<div class="figure-caption">
|
||||
Small buttons in Holo Dark & Light.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="borderless">Borderless Buttons</h2>
|
||||
|
||||
<p>Borderless buttons resemble basic buttons except that they have no borders or background. You can
|
||||
use borderless buttons with both icons and text. Borderless buttons are visually more lightweight
|
||||
than basic buttons and integrate nicely with other content.</p>
|
||||
|
||||
<img src="{@docRoot}design/media/buttons_borderless.png">
|
||||
@@ -1,269 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>Dialogs</h2>
|
||||
</div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<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"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
112
docs/html/design/building-blocks/dialogs.jd
Normal file
112
docs/html/design/building-blocks/dialogs.jd
Normal file
@@ -0,0 +1,112 @@
|
||||
page.title=Dialogs
|
||||
@jd:body
|
||||
|
||||
<p>Dialogs prompt the user for decisions or additional information required by the app to continue a
|
||||
task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the
|
||||
user to adjust settings or enter text.</p>
|
||||
|
||||
<img src="{@docRoot}design/media/dialogs_main.png">
|
||||
|
||||
<div class="with-callouts">
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<h4>Optional title region</h4>
|
||||
<p>The title introduces the content of your dialog. It can, for example, identify the name of a
|
||||
setting that the user is about to change, or request a decision.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4>Content area</h4>
|
||||
<p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as
|
||||
sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system
|
||||
settings. In other cases, such as alerts, the content may consist solely of text that provides
|
||||
further context for a user decision.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4>Action buttons</h4>
|
||||
<p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely
|
||||
action. However, if the options consist of specific actions such as Close or Wait rather than
|
||||
a confirmation or cancellation of the action described in the content, then all the buttons
|
||||
should be active verbs. 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="{@docRoot}design/media/dialogs_examples.png">
|
||||
<div class="figure-caption">
|
||||
Samples of typical dialog use in Android.
|
||||
</div>
|
||||
|
||||
<h2 id="alerts">Alerts</h2>
|
||||
|
||||
<p>Alerts inform the user about a situation that requires their confirmation or acknowledgement before
|
||||
proceeding. They differ slightly in appearance based upon the severity and impact of the message
|
||||
conveyed.</p>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-8">
|
||||
|
||||
<img src="{@docRoot}design/media/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="{@docRoot}design/media/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="{@docRoot}design/media/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="{@docRoot}design/media/dialogs_toasts.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,237 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>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"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
79
docs/html/design/building-blocks/grid-lists.jd
Normal file
79
docs/html/design/building-blocks/grid-lists.jd
Normal file
@@ -0,0 +1,79 @@
|
||||
page.title=Grid Lists
|
||||
@jd:body
|
||||
|
||||
<img src="{@docRoot}design/media/gridview_overview.png">
|
||||
|
||||
<p>Grid lists are an alternative to standard list views. They are best suited for showing data sets
|
||||
that represent themselves through images. In contrast to simple lists, grid lists may scroll either
|
||||
vertically or horizontally.</p>
|
||||
|
||||
|
||||
|
||||
<h2 id="generic_grid">Generic Grids</h2>
|
||||
|
||||
|
||||
<p>The items in a grid list are arranged in two dimensions, one of which is fixed when scrolling
|
||||
content. The scrolling direction dictates the ordering of the items within the grid list. Since the
|
||||
scrolling direction is not deterministic, make it easy for the user to determine the orientation by
|
||||
cutting off grid items to communicate where the overflow is located.</p>
|
||||
<p>Avoid creating grid lists that scroll in two dimensions.</p>
|
||||
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-7">
|
||||
|
||||
<img src="{@docRoot}design/media/gridview_vertical.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-6">
|
||||
|
||||
<h4>Vertical scrolling</h4>
|
||||
<p>Vertically scrolling grid list items are sorted in traditional western reading direction:
|
||||
left-to-right and top-down. When displaying the list, cut off the items in the bottom row to
|
||||
communicate that the user can scroll the list down to show additional items. Be sure to retain this
|
||||
scheme when the user rotates the screen.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-7">
|
||||
|
||||
<img src="{@docRoot}design/media/gridview_horizontal.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-6">
|
||||
|
||||
<h4>Horizontal scrolling</h4>
|
||||
<p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically
|
||||
scrolling lists, the sorting changes slightly to a top-down and left-to-right arrangement. Employ
|
||||
the same technique of cutting off the items in the rightmost column to indicate the scrolling
|
||||
direction.</p>
|
||||
<p>Don't use scrolling tabs as a means to switch views in conjunction with horizontally scrolling grid
|
||||
lists, because the horizontal gesture for view and content navigation will conflict. If you show
|
||||
scrolling tabs for view navigation together with a grid list, use vertical grid scrolling for list
|
||||
navigation.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 id="with-labels">Grid List with Labels</h2>
|
||||
|
||||
<p>Use labels to display additional contextual information for your grid list items.</p>
|
||||
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-7">
|
||||
|
||||
<img src="{@docRoot}design/media/gridview_style.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-6">
|
||||
|
||||
<h4>Style</h4>
|
||||
<p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to
|
||||
control the contrast and ensures legibility of the labels while letting the content "shine through".</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,175 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header just-links">
|
||||
<div class="layout-content-col span-9"> </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/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
29
docs/html/design/building-blocks/index.jd
Normal file
29
docs/html/design/building-blocks/index.jd
Normal file
@@ -0,0 +1,29 @@
|
||||
page.title=Building Blocks
|
||||
header.justLinks=1
|
||||
footer.hide=1
|
||||
@jd:body
|
||||
|
||||
<style>
|
||||
#landing-graphic-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#text-overlay {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 472px;
|
||||
width: 450px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="landing-graphic-container">
|
||||
<div id="text-overlay">
|
||||
Your inventory of ready-to-use elements for creating outstanding apps.
|
||||
<br><br>
|
||||
<a href="{@docRoot}design/building-blocks/tabs.html" class="landing-page-link">Tabs</a>
|
||||
</div>
|
||||
|
||||
<a href="{@docRoot}design/building-blocks/tabs.html">
|
||||
<img src="{@docRoot}design/media/building_blocks_landing.png">
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,188 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>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"> </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"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
31
docs/html/design/building-blocks/lists.jd
Normal file
31
docs/html/design/building-blocks/lists.jd
Normal file
@@ -0,0 +1,31 @@
|
||||
page.title=Lists
|
||||
@jd:body
|
||||
|
||||
<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"> </div>
|
||||
|
||||
<div class="layout-content-row clearfix">
|
||||
<div class="layout-content-col span-9">
|
||||
|
||||
<img src="{@docRoot}design/media/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>
|
||||
@@ -1,191 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>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"> </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 id="date-time">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"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
32
docs/html/design/building-blocks/pickers.jd
Normal file
32
docs/html/design/building-blocks/pickers.jd
Normal file
@@ -0,0 +1,32 @@
|
||||
page.title=Pickers
|
||||
@jd:body
|
||||
|
||||
<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"> </div>
|
||||
<div class="layout-content-col span-6">
|
||||
|
||||
<img src="{@docRoot}design/media/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 id="date-time">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="{@docRoot}design/media/picker_datetime.png">
|
||||
@@ -1,238 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2 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 id="progress">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"> </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 Google Play 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"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
80
docs/html/design/building-blocks/progress.jd
Normal file
80
docs/html/design/building-blocks/progress.jd
Normal file
@@ -0,0 +1,80 @@
|
||||
page.title=Progress and Activity
|
||||
header.title=Feedback
|
||||
@jd:body
|
||||
|
||||
<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 id="progress">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="{@docRoot}design/media/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"> </div>
|
||||
|
||||
<img src="{@docRoot}design/media/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="{@docRoot}design/media/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 Google Play 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="{@docRoot}design/media/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>
|
||||
@@ -1,194 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>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 id="indicator">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"> </div>
|
||||
</div>
|
||||
|
||||
<h2 id="index-scrolling">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"> </div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="layout-content-row content-footer">
|
||||
<div class="paging-links layout-content-col span-9"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
37
docs/html/design/building-blocks/scrolling.jd
Normal file
37
docs/html/design/building-blocks/scrolling.jd
Normal file
@@ -0,0 +1,37 @@
|
||||
page.title=Scrolling
|
||||
@jd:body
|
||||
|
||||
<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 id="indicator">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="{@docRoot}design/media/scroll_indicator.mp4" type="video/mp4">
|
||||
<source src="{@docRoot}design/media/scroll_indicator.webm" type="video/webm">
|
||||
<source src="{@docRoot}design/media/scroll_indicator.ogv" type="video/ogg">
|
||||
</video>
|
||||
</div>
|
||||
<div class="figure-caption">
|
||||
<div class="video-instructions"> </div>
|
||||
</div>
|
||||
|
||||
<h2 id="index-scrolling">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="{@docRoot}design/media/scroll_index.mp4" type="video/mp4">
|
||||
<source src="{@docRoot}design/media/scroll_index.webm" type="video/webm">
|
||||
<source src="{@docRoot}design/media/scroll_index.ogv" type="video/ogg">
|
||||
</video>
|
||||
</div>
|
||||
<div class="figure-caption">
|
||||
<div class="video-instructions"> </div>
|
||||
</div>
|
||||
@@ -1,194 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>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"> </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 & Dark
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4"> </div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="layout-content-row content-footer">
|
||||
<div class="paging-links layout-content-col span-9"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
36
docs/html/design/building-blocks/seek-bars.jd
Normal file
36
docs/html/design/building-blocks/seek-bars.jd
Normal file
@@ -0,0 +1,36 @@
|
||||
page.title=Seek Bars and Sliders
|
||||
@jd:body
|
||||
|
||||
<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="{@docRoot}design/media/seekbar_example.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/seekbar_style.png">
|
||||
<div class="figure-caption">
|
||||
Seek bars in Holo Light & Dark
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4"> </div>
|
||||
</div>
|
||||
@@ -1,194 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>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"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
37
docs/html/design/building-blocks/spinners.jd
Normal file
37
docs/html/design/building-blocks/spinners.jd
Normal file
@@ -0,0 +1,37 @@
|
||||
page.title=Spinners
|
||||
@jd:body
|
||||
|
||||
<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="{@docRoot}design/media/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="{@docRoot}design/media/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="{@docRoot}design/media/spinners_hololightanddark.png">
|
||||
<div class="figure-caption">
|
||||
Spinners in the Holo Dark and Holo Light themes, in various states.
|
||||
</div>
|
||||
@@ -1,188 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>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 id="checkboxes">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 id="radio-buttons">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 id="switches">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"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
31
docs/html/design/building-blocks/switches.jd
Normal file
31
docs/html/design/building-blocks/switches.jd
Normal file
@@ -0,0 +1,31 @@
|
||||
page.title=Switches
|
||||
@jd:body
|
||||
|
||||
<p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio
|
||||
buttons, and on/off switches.</p>
|
||||
<h2 id="checkboxes">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="{@docRoot}design/media/switches_checkboxes.png">
|
||||
</div>
|
||||
|
||||
<h2 id="radio-buttons">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="{@docRoot}design/media/switches_radios.png">
|
||||
</div>
|
||||
|
||||
<h2 id="switches">On/off Switches</h2>
|
||||
|
||||
<p>On/off switches toggle the state of a single settings option.</p>
|
||||
|
||||
<div style="text-align: center">
|
||||
<img src="{@docRoot}design/media/switches_switches.png">
|
||||
</div>
|
||||
@@ -1,217 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>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 on Google Play.
|
||||
<div class="video-instructions"> </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 & 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"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
59
docs/html/design/building-blocks/tabs.jd
Normal file
59
docs/html/design/building-blocks/tabs.jd
Normal file
@@ -0,0 +1,59 @@
|
||||
page.title=Tabs
|
||||
@jd:body
|
||||
|
||||
<img src="{@docRoot}design/media/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="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4">
|
||||
<source src="{@docRoot}design/media/tabs_scrolly.webm" type="video/webm">
|
||||
<source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg">
|
||||
</video>
|
||||
<div class="figure-caption">
|
||||
Scrolling tabs in Google Play.
|
||||
<div class="video-instructions"> </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="{@docRoot}design/media/tabs_standard.png">
|
||||
<div class="figure-caption">
|
||||
Tabs in Holo Dark & Light.
|
||||
</div>
|
||||
|
||||
<img src="{@docRoot}design/media/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="{@docRoot}design/media/tabs_stacked.png">
|
||||
@@ -1,227 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>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 id="text-selection">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"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
70
docs/html/design/building-blocks/text-fields.jd
Normal file
70
docs/html/design/building-blocks/text-fields.jd
Normal file
@@ -0,0 +1,70 @@
|
||||
page.title=Text Fields
|
||||
@jd:body
|
||||
|
||||
<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="{@docRoot}design/media/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="{@docRoot}design/media/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 id="text-selection">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="{@docRoot}design/media/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>
|
||||
69
docs/html/design/design_toc.cs
Normal file
69
docs/html/design/design_toc.cs
Normal file
@@ -0,0 +1,69 @@
|
||||
<ul id="nav">
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header"><a href="<?cs var:toroot ?>design/index.html">Get Started</a></div>
|
||||
<ul>
|
||||
<li><a href="<?cs var:toroot ?>design/get-started/creative-vision.html">Creative Vision</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/get-started/principles.html">Design Principles</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/get-started/ui-overview.html">UI Overview</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header"><a href="<?cs var:toroot ?>design/style/index.html">Style</a></div>
|
||||
<ul>
|
||||
<li><a href="<?cs var:toroot ?>design/style/devices-displays.html">Devices and Displays</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/style/themes.html">Themes</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/style/touch-feedback.html">Touch Feedback</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/style/metrics-grids.html">Metrics and Grids</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/style/typography.html">Typography</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/style/color.html">Color</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/style/iconography.html">Iconography</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/style/writing.html">Writing Style</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header"><a href="<?cs var:toroot ?>design/patterns/index.html">Patterns</a></div>
|
||||
<ul>
|
||||
<li><a href="<?cs var:toroot ?>design/patterns/new-4-0.html">New in Android 4.0</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/patterns/gestures.html">Gestures</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/patterns/app-structure.html">App Structure</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/patterns/navigation.html">Navigation</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/patterns/actionbar.html">Action Bar</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/patterns/compatibility.html">Compatibility</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/patterns/pure-android.html">Pure Android</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header"><a href="<?cs var:toroot ?>design/building-blocks/index.html">Building Blocks</a></div>
|
||||
<ul>
|
||||
<li><a href="<?cs var:toroot ?>design/building-blocks/tabs.html">Tabs</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/building-blocks/lists.html">Lists</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/building-blocks/grid-lists.html">Grid Lists</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/building-blocks/scrolling.html">Scrolling</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/building-blocks/spinners.html">Spinners</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/building-blocks/buttons.html">Buttons</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/building-blocks/text-fields.html">Text Fields</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/building-blocks/seek-bars.html">Seek Bars</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/building-blocks/progress.html">Progress & Activity</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="<?cs var:toroot ?>design/building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="<?cs var:toroot ?>index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
@@ -1,278 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>
|
||||
|
||||
Android Design - Downloads
|
||||
</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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>Downloads</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-9">
|
||||
|
||||
<p>Want everything? We've bundled all the downloads available on Android Design into a single ZIP file.
|
||||
You can also download individual files listed below.</p>
|
||||
<p>You may use these materials without restriction in your apps and to develop your apps.</p>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<p>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Downloads_20120229.zip">Download All</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="stencils">Stencils and Sources</h2>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-5">
|
||||
|
||||
<p>Drag and drop your way to beautifully designed Ice Cream Sandwich apps. The stencils feature the
|
||||
rich typography, colors, interactive controls, and icons found throughout Android 4.0, along with
|
||||
phone and tablet outlines to frame your creations. Source files for icons and controls are also
|
||||
available.</p>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<img src="../static/content/downloads_stencils.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<p>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Fireworks_Stencil_20120229.png">Adobe® Fireworks® PNG Stencil</a>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_OmniGraffle_Stencil_20120229.graffle">Omni® OmniGraffle® Stencil</a>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120229.zip">Adobe® Photoshop® Sources</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-5">
|
||||
|
||||
<p>Action bar icons are graphic buttons that represent the most important actions people can take
|
||||
within your app. <a href="../style/iconography.html">More on Action Bar Iconography</a></p>
|
||||
<p>The download package includes icons that are scaled for various screen densities and suitable for
|
||||
use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can
|
||||
modify to match your theme, plus source files.</p>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<img src="../static/content/iconography_actionbar_style.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<p>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Action Bar Icon Pack</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="style">Style</h2>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-5">
|
||||
|
||||
<h4>Roboto</h4>
|
||||
<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the
|
||||
requirements of UI and high-resolution screens.</p>
|
||||
<p><a href="../style/typography.html#actionbar">More on Roboto</a></p>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<img src="../static/content/downloads_roboto_specimen_preview.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<p>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Roboto</a>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-5">
|
||||
|
||||
<h4>Color</h4>
|
||||
<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker
|
||||
shade that can be used as a complement when needed.</p>
|
||||
<p><a href="../style/color.html">More on Color</a></p>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<img src="../static/content/downloads_color_swatches.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<p>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="layout-content-row content-footer">
|
||||
<div class="paging-links layout-content-col span-9"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
121
docs/html/design/downloads/index.jd
Normal file
121
docs/html/design/downloads/index.jd
Normal file
@@ -0,0 +1,121 @@
|
||||
page.title=Downloads
|
||||
@jd:body
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-9">
|
||||
|
||||
<p>Want everything? We've bundled all the downloads available on Android Design into a single ZIP file.
|
||||
You can also download individual files listed below.</p>
|
||||
<p>You may use these materials without restriction in your apps and to develop your apps.</p>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<p>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Downloads_20120229.zip">Download All</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="stencils">Stencils and Sources</h2>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-5">
|
||||
|
||||
<p>Drag and drop your way to beautifully designed Ice Cream Sandwich apps. The stencils feature the
|
||||
rich typography, colors, interactive controls, and icons found throughout Android 4.0, along with
|
||||
phone and tablet outlines to frame your creations. Source files for icons and controls are also
|
||||
available.</p>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<img src="{@docRoot}design/media/downloads_stencils.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<p>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Fireworks_Stencil_20120229.png">Adobe® Fireworks® PNG Stencil</a>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_OmniGraffle_Stencil_20120229.graffle">Omni® OmniGraffle® Stencil</a>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120229.zip">Adobe® Photoshop® Sources</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-5">
|
||||
|
||||
<p>Action bar icons are graphic buttons that represent the most important actions people can take
|
||||
within your app. <a href="{@docRoot}design/style/iconography.html">More on Action Bar Iconography</a></p>
|
||||
<p>The download package includes icons that are scaled for various screen densities and suitable for
|
||||
use with the Holo Light and Holo Dark themes. The package also includes unstyled icons that you can
|
||||
modify to match your theme, plus source files.</p>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<img src="{@docRoot}design/media/iconography_actionbar_style.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<p>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Action Bar Icon Pack</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="style">Style</h2>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-5">
|
||||
|
||||
<h4>Roboto</h4>
|
||||
<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the
|
||||
requirements of UI and high-resolution screens.</p>
|
||||
<p><a href="{@docRoot}design/style/typography.html#actionbar">More on Roboto</a></p>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<p>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Roboto</a>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-5">
|
||||
|
||||
<h4>Color</h4>
|
||||
<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker
|
||||
shade that can be used as a complement when needed.</p>
|
||||
<p><a href="{@docRoot}design/style/color.html">More on Color</a></p>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<img src="{@docRoot}design/media/downloads_color_swatches.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<p>
|
||||
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Color Swatches</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,205 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>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"> </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"> </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"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
48
docs/html/design/get-started/creative-vision.jd
Normal file
48
docs/html/design/get-started/creative-vision.jd
Normal file
@@ -0,0 +1,48 @@
|
||||
page.title=Creative Vision
|
||||
@jd:body
|
||||
|
||||
<img src="{@docRoot}design/media/creative_vision_main.png">
|
||||
|
||||
<div class="vspace size-1"> </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"> </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>
|
||||
@@ -1,457 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>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 id="enchant-me">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"> </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"> </div>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-7">
|
||||
|
||||
<h4>Let me make it mine</h4>
|
||||
<p>People love to add personal touches because it helps them feel at home and in control. Provide
|
||||
sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder
|
||||
primary tasks.</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"> </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 id="simplify-my-life">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"> </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"> </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"> </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"> </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"> </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"> </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"> </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 id="make-me-amazing">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"> </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"> </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"> </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"> </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"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
300
docs/html/design/get-started/principles.jd
Normal file
300
docs/html/design/get-started/principles.jd
Normal file
@@ -0,0 +1,300 @@
|
||||
page.title=Design Principles
|
||||
@jd:body
|
||||
|
||||
<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 id="enchant-me">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="{@docRoot}design/media/principles_delight.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_real_objects.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </div>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-7">
|
||||
|
||||
<h4>Let me make it mine</h4>
|
||||
<p>People love to add personal touches because it helps them feel at home and in control. Provide
|
||||
sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder
|
||||
primary tasks.</p>
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-6">
|
||||
|
||||
<img src="{@docRoot}design/media/principles_make_it_mine.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_get_to_know_me.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="simplify-my-life">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="{@docRoot}design/media/principles_keep_it_brief.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_pictures.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_decide_for_me.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_information_when_need_it.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_navigation.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_never_lose_stuff.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_looks_same.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_important_interruption.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="make-me-amazing">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="{@docRoot}design/media/principles_tricks.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_error.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_sprinkle_encouragement.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_heavy_lifting.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vspace size-2"> </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="{@docRoot}design/media/principles_make_important_fast.png">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,306 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
<div class="layout-content-row content-header">
|
||||
<div class="layout-content-col span-9">
|
||||
<h2>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 id="home-all-apps-recents">Home, All Apps, and Recents</h2>
|
||||
|
||||
<div class="vspace size-1"> </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 id="system-bars">System Bars</h2>
|
||||
|
||||
<p>The system bars are screen areas dedicated to the display of notifications, communication of device
|
||||
status, and device navigation. Typically the system bars are displayed concurrently with your app.
|
||||
Apps that display immersive content, such as movies or images, can temporarily hide the system 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>Combined Bar</h4>
|
||||
<p>On tablet form factors the status and navigation bars are combined into a single bar at the
|
||||
bottom of the screen.</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="notifications">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"> </div>
|
||||
<div class="paging-links layout-content-col span-4">
|
||||
<a href="#" class="prev-page-link">Previous</a>
|
||||
<a href="#" class="next-page-link">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
|
||||
<p id="copyright">
|
||||
Except as noted, this content is licensed under
|
||||
<a href="http://creativecommons.org/licenses/by/2.5/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '../';
|
||||
</script>
|
||||
<script src="../static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
149
docs/html/design/get-started/ui-overview.jd
Normal file
149
docs/html/design/get-started/ui-overview.jd
Normal file
@@ -0,0 +1,149 @@
|
||||
page.title=UI Overview
|
||||
@jd:body
|
||||
|
||||
<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 id="home-all-apps-recents">Home, All Apps, and Recents</h2>
|
||||
|
||||
<div class="vspace size-1"> </div>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<img src="{@docRoot}design/media/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="{@docRoot}design/media/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="{@docRoot}design/media/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 id="system-bars">System Bars</h2>
|
||||
|
||||
<p>The system bars are screen areas dedicated to the display of notifications, communication of device
|
||||
status, and device navigation. Typically the system bars are displayed concurrently with your app.
|
||||
Apps that display immersive content, such as movies or images, can temporarily hide the system bars
|
||||
to allow the user to enjoy full screen content without distraction.</p>
|
||||
|
||||
<img src="{@docRoot}design/media/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>Combined Bar</h4>
|
||||
<p>On tablet form factors the status and navigation bars are combined into a single bar at the
|
||||
bottom of the screen.</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="notifications">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="{@docRoot}design/patterns/notifications.html">More on Notifications</a></p>
|
||||
|
||||
<div class="layout-content-row">
|
||||
<div class="layout-content-col span-4">
|
||||
|
||||
<img src="{@docRoot}design/media/ui_overview_notifications.png">
|
||||
|
||||
</div>
|
||||
<div class="layout-content-col span-9">
|
||||
|
||||
<img src="{@docRoot}design/media/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="{@docRoot}design/media/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="{@docRoot}design/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>
|
||||
@@ -1,168 +0,0 @@
|
||||
<!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 & Activity</a></li>
|
||||
<li><a href="building-blocks/switches.html">Switches</a></li>
|
||||
<li><a href="building-blocks/dialogs.html">Dialogs</a></li>
|
||||
<li><a href="building-blocks/pickers.html">Pickers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="downloads/index.html">Downloads</a></div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div id="back-dac-section"><a href="../index.html">Developers</a></div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="content">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div 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/">
|
||||
Creative Commons Attribution 2.5</a>.<br>
|
||||
For details and restrictions, see the
|
||||
<a href="http://developer.android.com/license.html">Content License</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
||||
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
||||
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="static/jquery-1.6.2.min.js"></script>
|
||||
<script>
|
||||
var SITE_ROOT = '';
|
||||
</script>
|
||||
<script src="static/default.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var pageTracker = _gat._getTracker("UA-5831155-1");
|
||||
pageTracker._trackPageview();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
29
docs/html/design/index.jd
Normal file
29
docs/html/design/index.jd
Normal file
@@ -0,0 +1,29 @@
|
||||
page.title=
|
||||
header.hide=1
|
||||
footer.hide=1
|
||||
@jd:body
|
||||
|
||||
<style>
|
||||
#landing-graphic-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#text-overlay {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 472px;
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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="{@docRoot}design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
|
||||
</div>
|
||||
|
||||
<a href="{@docRoot}design/get-started/creative-vision.html">
|
||||
<img src="{@docRoot}design/media/index_landing_page.png">
|
||||
</a>
|
||||
</div>
|
||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 194 KiB After Width: | Height: | Size: 194 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 158 KiB After Width: | Height: | Size: 158 KiB |
|
Before Width: | Height: | Size: 678 KiB After Width: | Height: | Size: 678 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.0 KiB |
|
Before Width: | Height: | Size: 131 KiB After Width: | Height: | Size: 131 KiB |
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 196 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 160 KiB |
|
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 163 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 202 KiB After Width: | Height: | Size: 202 KiB |
|
Before Width: | Height: | Size: 139 KiB After Width: | Height: | Size: 139 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 133 KiB After Width: | Height: | Size: 133 KiB |
|
Before Width: | Height: | Size: 507 KiB After Width: | Height: | Size: 507 KiB |
|
Before Width: | Height: | Size: 265 KiB After Width: | Height: | Size: 265 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 133 KiB After Width: | Height: | Size: 133 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 345 KiB After Width: | Height: | Size: 345 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 258 KiB After Width: | Height: | Size: 258 KiB |
|
Before Width: | Height: | Size: 169 KiB After Width: | Height: | Size: 169 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 541 B After Width: | Height: | Size: 541 B |
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 181 KiB After Width: | Height: | Size: 181 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user