drgreen/android_frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge "docs: Add Cross-References to Material Design Spec" into lmp-docs

Browse Source
This commit is contained in:
Joe Fernandez
2015-04-14 19:55:35 +00:00
committed by Android (Google) Code Review
parent 00f857c5a1 49ca2de88a
commit af5f200038
28 changed files with 381 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/html/design/building-blocks/buttons.jd
View File

@ -2,6 +2,14 @@ page.title=Buttons
page.tags=button,input
@jd:body
<a class="notice-designers-material"
href="http://www.google.com/design/spec/components/buttons.html">
<div>
<h3>Material Design</h3>
<p>Buttons<p>
</div>
</a>
<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/button.html">
<div>
<h3>Developer Docs</h3>

17
docs/html/design/building-blocks/dialogs.jd
View File

@ -2,6 +2,14 @@ page.title=Dialogs
page.tags=dialog,alert,popup,toast
@jd:body
<a class="notice-designers-material"
href="http://www.google.com/design/spec/components/dialogs.html">
<div>
<h3>Material Design</h3>
<p>Dialogs<p>
</div>
</a>
<a class="notice-developers" href="{@docRoot}guide/topics/ui/dialogs.html">
<div>
<h3>Developer Docs</h3>
@ -152,6 +160,15 @@ advances the workflow, and simply touching outside the popup dismisses it.</p>
away from an email before you send it triggers a "Draft saved" toast to let you know that you can
continue editing later. Toasts automatically disappear after a timeout.</p>
<a class="notice-designers-material left"
href="http://www.google.com/design/spec/components/snackbars-toasts.html">
<div>
<h3>Material Design</h3>
<p>Toasts<p>
</div>
</a>
<a class="notice-developers left" href="{@docRoot}guide/topics/ui/notifiers/toasts.html">
<div>
<h3>Developer Docs</h3>

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

@ -4,6 +4,15 @@ page.tags=gridview,layout,listview
<img src="{@docRoot}design/media/gridview_overview.png">
<a class="notice-designers-material"
href="http://www.google.com/design/spec/components/grid-lists.html">
<div>
<h3>Material Design</h3>
<p>Grid lists<p>
</div>
</a>
<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/gridview.html">
<div>
<h3>Developer Docs</h3>

25
docs/html/design/building-blocks/lists.jd
View File

@ -2,10 +2,11 @@ page.title=Lists
page.tags=listview,layout
@jd:body
<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/listview.html">
<a class="notice-designers-material"
href="http://www.google.com/design/spec/components/lists.html">
<div>
<h3>Developer Docs</h3>
<p>List View</p>
<h3>Material Design</h3>
<p>Lists<p>
</div>
</a>
@ -22,7 +23,7 @@ well as drilldown navigation.</p>
</div>
<div class="layout-content-col span-4 with-callouts">
<ol>
<ol style="margin-bottom: 60px;">
<li>
<h4>Section Divider</h4>
<p>Use section dividers to organize the content of your list into groups and facilitate scanning.</p>
@ -35,5 +36,21 @@ well as drilldown navigation.</p>
</li>
</ol>
<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/listview.html">
<div>
<h3>Developer Docs</h3>
<p>List View</p>
</div>
</a>
<a class="notice-designers-material"
href="http://www.google.com/design/spec/components/lists-controls.html">
<div>
<h3>Material Design</h3>
<p>Lists: Controls<p>
</div>
</a>
</div>
</div>

8
docs/html/design/building-blocks/progress.jd
View File

@ -2,6 +2,14 @@ page.title=Progress &amp; Activity
page.tags=progressbar,download,network
@jd:body
<a class="notice-designers-material"
href="http://www.google.com/design/spec/components/progress-activity.html">
<div>
<h3>Material Design</h3>
<p>Progress and Activity<p>
</div>
</a>
<p>Progress bars and activity indicators signal to users that something is happening that will take a moment.</p>
<h2 id="progress">Progress bars</h2>

1
docs/html/design/building-blocks/scrolling.jd
View File

@ -2,6 +2,7 @@ page.title=Scrolling
page.tags=scrollview,listview
@jd:body
<p>Scrolling allows the user to navigate to content in the overflow using a swipe gesture. The
scrolling speed is proportional to the speed of the gesture.</p>
<h2 id="indicator">Scroll Indicator</h2>

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

@ -2,6 +2,14 @@ page.title=Seek Bars and Sliders
page.tags=seekbar,progressbar
@jd:body
<a class="notice-designers-material"
href="http://www.google.com/design/spec/components/sliders.html">
<div>
<h3>Material Design</h3>
<p>Sliders<p>
</div>
</a>
<p>Interactive sliders make it possible to select a value from a continuous or discrete range of values
by moving the slider thumb. The smallest value is to the left, the largest to the right. The
interactive nature of the slider makes it a great choice for settings that reflect intensity levels,

8
docs/html/design/building-blocks/spinners.jd
View File

@ -2,6 +2,14 @@ page.title=Spinners
page.tags=spinner,dropdown
@jd:body
<a class="notice-designers-material"
href="http://www.google.com/design/spec/components/menus.html">
<div>
<h3>Material Design</h3>
<p>Menus<p>
</div>
</a>
<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/spinner.html">
<div>
<h3>Developer Docs</h3>

8
docs/html/design/building-blocks/switches.jd
View File

@ -2,6 +2,14 @@ page.title=Switches
page.tags=switch,checkbox,radiobutton,button
@jd:body
<a class="notice-designers-material"
href="http://www.google.com/design/spec/components/selection-controls.html">
<div>
<h3>Material Design</h3>
<p>Selection Controls<p>
</div>
</a>
<p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio
buttons, and on/off switches.</p>

10
docs/html/design/building-blocks/tabs.jd
View File

@ -4,10 +4,18 @@ page.tags=tabs,actionbar,navigation,viewpager
<img src="{@docRoot}design/media/tabs_overview.png">
<a class="notice-designers-material"
href="http://www.google.com/design/spec/components/tabs.html">
<div>
<h3>Material Design</h3>
<p>Tabs<p>
</div>
</a>
<a class="notice-developers" href="{@docRoot}training/implementing-navigation/lateral.html">
<div>
<h3>Developer Docs</h3>
<p>Creating Swipe Views with Tabs</p>
<p>Creating Swipe Views<br>with Tabs</p>
</div>
</a>

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

@ -2,6 +2,15 @@ page.title=Text Fields
page.tags=text,edittext,input
@jd:body
<a class="notice-designers-material"
href="http://www.google.com/design/spec/components/text-fields.html">
<div>
<h3>Material Design</h3>
<p>Text Fields<p>
</div>
</a>
<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/text.html">
<div>
<h3>Developer Docs</h3>

67
docs/html/design/downloads/index.jd
View File

@ -12,6 +12,7 @@ and implementation.</p>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<p>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.</p>
<img src="{@docRoot}design/media/downloads_stencils.png">
</div>
<div class="layout-content-col span-4">
<div class="layout-content-col span-4">
<a class="notice-designers-material"
style="width:218px;"
href="http://www.google.com/design/spec/resources/layout-templates.html">
<div>
<h3>Material Design</h3>
<p>Layout Templates<p>
</div>
</a>
</div>
<div class="layout-content-col span-4">
<a class="notice-designers-material"
style="width:218px;"
href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html">
<div>
<h3>Material Design</h3>
<p>Sticker Sheets<p>
</div>
</a>
</div>
<div class="layout-content-col span-4">
<p>
<!--<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Fireworks Stencil');"
href="{@docRoot}downloads/design/Android_Design_Fireworks_Stencil_20120814.png">Adobe&reg; Fireworks&reg; PNG Stencil</a>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Illustrator Stencil');"
href="{@docRoot}downloads/design/Android_Design_Illustrator_Vectors_20120814.ai">Adobe&reg; Illustrator&reg; Stencil</a>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'OmniGraffle Stencil');"
href="{@docRoot}downloads/design/Android_Design_OmniGraffle_Stencil_20120814.graffle">Omni&reg; OmniGraffle&reg; Stencil</a>-->
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Photoshop Sources');"
href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe&reg; Photoshop&reg; Stencils and Sources</a>
</p>
@ -61,6 +78,18 @@ modify to match your theme, plus source files.</p>
<img src="{@docRoot}design/media/iconography_actionbar_style.png">
</div>
<div class="layout-content-col span-4">
<a class="notice-designers-material"
style="width:218px;"
href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html">
<div>
<h3>Material Design</h3>
<p>Sticker Sheets<p>
</div>
</a>
</div>
<div class="layout-content-col span-4">
<p>
@ -238,6 +267,18 @@ requirements of UI and high-resolution screens.</p>
<img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png">
</div>
<div class="layout-content-col span-4">
<a class="notice-designers-material"
style="width:218px;"
href="http://www.google.com/design/spec/resources/roboto-noto-fonts.html">
<div>
<h3>Material Design</h3>
<p>Roboto Font<p>
</div>
</a>
</div>
<div class="layout-content-col span-4">
<p>
@ -264,6 +305,18 @@ shade that can be used as a complement when needed.</p>
<img src="{@docRoot}design/media/downloads_color_swatches.png">
</div>
<div class="layout-content-col span-4">
<a class="notice-designers-material"
style="width:218px;"
href="http://www.google.com/design/spec/resources/color-palettes.html">
<div>
<h3>Material Design</h3>
<p>Color Palettes<p>
</div>
</a>
</div>
<div class="layout-content-col span-4">
<p>

8
docs/html/design/patterns/accessibility.jd
View File

@ -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>

9
docs/html/design/patterns/actionbar.jd
View File

@ -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>

9
docs/html/design/patterns/app-structure.jd
View File

@ -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

8
docs/html/design/patterns/gestures.jd
View File

@ -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>

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

@ -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>

8
docs/html/design/patterns/navigation-drawer.jd
View File

@ -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>

9
docs/html/design/patterns/selection.jd
View File

@ -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&mdash;that is, a touch that's held in the same position for a moment&mdash;to be the global gesture to select data.. This affects the way you should
handle multi-select and contextual actions in your apps.</p>

9
docs/html/design/patterns/settings.jd
View File

@ -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>

38
docs/html/design/style/branding.jd
View File

@ -7,6 +7,14 @@ everyone else's. In Android, your app can shine as an extension of your brand. <
<h2 id="color">Color</h2>
<a class="notice-designers-material"
href="http://www.google.com/design/spec/style/color.html#color-ui-color-application">
<div>
<h3>Material Design</h3>
<p>UI Color Application<p>
</div>
</a>
<p>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.</p>
<p>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.</p>
@ -66,13 +74,28 @@ and app name in the action bar.</p>
<h2 id="logo">Icons</h2>
<a class="notice-designers-material" href="http://www.google.com/design/spec/style/icons.html">
<div>
<h3>Material Design</h3>
<p>Icons<p>
</div>
</a>
<p>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. <strong>If you take this approach, make sure your brand styling is
applied to every single icon in your app.</strong></p>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<p>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. <strong>If you take this approach, make sure your brand styling is
applied to every single icon in your app</strong>.</p>
<p>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:
<a href="{@docRoot}design/get-started/principles.html#give-me-tricks">Give me tricks that
work everywhere</a>). But the icon will still look like it belongs with all of
your other icons as a part of your brand.</p>
</div>
@ -81,13 +104,6 @@ and app name in the action bar.</p>
</div>
</div>
</div>
<p>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:
<a href="{@docRoot}design/get-started/principles.html#give-me-tricks">Give me tricks that
work everywhere</a>). But the icon will still look like it belongs with all of
your other icons as a part of your brand.</p>
<div class="layout-content-row">
<div class="layout-content-col span-6">

7
docs/html/design/style/color.jd
View File

@ -88,6 +88,13 @@ page.title=Color
}
</style>
<a class="notice-designers-material" href="http://www.google.com/design/spec/style/color.html">
<div>
<h3>Material Design</h3>
<p>Color<p>
</div>
</a>
<p>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.</p>

19
docs/html/design/style/devices-displays.jd
View File

@ -3,6 +3,14 @@ page.metaDescription=Take advantage of Android's flexible layout system and crea
@jd:body
<a class="notice-designers-material"
href="http://www.google.com/design/spec/layout/principles.html">
<div>
<h3>Material Design</h3>
<p>Layout Principles<p>
</div>
</a>
<p>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.</p>
@ -15,12 +23,14 @@ gracefully scale from large tablets to smaller phones.</p>
<div class="layout-content-col span-4">
<h4>Be flexible</h4>
<p>Stretch and compress your layouts to accommodate various heights and widths.</p>
</div>
<div class="layout-content-col span-5">
<h4>Optimize layouts</h4>
<p>On larger devices, take advantage of extra screen real estate. Create compound views that combine
multiple views to reveal more content and ease navigation.</p>
@ -37,6 +47,15 @@ ensure that your app looks great on any device.</p>
<img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" />
<h4>Strategies</h4>
<a class="notice-designers-material"
href="http://www.google.com/design/spec/layout/structure.html">
<div>
<h3>Material Design</h3>
<p>Layout Structure<p>
</div>
</a>
<p>So where do you begin when designing for multiple screens? One approach is to work in the base
standard (normal size and <acronym title="Medium density (160 dpi)">MDPI</acronym>) and scale it up or
down for the other buckets. Another approach is to start with the device with the largest screen

33
docs/html/design/style/iconography.jd
View File

@ -41,6 +41,14 @@ effectively down-scales your HDPI assets by 1/2 to match the expected size.</p>
<h2 id="launcher">Launcher</h2>
<a class="notice-designers-material"
href="http://www.google.com/design/spec/style/icons.html#icons-product-icons">
<div>
<h3>Material Design</h3>
<p>Product Icons<p>
</div>
</a>
<p>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.</p>
@ -123,6 +131,14 @@ from above, so that users perceive some depth.</p>
<h2 id="action-bar">Action Bar</h2>
<a class="notice-designers-material"
href="http://www.google.com/design/spec/style/icons.html#icons-system-icons">
<div>
<h3>Material Design</h3>
<p>System Icons<p>
</div>
</a>
<p>
Action bar icons are graphic buttons that represent the most important actions people can take
@ -220,6 +236,14 @@ Disabled: <strong>30%</strong> opacity</p>
<h2 id="small-contextual">Small / Contextual Icons</h2>
<a class="notice-designers-material"
href="http://www.google.com/design/spec/style/icons.html#icons-system-icons">
<div>
<h3>Material Design</h3>
<p>System Icons<p>
</div>
</a>
<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
important.</p>
@ -300,6 +324,15 @@ the background.</p>
<h2 id="notification">Notification Icons</h2>
<a class="notice-designers-material"
href="http://www.google.com/design/spec/style/icons.html#icons-system-icons">
<div>
<h3>Material Design</h3>
<p>System Icons<p>
</div>
</a>
<p>If your app generates notifications, provide an icon that the system can display in the status bar
whenever a new notification is available.</p>

10
docs/html/design/style/metrics-grids.jd
View File

@ -5,6 +5,16 @@ meta.tags="multiple screens, layout, tablets"
page.image=/design/media/metrics_closeup.png
@jd:body
<a class="notice-designers-material"
href="http://www.google.com/design/spec/layout/metrics-keylines.html">
<div>
<h3>Material Design</h3>
<p>Metrics and Keylines<p>
</div>
</a>
<p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per
inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as
falling into a particular size bucket and density bucket:</p>

10
docs/html/design/style/themes.jd
View File

@ -17,6 +17,16 @@ page.title=Themes
</div>
<div class="layout-content-col span-7">
<a class="notice-designers-material"
href="http://www.google.com/design/spec/style/color.html#color-themes">
<div>
<h3>Material Design</h3>
<p>Color Themes<p>
</div>
</a>
<p>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

13
docs/html/design/style/touch-feedback.jd
View File

@ -2,8 +2,17 @@ page.title=Touch Feedback
page.tags=input,button
@jd:body
<div class="layout-content-row" style="margin-bottom: -100px">
<div class="layout-content-col span-7">
<div class="layout-content-row" style="margin-bottom: -100px">
<div class="layout-content-col span-7">
<a class="notice-designers-material"
href="http://www.google.com/design/spec/animation/responsive-interaction.html">
<div>
<h3>Material Design</h3>
<p>Responsive Interaction<p>
</div>
</a>
<p>Use illumination and dimming to respond to touches, reinforce the resulting behaviors
of gestures, and indicate what actions are enabled and disabled.</p>

12
docs/html/design/style/typography.jd
View File

@ -9,7 +9,17 @@ page.metaDescription=How to use typography in your Android apps.
<img src="{@docRoot}design/media/typography_main.png">
</div>
<div class="layout-content-col span-5">
<a class="notice-designers-material"
style="width: 278px;"
href="http://www.google.com/design/spec/style/typography.html">
<div>
<h3>Material Design</h3>
<p>Typography<p>
</div>
</a>
<div class="layout-content-col span-5">
<p>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');"