diff options
Diffstat (limited to 'docs/html/design/patterns')
| -rw-r--r-- | docs/html/design/patterns/accessibility.jd | 8 | ||||
| -rw-r--r-- | docs/html/design/patterns/actionbar.jd | 9 | ||||
| -rw-r--r-- | docs/html/design/patterns/app-structure.jd | 13 | ||||
| -rw-r--r-- | docs/html/design/patterns/gestures.jd | 10 | ||||
| -rw-r--r-- | docs/html/design/patterns/multi-pane-layouts.jd | 16 | ||||
| -rw-r--r-- | docs/html/design/patterns/navigation-drawer.jd | 26 | ||||
| -rw-r--r-- | docs/html/design/patterns/selection.jd | 9 | ||||
| -rw-r--r-- | docs/html/design/patterns/settings.jd | 9 |
8 files changed, 83 insertions, 17 deletions
diff --git a/docs/html/design/patterns/accessibility.jd b/docs/html/design/patterns/accessibility.jd index aaa6f16..b968237 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 +<a class="notice-designers-material" + href="http://www.google.com/design/spec/usability/accessibility.html"> + <div> + <h3>Material Design</h3> + <p>Accessibility<p> + </div> +</a> + <a class="notice-developers" href="{@docRoot}training/accessibility/index.html"> <div> <h3>Developer Docs</h3> diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd index f28df01..5467722 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. <img src="{@docRoot}design/media/action_bar_pattern_overview.png"> + +<a class="notice-designers-material" href="http://www.google.com/design/spec/layout/structure.html#structure-app-bar"> + <div> + <h3>Material Design</h3> + <p>App Bar<p> + </div> +</a> + <a class="notice-developers" href="{@docRoot}guide/topics/ui/actionbar.html"> <div> <h3>Developer Docs</h3> @@ -12,7 +20,6 @@ page.metaDescription=The Action bar is an essential design element for all apps. </div> </a> - <p>The <em>action bar</em> is a dedicated piece of real estate at the top of each screen that is generally persistent throughout the app.</p> <p><strong>It provides several key functions</strong>:</p> <ul> diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd index e0a11ed..404dd4d 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 + +<a class="notice-designers-material" + href="http://www.google.com/design/spec/patterns/app-structure.html"> + <div> + <h3>Material Design</h3> + <p>App Structure<p> + </div> +</a> + <p>Apps come in many varieties that address very different needs. For example:</p> <ul> <li>Apps such as Calculator or Camera that are built around a single focused activity handled from a @@ -63,7 +72,7 @@ layouts that are visually engaging and appropriate for the data type and screen <div class="figure-caption"> Play Music allows navigation among artists, albums, and playlists through rich content display. It is also enriched with tailored recommendations and promotions that surface content of interest - to the user. Search is readily available from the action bar. + to the user. Search is readily available from the action bar. </div> </div> @@ -92,7 +101,7 @@ important actions.</p> <img src="{@docRoot}design/media/app_structure_gmail.png"> <div class="figure-caption"> A calendar is about productivity, so an efficient, easy-to-skim view with higher data density works - well. Navigation supports switching views of day, week, month, and agenda views. + well. Navigation supports switching views of day, week, month, and agenda views. </div> </div> diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd index 1ec7094..ada0735 100644 --- a/docs/html/design/patterns/gestures.jd +++ b/docs/html/design/patterns/gestures.jd @@ -2,6 +2,14 @@ page.title=Gestures page.tags=gesture,input,touch @jd:body +<a class="notice-designers-material" + href="http://www.google.com/design/spec/patterns/gestures.html"> + <div> + <h3>Material Design</h3> + <p>Gestures<p> + </div> +</a> + <p>Gestures allow users to interact with your app by manipulating the screen objects you provide. The following table shows the core gesture set that is supported in Android.</p> @@ -92,7 +100,7 @@ following table shows the core gesture set that is supported in Android.</p> </li> </ul> </div> - + </div> diff --git a/docs/html/design/patterns/multi-pane-layouts.jd b/docs/html/design/patterns/multi-pane-layouts.jd index 4e99462..dbe7d01 100644 --- a/docs/html/design/patterns/multi-pane-layouts.jd +++ b/docs/html/design/patterns/multi-pane-layouts.jd @@ -5,6 +5,14 @@ page.metaDescription=Design guide with examples of how to flatten navigation and @jd:body +<a class="notice-designers-material" + href="http://www.google.com/design/spec/layout/structure.html#structure-ui-regions"> + <div> + <h3>Material Design</h3> + <p>UI Regions and Guidance<p> + </div> +</a> + <a class="notice-developers" href="{@docRoot}training/basics/fragments/index.html"> <div> <h3>Developer Docs</h3> @@ -47,7 +55,7 @@ you can use to adjust the layout after orientation change while keeping function <div class="layout-content-col span-8"> <img src="{@docRoot}design/media/multipane_stretch.png"> - + </div> <div class="layout-content-col span-5"> @@ -61,7 +69,7 @@ you can use to adjust the layout after orientation change while keeping function <div class="layout-content-col span-8"> <img src="{@docRoot}design/media/multipane_stack.png"> - + </div> <div class="layout-content-col span-5"> @@ -75,7 +83,7 @@ you can use to adjust the layout after orientation change while keeping function <div class="layout-content-col span-8"> <img src="{@docRoot}design/media/multipane_expand.png"> - + </div> <div class="layout-content-col span-5"> @@ -89,7 +97,7 @@ you can use to adjust the layout after orientation change while keeping function <div class="layout-content-col span-8"> <img src="{@docRoot}design/media/multipane_show.png"> - + </div> <div class="layout-content-col span-5"> diff --git a/docs/html/design/patterns/navigation-drawer.jd b/docs/html/design/patterns/navigation-drawer.jd index 7e63ba6..dbac459 100644 --- a/docs/html/design/patterns/navigation-drawer.jd +++ b/docs/html/design/patterns/navigation-drawer.jd @@ -3,6 +3,14 @@ page.tags=DrawerLayout,SlidingPaneLayout @jd:body +<a class="notice-designers-material" + href="http://www.google.com/design/spec/layout/structure.html#structure-side-nav"> + <div> + <h3>Material Design</h3> + <p>Side Nav<p> + </div> +</a> + <a class="notice-developers" href="{@docRoot}training/implementing-navigation/nav-drawer.html"> <div> <h3>Developer Docs</h3> @@ -12,7 +20,7 @@ page.tags=DrawerLayout,SlidingPaneLayout <p>The navigation drawer is a panel that transitions in from the left edge of the screen and -displays the app’s main navigation options.</p> +displays the app’s main navigation options.</p> <h4>Displaying the navigation drawer</h4> @@ -92,7 +100,7 @@ anywhere in the app, navigation up to the top level is faster and more efficient <p>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.</p> <p> 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.</p> <h2 id="Content">Content of the Navigation Drawer</h2> <p> 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. + <div class="layout-content-row"> <div class="layout-content-col span-8"> <h4>Titles, icons, and counters</h4> @@ -139,7 +147,7 @@ hubs of your app as list items inside the navigation drawer - one item per row. <div class="layout-content-col span-5"> <img src="{@docRoot}design/media/navigation_drawer_titles_icons.png"> <div class="figure-caption"> - Use titles and icons to organize your drawer. + Use titles and icons to organize your drawer. </div> </div> </div> @@ -149,13 +157,13 @@ hubs of your app as list items inside the navigation drawer - one item per row. <img src="{@docRoot}design/media/navigation_drawer_collapse.png"> <div class="figure-caption"> Collapsible navigation items are split. Use the left side for navigation and the right - to collapse and expand items. + to collapse and expand items. </div> </div> <div class="layout-content-col span-5"> <h4>Collapsible navigation items</h4> <p>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. </p> @@ -189,7 +197,7 @@ is fully expanded:</p> <img src="{@docRoot}design/media/navigation_drawer_open_overflow.png"> <div class="figure-caption"> Clean up the action bar when the drawer is fully expanded. Remove actions that are not needed - and display your app's name in the title area. + and display your app's name in the title area. </div> <h4>Actions</h4> @@ -232,7 +240,7 @@ re-display the CAB.</p> <img src="{@docRoot}design/media/navigation_drawer_CAB.png"> <div class="figure-caption"> - Hide contextual action bars while the drawer is visible. + Hide contextual action bars while the drawer is visible. </div> <p>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 be31677..7ed6dcc 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 +<a class="notice-designers-material" + href="http://www.google.com/design/spec/patterns/selection.html"> + <div> + <h3>Material Design</h3> + <p>Selection<p> + </div> +</a> + <a class="notice-developers" href="{@docRoot}guide/topics/ui/menus.html#context-menu"> <div> <h3>Developer Docs</h3> @@ -9,6 +17,7 @@ page.tags=actionmode,navigation,contextual </div> </a> + <p>Android 3.0 changed the <em>long press</em> 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.</p> diff --git a/docs/html/design/patterns/settings.jd b/docs/html/design/patterns/settings.jd index e3a3f05..a24d6c0 100644 --- a/docs/html/design/patterns/settings.jd +++ b/docs/html/design/patterns/settings.jd @@ -2,6 +2,14 @@ page.title=Settings page.tags=preferences,sharedpreferences @jd:body +<a class="notice-designers-material" + href="http://www.google.com/design/spec/patterns/settings.html"> + <div> + <h3>Material Design</h3> + <p>Settings<p> + </div> +</a> + <a class="notice-developers" href="{@docRoot}guide/topics/ui/settings.html"> <div> <h3>Developer Docs</h3> @@ -9,6 +17,7 @@ page.tags=preferences,sharedpreferences </div> </a> + <p itemprop="description">Settings is a place in your app where users indicate their preferences for how your app should behave. This benefits users because:</p> |