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

am a53b3bfa: docs: Android Design downloads section, linkable H2s.

Browse Source 
* commit 'a53b3bfaadd14aa325c6d6dc2542d7cbea66fc85':
  docs: Android Design downloads section, linkable H2s.
This commit is contained in:
Roman Nurik
2012-02-29 12:42:39 -08:00
committed by Android Git Automerger
parent 40226da7ae a53b3bfaad
commit c47369d7c5
49 changed files with 588 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/html/design/building-blocks/buttons.html
View File

@@ -80,6 +80,10 @@ Android Design - Buttons
</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>
@@ -110,7 +114,8 @@ buttons</em>. Both can contain text labels and/or images.</p>
<img src="../static/content/buttons_basic.png">
</div>
<h2>Basic Buttons</h2>
<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.
@@ -131,7 +136,8 @@ align with other UI elements.</p>
</div>
</div>
<h2>Borderless Buttons</h2>
<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>

4
docs/html/design/building-blocks/dialogs.html
View File

@@ -80,6 +80,10 @@ Android Design - Dialogs
</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>

6
docs/html/design/building-blocks/grid-lists.html
View File

@@ -80,6 +80,10 @@ Android Design - Grid Lists
</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>
@@ -159,7 +163,7 @@ navigation.</p>
</div>
<h2 id="with_labels">Grid List with Labels</h2>
<h2 id="with-labels">Grid List with Labels</h2>
<p>Use labels to display additional contextual information for your grid list items.</p>

4
docs/html/design/building-blocks/index.html
View File

@@ -93,6 +93,10 @@ Android Design - Building Blocks
</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>

4
docs/html/design/building-blocks/lists.html
View File

@@ -80,6 +80,10 @@ Android Design - Lists
</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>

6
docs/html/design/building-blocks/pickers.html
View File

@@ -80,6 +80,10 @@ Android Design - Pickers
</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>
@@ -123,7 +127,7 @@ spinners.</p>
</div>
</div>
<h2>Date and time pickers</h2>
<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

7
docs/html/design/building-blocks/progress.html
View File

@@ -80,6 +80,10 @@ Android Design - Progress and Activity
</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>
@@ -105,7 +109,8 @@ Android Design - Progress and Activity
<p>When an operation of interest to the user is taking place over a relatively long period of time,
provide visual feedback that it's still happening and in the process of being completed.</p>
<h2>Progress</h2>
<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>

10
docs/html/design/building-blocks/scrolling.html
View File

@@ -80,6 +80,10 @@ Android Design - Scrolling
</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>
@@ -104,7 +108,8 @@ Android Design - Scrolling
<p>Scrolling allows the user to navigate to content in the overflow using a swipe gesture. The
scrolling speed is proportional to the speed of the gesture.</p>
<h2>Scroll Indicator</h2>
<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">
@@ -118,7 +123,8 @@ scrolling speed is proportional to the speed of the gesture.</p>
<div class="video-instructions">&nbsp;</div>
</div>
<h2>Index Scrolling</h2>
<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

4
docs/html/design/building-blocks/seek-bars.html
View File

@@ -80,6 +80,10 @@ Android Design - Seek Bars and Sliders
</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>

4
docs/html/design/building-blocks/spinners.html
View File

@@ -80,6 +80,10 @@ Android Design - Spinners
</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>

13
docs/html/design/building-blocks/switches.html
View File

@@ -80,6 +80,10 @@ Android Design - Switches
</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>
@@ -104,7 +108,8 @@ Android Design - Switches
<p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio
buttons, and on/off switches.</p>
<h2>Checkboxes</h2>
<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>
@@ -112,7 +117,8 @@ turn an option off or on. Instead, use an on/off switch.</p>
<img src="../static/content/switches_checkboxes.png">
</div>
<h2>Radio Buttons</h2>
<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>
@@ -121,7 +127,8 @@ consider a spinner, which uses less space.</p>
<img src="../static/content/switches_radios.png">
</div>
<h2>On/off Switches</h2>
<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">

4
docs/html/design/building-blocks/tabs.html
View File

@@ -80,6 +80,10 @@ Android Design - Tabs
</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>

6
docs/html/design/building-blocks/text-fields.html
View File

@@ -80,6 +80,10 @@ Android Design - Text Fields
</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>
@@ -141,7 +145,7 @@ can enter information more accurately and efficiently.</p>
</div>
</div>
<h2>Text Selection</h2>
<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.

278
docs/html/design/downloads/index.html Normal file
View File

@@ -0,0 +1,278 @@
<!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 &amp; Activity</a></li>
<li><a href="../building-blocks/switches.html">Switches</a></li>
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
</li>
<li>
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
</li>
</ul>
<div id="content">
<div class="layout-content-row content-header">
<div class="layout-content-col span-9">
<h2>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&reg; Fireworks&reg; PNG Stencil</a>
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_OmniGraffle_Stencil_20120229.graffle">Omni&reg; OmniGraffle&reg; Stencil</a>
<a class="download-button" href="https://dl-ssl.google.com/android/design/Android_Design_Holo_Widgets_20120229.zip">Adobe&reg; Photoshop&reg; 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">&nbsp;</div>
<div class="paging-links layout-content-col span-4">
<a href="#" class="prev-page-link">Previous</a>
<a href="#" class="next-page-link">Next</a>
</div>
</div>
</div>
</div>
<div id="page-footer">
<p id="copyright">
Except as noted, this content is licensed under
<a href="http://creativecommons.org/licenses/by/2.5/">
Creative Commons Attribution 2.5</a>.<br>
For details and restrictions, see the
<a href="http://developer.android.com/license.html">Content License</a>.
</p>
<p>
<a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
<a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
</p>
</div>
</div>
<script src="../static/jquery-1.6.2.min.js"></script>
<script>
var SITE_ROOT = '../';
</script>
<script src="../static/default.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5831155-1");
pageTracker._trackPageview();
</script>
</body>
</html>

4
docs/html/design/get-started/creative-vision.html
View File

@@ -80,6 +80,10 @@ Android Design - Creative Vision
</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>

10
docs/html/design/get-started/principles.html
View File

@@ -80,6 +80,10 @@ Android Design - Design Principles
</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>
@@ -106,7 +110,7 @@ Android Design - Design Principles
best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate
with purpose.</p>
<h2>Enchant Me</h2>
<h2 id="enchant-me">Enchant Me</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
@@ -176,7 +180,7 @@ over, place previous choices within easy reach.</p>
</div>
</div>
<h2>Simplify My Life</h2>
<h2 id="simplify-my-life">Simplify My Life</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">
@@ -312,7 +316,7 @@ focused, and unless it's critical and time-sensitive, an interruption can be tax
</div>
</div>
<h2>Make Me Amazing</h2>
<h2 id="make-me-amazing">Make Me Amazing</h2>
<div class="layout-content-row">
<div class="layout-content-col span-7">

10
docs/html/design/get-started/ui-overview.html
View File

@@ -80,6 +80,10 @@ Android Design - UI Overview
</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>
@@ -109,7 +113,7 @@ enjoyable to use. At the end of this chapter we introduce the main elements for
in your app.</p>
<p>Read on for a quick overview of the most important aspects of the Android user interface.</p>
<h2>Home, All Apps, and Recents</h2>
<h2 id="home-all-apps-recents">Home, All Apps, and Recents</h2>
<div class="vspace size-1">&nbsp;</div>
@@ -153,7 +157,7 @@ recently used app at the bottom.</p>
</div>
</div>
<h2>System Bars</h2>
<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.
@@ -185,7 +189,7 @@ to allow the user to enjoy full screen content without distraction.</p>
</div>
<h2>Notifications</h2>
<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

4
docs/html/design/index.html
View File

@@ -93,6 +93,10 @@ Android Design - Welcome
</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>

32
docs/html/design/patterns/actionbar.html
View File

@@ -80,6 +80,10 @@ Android Design - Action Bar
</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>
@@ -118,7 +122,8 @@ app.</p>
<p>If you're new to writing Android apps, note that the action bar is one of the most important design
elements you can implement. Following the guidelines described here will go a long way toward making
your app's interface consistent with the core Android apps.</p>
<h2>General Organization</h2>
<h2 id="organization">General Organization</h2>
<p>The action bar is split into four different functional areas that apply to most apps.</p>
<img src="../static/content/action_bar_basics.png">
@@ -129,8 +134,8 @@ your app's interface consistent with the core Android apps.</p>
<li class="value-1"><h4>App icon</h4>
<p>
The app icon establishes your app's identity. It can be replaced with a different logo or branding if
you wish.
The app icon establishes your app's identity. It can be replaced with a different logo or branding
if you wish.
Important: If the app is currently not displaying the top-level screen, be sure to display the Up
caret to the left of the app icon, so the user can navigate up the hierarchy. For more discussion of
Up navigation, see the <a href="../patterns/navigation.html">Navigation</a> pattern.
@@ -180,12 +185,11 @@ Move less often used actions to the action overflow.
</p>
</li>
</ol>
</div>
</div>
<h2 id="adapting-rotation">Adapting to Rotation and Different Screen Sizes</h2>
<h2>Adapting to Rotation and Different Screen Sizes</h2>
<p>One of the most important UI issues to consider when creating an app is how to adjust to screen
rotation on different screen sizes.</p>
<p>You can adapt to such changes by using <em>split action bars</em>, which allow you to distribute action bar
@@ -196,7 +200,7 @@ content across multiple bars located below the main action bar or at the bottom
Split action bar showing action buttons at the bottom of the screen in vertical orientation.
</div>
<h2>Layout Considerations for Split Action Bars</h2>
<h2 id="considerations-split-action-bars">Layout Considerations for Split Action Bars</h2>
<div class="layout-content-row">
<div class="layout-content-col span-8 with-callouts">
@@ -222,7 +226,8 @@ the top bar.</p>
</div>
</div>
<h2>Contextual Action Bars</h2>
<h2 id="contextual">Contextual Action Bars</h2>
<p>A <em>contextual action bar (CAB)</em> is a temporary action bar that overlays the app's action bar for the
duration of a particular sub-task. CABs are most typically used for tasks that involve acting on
selected data or text.</p>
@@ -244,7 +249,8 @@ selected data or text.</p>
<p>Use CABs whenever you allow the user to select data via long press. You can control the action
content of a CAB in order to insert the actions you would like the user to be able to perform.</p>
<p>For more information, refer to the "Selection" pattern.</p>
<h2>Action Bar Elements</h2>
<h2 id="elements">Action Bar Elements</h2>
<h4>Tabs</h4>
<p><em>Tabs</em> display app views concurrently and make it easy to explore and switch between them. Use tabs
if you expect your users to switch views frequently.</p>
@@ -326,7 +332,9 @@ tabs. Fixed tabs in the main action bar can move to the top bar when the screen
<p><em>Action buttons</em> on the action bar surface your app's most important activities. Think about which
buttons will get used most often, and order them accordingly. Depending on available screen real
estate, the system shows your most important actions as action buttons and moves the rest to the
action overflow.</p>
action overflow. The action bar and the action overflow should only present actions to the user that
are available. If an action is unavailable in the current context, hide it. Do not show it as
disabled.</p>
<img src="../static/content/action_bar_pattern_action_icons.png">
<div class="figure-caption">
@@ -380,8 +388,7 @@ files for further customization.
</p>
<p>
<a href="../static/download/action_bar_icons-v4.0.zip">Download the Action Bar Icon
Pack</a>
<a href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Download the Action Bar Icon Pack</a>
</p>
@@ -436,7 +443,8 @@ sharing options.</p>
The Gallery app's share action provider with extended spinner for additional sharing options.
</div>
<h2>Action Bar Checklist</h2>
<h2 id="checklist">Action Bar Checklist</h2>
<p>When planning your split action bars, ask yourself questions like these:</p>
<h4>How important is view navigation to the task?</h4>
<p>If view navigation is very important to your app, use tabs (for fastest view-switching) or spinners.</p>

19
docs/html/design/patterns/app-structure.html
View File

@@ -80,6 +80,10 @@ Android Design - Application Structure
</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>
@@ -111,7 +115,8 @@ Android Design - Application Structure
<li>Apps such as Gmail or Market that combine a broad set of data views with deep navigation</li>
</ul>
<p>Your app's structure depends largely on the content and tasks you want to surface for your users.</p>
<h2>General Structure</h2>
<h2 id="general-structure">General Structure</h2>
<p>A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is
deep and complex, category views connect top level and detail views.</p>
@@ -139,7 +144,8 @@ facet of your app.</p>
</div>
</div>
<h2>Top Level</h2>
<h2 id="top-level">Top Level</h2>
<p>The layout of your start screen requires special attention. This is the first screen people see
after launching your app, so it should be an equally rewarding experience for new and frequent
visitors alike.</p>
@@ -219,7 +225,8 @@ monotony of simple list views.</p>
</div>
</div>
<h2>Categories</h2>
<h2 id="categories">Categories</h2>
<p>Generally, the purpose of a deep, data-driven app is to navigate through organizational categories
to the detail level, where data can be viewed and managed. Minimize perceived navigation effort by
keeping your apps shallow.</p>
@@ -281,7 +288,8 @@ are often good reasons to act on collections of data as well.</p>
delete multiple items in the category view. Analyze which detail view actions are applicable to
collections of items. Then use multi-select to allow application of those actions to multiple items
in a category view.</p>
<h2>Details</h2>
<h2 id="details">Details</h2>
<p>The detail view allows you to view and act on your data. The layout of the detail view depends on
the data type being displayed, and therefore differs widely among apps.</p>
@@ -330,7 +338,8 @@ to achieve this.</p>
filmstrip control that lets people quickly jump to specific images.
</div>
<h2>Checklist</h2>
<h2 id="checklist">Checklist</h2>
<ul>
<li>
<p>Find ways to display useful content on your start screen.</p>

6
docs/html/design/patterns/compatibility.html
View File

@@ -80,6 +80,10 @@ Android Design - Backwards Compatibility
</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>
@@ -110,7 +114,7 @@ Android Design - Backwards Compatibility
</ul>
<p>Android 4.0 brings these changes for tablets to the phone platform.</p>
<h2>Adapting Android 4.0 to Older Hardware and Apps</h2>
<h2 id="older-hardware">Adapting Android 4.0 to Older Hardware and Apps</h2>
<div class="layout-content-row">
<div class="layout-content-col span-6">

4
docs/html/design/patterns/gestures.html
View File

@@ -80,6 +80,10 @@ Android Design - Gestures
</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>

4
docs/html/design/patterns/index.html
View File

@@ -93,6 +93,10 @@ Android Design - Design Patterns
</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>

13
docs/html/design/patterns/multi-pane-layouts.html
View File

@@ -80,6 +80,10 @@ Android Design - Multi-pane Layouts
</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>
@@ -108,7 +112,8 @@ layout by adjusting its content to varying screen sizes and orientations.</p>
<p><em>Panels</em> are a great way for your app to achieve this. They allow you to combine multiple views into
one compound view when a lot of horizontal screen real estate is available and by splitting them up
when less space is available.</p>
<h2>Combining Multiple Views Into One</h2>
<h2 id="combining-views">Combining Multiple Views Into One</h2>
<p>On smaller devices your content is typically divided into a master grid or list view and a detail
view. Touching an item in the master view opens a different screen showing that item's detail
information.</p>
@@ -124,7 +129,8 @@ and makes navigating the app easier. </p>
<p>In general, use the pane on the right to present more information about the item you selected in the
left pane. Make sure to keep the item in the left pane selected in order to establish the
relationship between the panels.</p>
<h2>Compound Views and Orientation Changes</h2>
<h2 id="orientation">Compound Views and Orientation Changes</h2>
<p>Screens should have the same functionality regardless of orientation. If you use a compound view in
one orientation, don't split it up when the user rotates the screen. There are several techniques
you can use to adjust the layout after orientation change while keeping functional parity intact.</p>
@@ -189,7 +195,8 @@ the content in the detail panel.</p>
</div>
</div>
<h2>Checklist</h2>
<h2 id="checklist">Checklist</h2>
<ul>
<li>
<p>Plan in advance on how your app scales to different screen sizes and screen orientations.</p>

13
docs/html/design/patterns/navigation.html
View File

@@ -80,6 +80,10 @@ Android Design - Navigation with Back and Up
</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>
@@ -112,7 +116,8 @@ the <em>Up</em> button, consisting of the app icon and a left-point caret.</p>
<img src="../static/content/navigation_with_back_and_up.png">
<h2>Up vs. Back</h2>
<h2 id="up-vs-back">Up vs. Back</h2>
<p>The Up button is used to navigate within an application based on the hierarchical relationships
between screens. For instance, if screen A displays a list of items, and selecting an item leads to
screen B (which presents that item in more detail), then screen B should offer an Up button that
@@ -134,7 +139,8 @@ return the user to the Home screen, or even to a different application.</p>
<li>Back dismisses contextual action bars, and removes the highlight from the selected items</li>
<li>Back hides the onscreen keyboard (IME)</li>
</ul>
<h2>Navigation Within Your App</h2>
<h2 id="within-app">Navigation Within Your App</h2>
<h4>Navigating to screens with multiple entry points</h4>
<p>Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached
from multiple entry points&mdash;e.g., a settings screen which can be navigated to from any screen
@@ -176,7 +182,8 @@ which the user had not previously navigated through.</p>
<img src="../static/content/navigation_between_siblings_market2.png">
<h2>Navigation From Outside Your App</h2>
<h2 id="from-outside">Navigation From Outside Your App</h2>
<p>There are two categories of navigation from outside your app to screens deep within the app's
hierarchy:</p>
<ul>

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

@@ -80,6 +80,10 @@ Android Design - New in Android 4.0
</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>

8
docs/html/design/patterns/notifications.html
View File

@@ -80,6 +80,10 @@ Android Design - Notifications
</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>
@@ -173,7 +177,7 @@ develop a widget that they can choose to place on their home screen.</p>
</div>
</div>
<h2>Design Guidelines</h2>
<h2 id="design-guidelines">Design Guidelines</h2>
<div class="layout-content-row">
<div class="layout-content-col span-6">
@@ -269,7 +273,7 @@ currently pending.</p>
<li>Use color to distinguish your app from others. Notification icons should generally be monochrome.</li>
</ul>
<h2>Interacting With Notifications</h2>
<h2 id="interacting-with-notifications">Interacting With Notifications</h2>
<div class="layout-content-row">
<div class="layout-content-col span-6">

6
docs/html/design/patterns/pure-android.html
View File

@@ -80,6 +80,10 @@ Android Design - Pure Android
</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>
@@ -227,7 +231,7 @@ the platform and in order to not have the user guess as to what the meaning of t
</div>
</div>
<h2>Device Independence</h2>
<h2 id="device-independence">Device Independence</h2>
<p>Remember that your app will run on a wide variety of different screen sizes. Create visual assets
for different screen sizes and densities and make use of concepts such as multi-pane layouts to

7
docs/html/design/patterns/selection.html
View File

@@ -80,6 +80,10 @@ Android Design - Selection
</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>
@@ -180,7 +184,8 @@ selected data items of the same kind.</p>
</div>
</div>
<h2>Checklist</h2>
<h2 id="checklist">Checklist</h2>
<ul>
<li>
<p>Whenever your app supports the selection of multiple data items, make use of the contextual action

12
docs/html/design/patterns/swipe-views.html
View File

@@ -80,6 +80,10 @@ Android Design - Swipe Views
</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>
@@ -107,7 +111,8 @@ built in a hierarchical fashion, there are instances where horizontal navigation
vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views
allow the user to efficiently move from item to item using a simple gesture and thereby make
browsing and consuming data a more fluent experience.</p>
<h2>Swiping Between Detail Views</h2>
<h2 id="detail-views">Swiping Between Detail Views</h2>
<p>An app's data is often organized in a master/detail relationship: The user can view a list of
related data items, such as images, chats, or emails, and then pick one of the items to see the
detail contents in a separate screen.</p>
@@ -127,7 +132,7 @@ using the swipe gesture to navigate to the next/previous detail view.</p>
Navigating between consecutive Email messages using the swipe gesture.
</div>
<h2>Swiping Between Tabs</h2>
<h2 id="between-tabs">Swiping Between Tabs</h2>
<div class="layout-content-row">
<div class="layout-content-col span-5">
@@ -150,7 +155,8 @@ using the swipe gesture to navigate to the next/previous detail view.</p>
<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p>
<div class="vspace size-2">&nbsp;</div>
<h2>Checklist</h2>
<h2 id="checklist">Checklist</h2>
<ul>
<li>
<p>Use swipe to quickly navigate between detail views or tabs.</p>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

68
docs/html/design/static/default.css
View File

@@ -3,8 +3,8 @@
/* clearfix idiom */
/* common mixins */
/* page layout + top-level styles */
::-moz-selection,
::-webkit-selection,
::-moz-selection,
::selection {
background-color: #0099cc;
color: #fff; }
@@ -256,6 +256,8 @@ video.with-shadow {
position: absolute;
top: 10px;
right: 10px; }
#nav .nav-section-header.empty:after {
display: none; }
#nav li.expanded .nav-section-header {
background: rgba(0, 0, 0, 0.05); }
#nav li.expanded .nav-section-header:after {
@@ -268,9 +270,9 @@ video.with-shadow {
overflow: hidden;
margin-bottom: 0; }
#nav > li > ul.animate-height {
transition: height 0.25s ease-in;
-webkit-transition: height 0.25s ease-in;
-moz-transition: height 0.25s ease-in; }
-moz-transition: height 0.25s ease-in;
transition: height 0.25s ease-in; }
#nav > li > ul li {
padding: 10px 10px 11px 10px; }
#nav > li.expanded > ul {
@@ -330,6 +332,39 @@ video.with-shadow {
margin-left: 5px; }
/* content body */
@-webkit-keyframes glowheader {
from {
background-color: #33b5e5;
color: #000;
border-bottom-color: #000; }
to {
background-color: transparent;
color: #33b5e5;
border-bottom-color: #33b5e5; } }
@-moz-keyframes glowheader {
from {
background-color: #33b5e5;
color: #000;
border-bottom-color: #000; }
to {
background-color: transparent;
color: #33b5e5;
border-bottom-color: #33b5e5; } }
@keyframes glowheader {
from {
background-color: #33b5e5;
color: #000;
border-bottom-color: #000; }
to {
background-color: transparent;
color: #33b5e5;
border-bottom-color: #33b5e5; } }
#content p,
#content ul,
#content ol,
@@ -345,6 +380,16 @@ video.with-shadow {
color: #33b5e5;
border-bottom: 1px solid #33b5e5;
height: 30px; }
#content h2:target {
-webkit-animation-name: glowheader;
-moz-animation-name: glowheader;
animation-name: glowheader;
-webkit-animation-duration: 0.7s;
-moz-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
animation-timing-function: ease-out; }
#content hr {
border: 0;
border-bottom: 1px solid #33b5e5;
@@ -569,3 +614,20 @@ li.no-bullet {
margin-right: 8px; }
.video-instructions:after {
content: 'Click to replay movie.'; }
/* download buttons */
.download-button {
display: block;
margin-bottom: 5px;
text-decoration: none;
background-color: #33b5e5;
color: #fff !important;
font-weight: 500;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
padding: 6px 12px;
border-radius: 2px; }
.download-button:hover, .download-button:focus {
background-color: #0099cc;
color: #fff !important; }
.download-button:active {
background-color: #006699; }

8
docs/html/design/static/default.js
View File

@@ -158,4 +158,12 @@ $(document).ready(function() {
$tooltip.hide();
});
});
// Set up <h2> deeplinks
$('h2').click(function() {
var id = $(this).attr('id');
if (id) {
document.location.hash = id;
}
});
});

BIN
docs/html/design/static/download/RobotoSpecimenBook.pdf
View File

Binary file not shown.

BIN
docs/html/design/static/download/Roboto_Hinted_20111129.zip
View File

Binary file not shown.

BIN
docs/html/design/static/download/action_bar_icons-v4.0.zip
View File

Binary file not shown.

BIN
docs/html/design/static/download/color_swatches.zip
View File

Binary file not shown.

BIN
docs/html/design/static/ico_styleguide.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 697 B

9
docs/html/design/style/color.html
View File

@@ -173,6 +173,10 @@ Android Design - Color
</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>
@@ -218,10 +222,11 @@ between visual components. Note that red and green may be indistinguishable to c
</ul>
</div>
<h2>Palette</h2>
<h2 id="palette">Palette</h2>
<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="../static/download/color_swatches.zip">Download the swatches</a></p>
<p><a href="https://dl-ssl.google.com/android/design/Android_Design_Color_Swatches_20120229.zip">Download the swatches</a></p>
<img src="../static/content/color_spectrum.png">

4
docs/html/design/style/devices-displays.html
View File

@@ -80,6 +80,10 @@ Android Design - Devices and Displays
</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>

11
docs/html/design/style/iconography.html
View File

@@ -80,6 +80,10 @@ Android Design - Iconography
</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>
@@ -191,7 +195,7 @@ from above, so that users perceive some depth.</p>
</div>
<h2 id="actionbar">Action Bar</h2>
<h2 id="action-bar">Action Bar</h2>
<p>
@@ -211,8 +215,7 @@ files for further customization.
</p>
<p>
<a href="../static/download/action_bar_icons-v4.0.zip">Download the Action Bar Icon
Pack</a>
<a href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">Download the Action Bar Icon Pack</a>
</p>
@@ -290,7 +293,7 @@ Disabled: <strong>30%</strong> opacity</p>
</div>
<h2 id="small_contextual">Small / Contextual Icons</h2>
<h2 id="small-contextual">Small / Contextual Icons</h2>
<p>Within the body of your app, use small icons to surface actions and/or provide status for specific
items. For example, in the Gmail app, each message has a star icon that marks the message as

4
docs/html/design/style/index.html
View File

@@ -93,6 +93,10 @@ Android Design - Design Elements
</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>

8
docs/html/design/style/metrics-grids.html
View File

@@ -80,6 +80,10 @@ Android Design - Metrics and Grids
</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>
@@ -130,7 +134,7 @@ Screen Sizes and Densities Device Dashboard</a>.</p>
</div>
</div>
<h2>48dp Rhythm</h2>
<h2 id="48dp-rhythm">48dp Rhythm</h2>
<p>Touchable UI components are generally laid out along 48dp units.</p>
@@ -157,7 +161,7 @@ will be able to reliably and accurately target them with their fingers.</p>
<h4>Mind the gaps</h4>
<p>Spacing between each UI element is 8dp.</p>
<h2>Examples</h2>
<h2 id="examples">Examples</h2>
<img src="../static/content/metrics_forms.png">

4
docs/html/design/style/themes.html
View File

@@ -80,6 +80,10 @@ Android Design - Themes
</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>

4
docs/html/design/style/touch-feedback.html
View File

@@ -80,6 +80,10 @@ Android Design - Touch Feedback
</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>

8
docs/html/design/style/typography.html
View File

@@ -80,6 +80,10 @@ Android Design - Typography
</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>
@@ -119,8 +123,8 @@ italic weights by default.</p>
<img src="../static/content/typography_alphas.png">
<p><a href="../static/download/Roboto_Hinted_20111129.zip">Download Roboto</a></p>
<p><a href="../static/download/RobotoSpecimenBook.pdf">Specimen Book</a></p>
<p><a href="https://dl-ssl.google.com/android/design/Roboto_Hinted_20111129.zip">Download Roboto</a></p>
<p><a href="https://dl-ssl.google.com/android/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a></p>
</div>
</div>

6
docs/html/design/style/writing.html
View File

@@ -132,6 +132,10 @@ Android Design - Writing Style
</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>
@@ -186,7 +190,7 @@ Android Design - Writing Style
</li>
</ol>
<h2>Examples</h2>
<h2 id="examples">Examples</h2>
<ol><li class="value-1"><strong>Keep it brief.</strong> From the setup wizard:</ol>