Developer Docs
diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd index 53d99b8bf8046..9c91abfc2e7d9 100644 --- a/docs/html/design/building-blocks/dialogs.jd +++ b/docs/html/design/building-blocks/dialogs.jd @@ -2,6 +2,14 @@ page.title=Dialogs page.tags=dialog,alert,popup,toast @jd:body + +Material Design
+Dialogs
+
Developer Docs
@@ -35,7 +43,7 @@ user to adjust settings or enter text.Action buttons
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. Order actions following these rules:
-
-
+
- The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.
- The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.
Material Design
+Toasts
+
Developer Docs
diff --git a/docs/html/design/building-blocks/grid-lists.jd b/docs/html/design/building-blocks/grid-lists.jd index d98637cce8c5a..ac3a3ebf4a48b 100644 --- a/docs/html/design/building-blocks/grid-lists.jd +++ b/docs/html/design/building-blocks/grid-lists.jd @@ -4,6 +4,15 @@ page.tags=gridview,layout,listview
+
+
+ Material Design
+Grid lists
+
Developer Docs
diff --git a/docs/html/design/building-blocks/lists.jd b/docs/html/design/building-blocks/lists.jd index 4949d00fb949a..6f69feb377953 100644 --- a/docs/html/design/building-blocks/lists.jd +++ b/docs/html/design/building-blocks/lists.jd @@ -2,10 +2,11 @@ page.title=Lists page.tags=listview,layout @jd:body - +Developer Docs
-List View
+Material Design
+Lists
-
+
-
Section Divider
Use section dividers to organize the content of your list into groups and facilitate scanning.
@@ -35,5 +36,21 @@ well as drilldown navigation.
Developer Docs
+List View
+Material Design
+Lists: Controls
+
Material Design
+Progress and Activity
+
Progress bars and activity indicators signal to users that something is happening that will take a moment.
Progress bars
diff --git a/docs/html/design/building-blocks/scrolling.jd b/docs/html/design/building-blocks/scrolling.jd index 41e7cecf63035..04b1e4a1acb09 100644 --- a/docs/html/design/building-blocks/scrolling.jd +++ b/docs/html/design/building-blocks/scrolling.jd @@ -2,6 +2,7 @@ page.title=Scrolling page.tags=scrollview,listview @jd:body +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
diff --git a/docs/html/design/building-blocks/seek-bars.jd b/docs/html/design/building-blocks/seek-bars.jd index 1465688ed7f2c..5c421029588e8 100644 --- a/docs/html/design/building-blocks/seek-bars.jd +++ b/docs/html/design/building-blocks/seek-bars.jd @@ -2,6 +2,14 @@ page.title=Seek Bars and Sliders page.tags=seekbar,progressbar @jd:body + +Material Design
+Sliders
+
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,
diff --git a/docs/html/design/building-blocks/spinners.jd b/docs/html/design/building-blocks/spinners.jd
index f7d80e7d65ba5..3a74ccf84c8d7 100644
--- a/docs/html/design/building-blocks/spinners.jd
+++ b/docs/html/design/building-blocks/spinners.jd
@@ -2,6 +2,14 @@ page.title=Spinners
page.tags=spinner,dropdown
@jd:body
+
+ Menus
+ Selection Controls
+ Switches allow the user to select options. There are three kinds of switches: checkboxes, radio
buttons, and on/off switches. Tabs
+ Creating Swipe Views with Tabs Creating Swipe Views Text Fields
+ Drag and drop your way to beautifully designed Android apps. The stencils feature the
rich typography, colors, interactive controls, and icons found throughout Android, along with
phone and tablet outlines to frame your creations. Source files for icons and controls are also
@@ -23,15 +24,31 @@ available.
-
Adobe® Photoshop® Stencils and Sources
@@ -238,6 +267,18 @@ requirements of UI and high-resolution screens.
@@ -264,6 +305,18 @@ shade that can be used as a complement when needed.
diff --git a/docs/html/design/patterns/accessibility.jd b/docs/html/design/patterns/accessibility.jd
index aaa6f163ca2af..b9682371367d7 100644
--- a/docs/html/design/patterns/accessibility.jd
+++ b/docs/html/design/patterns/accessibility.jd
@@ -3,6 +3,14 @@ page.tags="accessibility","navigation","input"
page.metaDescription=Design an app that's universally accessible to people with visual impairment, color deficiency, hearing loss, and limited dexterity.
@jd:body
+
+ Accessibility
+ App Bar
+ The action bar is a dedicated piece of real estate at the top of each screen that is generally persistent throughout the app. It provides several key functions: App Structure
+ Apps come in many varieties that address very different needs. For example: Gestures
+ Gestures allow users to interact with your app by manipulating the screen objects you provide. The
following table shows the core gesture set that is supported in Android. UI Regions and Guidance
+ Side Nav
+ The navigation drawer is a panel that transitions in from the left edge of the screen and
-displays the app’s main navigation options. The navigation drawer is a reflection of your app’s structure and displays its major
navigation hubs. Think of navigation hubs as those places in your app that a user will want
-to visit frequently or use as a jumping-off point to other parts of the app.
+to visit frequently or use as a jumping-off point to other parts of the app.
At a minimum, the navigation hubs are the top-level views, since they correspond to your app’s
major functional areas. If your app’s structure is deep, you can add screens from lower levels that your users will
@@ -125,8 +133,8 @@ likely visit often and make those navigation hubs as well. Keep the content of the navigation drawer focused on app navigation. Expose the navigation
-hubs of your app as list items inside the navigation drawer - one item per row.
-
+hubs of your app as list items inside the navigation drawer - one item per row.
+
If you have many views with some subordinate to others, consider collapsing them into one
- expandable item to conserve space.
+ expandable item to conserve space.
The parent in the navigation drawer then turns into a split item. The left side allows
navigation to the parent item’s view, and the right side collapses or expands the list of
child items. If the user navigates away from a view with selected content, deselect the content before
diff --git a/docs/html/design/patterns/selection.jd b/docs/html/design/patterns/selection.jd
index be316778d7379..7ed6dccd9e808 100644
--- a/docs/html/design/patterns/selection.jd
+++ b/docs/html/design/patterns/selection.jd
@@ -2,6 +2,14 @@ page.title=Selection
page.tags=actionmode,navigation,contextual
@jd:body
+
+ Selection
+ Android 3.0 changed the long press gesture—that is, a touch that's held in the same position for a moment—to be the global gesture to select data.. This affects the way you should
handle multi-select and contextual actions in your apps. Settings
+ Settings is a place in your app where users indicate their preferences for how your app should
behave. This benefits users because: UI Color Application
+ Use your brand color for accent by overriding the Android framework's default blue in UI elements like checkboxes, progress bars, radio buttons, sliders, tabs, and scroll indicators. Look for opportunities to use high-contrast color for emphasis, for example, as the background color of the action bar or a primary button. But don't go overboard: not all actions are equal, so use it only for the one or two most important things. Icons
+ If you have icons that you're already using for your app on other platforms
+and they have a distinctive look intended to fit your brand, use them on your
+Android app as well. If you take this approach, make sure your brand styling is
+applied to every single icon in your app. If you have icons that you're already using for your app on other platforms
- and they have a distinctive look intended to fit your brand, use them on your
- Android app as well. If you take this approach, make sure your brand styling is
- applied to every single icon in your app. One exception: For any icon in your existing set where the symbol is different from
+ Android's, use Android's symbol but give it your brand's styling. That way, users will
+ understand what the purpose of the icon is based on what they've learned in other
+ Android apps (Design principle:
+ Give me tricks that
+ work everywhere). But the icon will still look like it belongs with all of
+ your other icons as a part of your brand. One exception: For any icon in your existing set where the symbol is different from
- Android's, use Android's symbol but give it your brand's styling. That way, users will
- understand what the purpose of the icon is based on what they've learned in other
- Android apps (Design principle:
- Give me tricks that
- work everywhere). But the icon will still look like it belongs with all of
- your other icons as a part of your brand. Color
+ Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast
between visual components. Note that red and green may be indistinguishable to color-blind users. Layout Principles
+ Android powers hundreds of millions of phones, tablets, and other devices in a wide variety of screen sizes and
form factors. By taking advantage of Android's flexible layout system, you can create apps that
gracefully scale from large tablets to smaller phones. Stretch and compress your layouts to accommodate various heights and widths. On larger devices, take advantage of extra screen real estate. Create compound views that combine
multiple views to reveal more content and ease navigation. Layout Structure
+ So where do you begin when designing for multiple screens? One approach is to work in the base
standard (normal size and MDPI) and scale it up or
down for the other buckets. Another approach is to start with the device with the largest screen
diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd
index 75f541a447351..e2cdf3fb93834 100644
--- a/docs/html/design/style/iconography.jd
+++ b/docs/html/design/style/iconography.jd
@@ -41,6 +41,14 @@ effectively down-scales your HDPI assets by 1/2 to match the expected size. Product Icons
+ The launcher icon is the visual representation of your app on the Home or All Apps screen. Since the
user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on
any type of background. System Icons
+
Action bar icons are graphic buttons that represent the most important actions people can take
@@ -220,6 +236,14 @@ Disabled: 30% opacity System Icons
+ 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
important. System Icons
+ If your app generates notifications, provide an icon that the system can display in the status bar
whenever a new notification is available. Metrics and Keylines
+ Devices vary not only in physical size, but also in screen density (DPI). To simplify the way you design for multiple screens, think of each device as
falling into a particular size bucket and density bucket: Color Themes
+ Themes are Android's mechanism for applying a consistent style to an app or activity.
The style specifies the visual properties of the elements that make up your user interface,
such as color, height, padding and font size. To promote greater cohesion between all apps
@@ -34,7 +44,7 @@ of which you can selectively implement your own visual stylings. Developer Guide For information about how to apply themes such as Holo Light and Dark, and
+ For information about how to apply themes such as Holo Light and Dark, and
how to build your own themes, see the
Styles and Themes API guide. Responsive Interaction
+ Use illumination and dimming to respond to touches, reinforce the resulting behaviors
of gestures, and indicate what actions are enabled and disabled.Material Design
+ Developer Docs
diff --git a/docs/html/design/building-blocks/switches.jd b/docs/html/design/building-blocks/switches.jd
index d4356572dd36b..9dd09caac84b8 100644
--- a/docs/html/design/building-blocks/switches.jd
+++ b/docs/html/design/building-blocks/switches.jd
@@ -2,6 +2,14 @@ page.title=Switches
page.tags=switch,checkbox,radiobutton,button
@jd:body
+
+ Material Design
+ 
+
+ Material Design
+ Developer Docs
-
with TabsMaterial Design
+ Developer Docs
diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd
index 16d61e7e54995..4111bcaffff0a 100644
--- a/docs/html/design/downloads/index.jd
+++ b/docs/html/design/downloads/index.jd
@@ -12,6 +12,7 @@ and implementation.
Material Design
+ Developer Docs
diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd
index f28df012543c9..54677222e52b7 100644
--- a/docs/html/design/patterns/actionbar.jd
+++ b/docs/html/design/patterns/actionbar.jd
@@ -5,6 +5,14 @@ page.metaDescription=The Action bar is an essential design element for all apps.
+
+
+ Material Design
+ Developer Docs
@@ -12,7 +20,6 @@ page.metaDescription=The Action bar is an essential design element for all apps.
diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd
index e0a11ed0e04b1..404dd4d8c139f 100644
--- a/docs/html/design/patterns/app-structure.jd
+++ b/docs/html/design/patterns/app-structure.jd
@@ -2,6 +2,15 @@ page.title=App Structure
page.tags=navigation,layout,tablet
@jd:body
+
+
+
Material Design
+
Material Design
+ Material Design
+ Developer Docs
@@ -47,7 +55,7 @@ you can use to adjust the layout after orientation change while keeping function
-
+
-
+
-
+
-
+
Material Design
+ Developer Docs
@@ -12,7 +20,7 @@ page.tags=DrawerLayout,SlidingPaneLayout
Displaying the navigation drawer
@@ -92,7 +100,7 @@ anywhere in the app, navigation up to the top level is faster and more efficient
Content of the Navigation Drawer
Titles, icons, and counters
@@ -139,7 +147,7 @@ hubs of your app as list items inside the navigation drawer - one item per row.
Collapsible navigation items
Actions
@@ -232,7 +240,7 @@ re-display the CAB.
Material Design
+ Developer Docs
@@ -9,6 +17,7 @@ page.tags=actionmode,navigation,contextual
Material Design
+ Developer Docs
@@ -9,6 +17,7 @@ page.tags=preferences,sharedpreferences
Color
+
+ Material Design
+ Icons
+
+ Material Design
+ Material Design
+ Material Design
+ Be flexible
+
Optimize layouts
+
Strategies
+
+
+ Material Design
+ Launcher
+
+ Material Design
+ Action Bar
+
+ Material Design
+ Small / Contextual Icons
+
+ Material Design
+ Notification Icons
+
+ Material Design
+ Material Design
+ Material Design
+ Material Design
+ 