@@ -110,7 +114,8 @@ buttons. Both can contain text labels and/or images.
-
Basic Buttons
+
Basic Buttons
+
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.
-
Borderless Buttons
+
Borderless Buttons
+
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.
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
diff --git a/docs/html/design/building-blocks/progress.html b/docs/html/design/building-blocks/progress.html
index 7aae913955530..32183bc401e43 100644
--- a/docs/html/design/building-blocks/progress.html
+++ b/docs/html/design/building-blocks/progress.html
@@ -80,6 +80,10 @@ Android Design - Progress and Activity
+
@@ -105,7 +109,8 @@ Android Design - Progress and Activity
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.
-
Progress
+
Progress
+
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.
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.
-
Scroll Indicator
+
Scroll Indicator
+
Appears during scrolling to indicate what portion of the content is currently in view.
@@ -118,7 +123,8 @@ scrolling speed is proportional to the speed of the gesture.
-
Index Scrolling
+
Index Scrolling
+
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
diff --git a/docs/html/design/building-blocks/seek-bars.html b/docs/html/design/building-blocks/seek-bars.html
index 84cf5d2291935..aef1823d00064 100644
--- a/docs/html/design/building-blocks/seek-bars.html
+++ b/docs/html/design/building-blocks/seek-bars.html
@@ -80,6 +80,10 @@ Android Design - Seek Bars and Sliders
+
Switches allow the user to select options. There are three kinds of switches: checkboxes, radio
buttons, and on/off switches.
-
Checkboxes
+
Checkboxes
+
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.
@@ -112,7 +117,8 @@ turn an option off or on. Instead, use an on/off switch.
-
Radio Buttons
+
Radio Buttons
+
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.
@@ -121,7 +127,8 @@ consider a spinner, which uses less space.
-
On/off Switches
+
On/off Switches
+
On/off switches toggle the state of a single settings option.
@@ -141,7 +145,7 @@ can enter information more accurately and efficiently.
-
Text Selection
+
Text Selection
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.
diff --git a/docs/html/design/downloads/index.html b/docs/html/design/downloads/index.html
new file mode 100644
index 0000000000000..f910b29a9cf72
--- /dev/null
+++ b/docs/html/design/downloads/index.html
@@ -0,0 +1,278 @@
+
+
+
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.
+
You may use these materials without restriction in your apps and to develop your apps.
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.
Action bar icons are graphic buttons that represent the most important actions people can take
+within your app. More on Action Bar Iconography
+
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.
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.
@@ -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.
-
Enchant Me
+
Enchant Me
@@ -176,7 +180,7 @@ over, place previous choices within easy reach.
-
Simplify My Life
+
Simplify My Life
@@ -312,7 +316,7 @@ focused, and unless it's critical and time-sensitive, an interruption can be tax
@@ -109,7 +113,7 @@ enjoyable to use. At the end of this chapter we introduce the main elements for
in your app.
Read on for a quick overview of the most important aspects of the Android user interface.
-
Home, All Apps, and Recents
+
Home, All Apps, and Recents
@@ -153,7 +157,7 @@ recently used app at the bottom.
-
System Bars
+
System Bars
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.
-
Notifications
+
Notifications
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
diff --git a/docs/html/design/index.html b/docs/html/design/index.html
index 14d7b630a17e2..8583aa4540cee 100644
--- a/docs/html/design/index.html
+++ b/docs/html/design/index.html
@@ -93,6 +93,10 @@ Android Design - Welcome
+
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.
-
General Organization
+
General Organization
+
The action bar is split into four different functional areas that apply to most apps.
@@ -129,8 +134,8 @@ your app's interface consistent with the core Android apps.
App icon
-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 Navigation pattern.
@@ -180,12 +185,11 @@ Move less often used actions to the action overflow.
-
+
Adapting to Rotation and Different Screen Sizes
-
Adapting to Rotation and Different Screen Sizes
One of the most important UI issues to consider when creating an app is how to adjust to screen
rotation on different screen sizes.
You can adapt to such changes by using split action bars, 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.
-
Layout Considerations for Split Action Bars
+
Layout Considerations for Split Action Bars
@@ -222,7 +226,8 @@ the top bar.
-
Contextual Action Bars
+
Contextual Action Bars
+
A contextual action bar (CAB) 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.
@@ -244,7 +249,8 @@ selected data or text.
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.
For more information, refer to the "Selection" pattern.
-
Action Bar Elements
+
Action Bar Elements
+
Tabs
Tabs 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.
@@ -326,7 +332,9 @@ tabs. Fixed tabs in the main action bar can move to the top bar when the screen
Action buttons 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.
+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.
@@ -380,8 +388,7 @@ files for further customization.
Apps such as Gmail or Market that combine a broad set of data views with deep navigation
Your app's structure depends largely on the content and tasks you want to surface for your users.
-
General Structure
+
General Structure
+
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.
@@ -139,7 +144,8 @@ facet of your app.
-
Top Level
+
Top Level
+
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.
@@ -219,7 +225,8 @@ monotony of simple list views.
-
Categories
+
Categories
+
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.
@@ -281,7 +288,8 @@ are often good reasons to act on collections of data as well.
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.
-
Details
+
Details
+
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.
@@ -330,7 +338,8 @@ to achieve this.
filmstrip control that lets people quickly jump to specific images.
-
Checklist
+
Checklist
+
Find ways to display useful content on your start screen.
@@ -108,7 +112,8 @@ layout by adjusting its content to varying screen sizes and orientations.
Panels 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.
-
Combining Multiple Views Into One
+
Combining Multiple Views Into One
+
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.
@@ -124,7 +129,8 @@ and makes navigating the app easier.
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.
-
Compound Views and Orientation Changes
+
Compound Views and Orientation Changes
+
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.
@@ -189,7 +195,8 @@ the content in the detail panel.
-
Checklist
+
Checklist
+
Plan in advance on how your app scales to different screen sizes and screen orientations.
diff --git a/docs/html/design/patterns/navigation.html b/docs/html/design/patterns/navigation.html
index cad36828ada69..6287b5ec56f2b 100644
--- a/docs/html/design/patterns/navigation.html
+++ b/docs/html/design/patterns/navigation.html
@@ -80,6 +80,10 @@ Android Design - Navigation with Back and Up
@@ -112,7 +116,8 @@ the Up button, consisting of the app icon and a left-point caret.
-
Up vs. Back
+
Up vs. Back
+
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.
Back dismisses contextual action bars, and removes the highlight from the selected items
Back hides the onscreen keyboard (IME)
-
Navigation Within Your App
+
Navigation Within Your App
+
Navigating to screens with multiple entry points
Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached
from multiple entry points—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.
-
Navigation From Outside Your App
+
Navigation From Outside Your App
+
There are two categories of navigation from outside your app to screens deep within the app's
hierarchy:
diff --git a/docs/html/design/patterns/new-4-0.html b/docs/html/design/patterns/new-4-0.html
index 272b079649263..2e2cbc2f2a105 100644
--- a/docs/html/design/patterns/new-4-0.html
+++ b/docs/html/design/patterns/new-4-0.html
@@ -80,6 +80,10 @@ Android Design - New in Android 4.0
@@ -227,7 +231,7 @@ the platform and in order to not have the user guess as to what the meaning of t
-
Device Independence
+
Device Independence
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
diff --git a/docs/html/design/patterns/selection.html b/docs/html/design/patterns/selection.html
index 37dcab5e4da02..44c6a84942851 100644
--- a/docs/html/design/patterns/selection.html
+++ b/docs/html/design/patterns/selection.html
@@ -80,6 +80,10 @@ Android Design - Selection
+
@@ -180,7 +184,8 @@ selected data items of the same kind.
-
Checklist
+
Checklist
+
Whenever your app supports the selection of multiple data items, make use of the contextual action
diff --git a/docs/html/design/patterns/swipe-views.html b/docs/html/design/patterns/swipe-views.html
index 4e8cd0390c199..acc9f3954859c 100644
--- a/docs/html/design/patterns/swipe-views.html
+++ b/docs/html/design/patterns/swipe-views.html
@@ -80,6 +80,10 @@ Android Design - Swipe Views
@@ -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.
-
Swiping Between Detail Views
+
Swiping Between Detail Views
+
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.
@@ -127,7 +132,7 @@ using the swipe gesture to navigate to the next/previous detail view.
Navigating between consecutive Email messages using the swipe gesture.
-
Swiping Between Tabs
+
Swiping Between Tabs
@@ -150,7 +155,8 @@ using the swipe gesture to navigate to the next/previous detail view.
If your app uses action bar tabs, use swipe to navigate between the different views.
-
Checklist
+
Checklist
+
Use swipe to quickly navigate between detail views or tabs.
@@ -218,10 +222,11 @@ between visual components. Note that red and green may be indistinguishable to c
-
Palette
+
Palette
+
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.
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
diff --git a/docs/html/design/style/index.html b/docs/html/design/style/index.html
index 5ecbafa9a25ba..c7ac58f03e28d 100644
--- a/docs/html/design/style/index.html
+++ b/docs/html/design/style/index.html
@@ -93,6 +93,10 @@ Android Design - Design Elements
+