From a53b3bfaadd14aa325c6d6dc2542d7cbea66fc85 Mon Sep 17 00:00:00 2001 From: Roman Nurik Date: Wed, 29 Feb 2012 11:59:32 -0800 Subject: [PATCH] docs: Android Design downloads section, linkable H2s. Change-Id: I4ed3006117efd740ff5f3bc93df2ac75c2dfd2f9 --- docs/html/design/building-blocks/buttons.html | 10 +- docs/html/design/building-blocks/dialogs.html | 4 + .../design/building-blocks/grid-lists.html | 6 +- docs/html/design/building-blocks/index.html | 4 + docs/html/design/building-blocks/lists.html | 4 + docs/html/design/building-blocks/pickers.html | 6 +- .../html/design/building-blocks/progress.html | 7 +- .../design/building-blocks/scrolling.html | 10 +- .../design/building-blocks/seek-bars.html | 4 + .../html/design/building-blocks/spinners.html | 4 + .../html/design/building-blocks/switches.html | 13 +- docs/html/design/building-blocks/tabs.html | 4 + .../design/building-blocks/text-fields.html | 6 +- docs/html/design/downloads/index.html | 278 ++++++++++++++++++ .../design/get-started/creative-vision.html | 4 + docs/html/design/get-started/principles.html | 10 +- docs/html/design/get-started/ui-overview.html | 10 +- docs/html/design/index.html | 4 + docs/html/design/patterns/actionbar.html | 32 +- docs/html/design/patterns/app-structure.html | 19 +- docs/html/design/patterns/compatibility.html | 6 +- docs/html/design/patterns/gestures.html | 4 + docs/html/design/patterns/index.html | 4 + .../design/patterns/multi-pane-layouts.html | 13 +- docs/html/design/patterns/navigation.html | 13 +- docs/html/design/patterns/new-4-0.html | 4 + docs/html/design/patterns/notifications.html | 8 +- docs/html/design/patterns/pure-android.html | 6 +- docs/html/design/patterns/selection.html | 7 +- docs/html/design/patterns/swipe-views.html | 12 +- .../content/downloads_color_swatches.png | Bin 0 -> 2479 bytes .../downloads_roboto_specimen_preview.png | Bin 0 -> 20900 bytes .../static/content/downloads_stencils.png | Bin 0 -> 12181 bytes docs/html/design/static/default.css | 68 ++++- docs/html/design/static/default.js | 8 + .../static/download/RobotoSpecimenBook.pdf | Bin 317985 -> 0 bytes .../download/Roboto_Hinted_20111129.zip | Bin 1505533 -> 0 bytes .../static/download/action_bar_icons-v4.0.zip | Bin 1104707 -> 0 bytes .../design/static/download/color_swatches.zip | Bin 1756 -> 0 bytes docs/html/design/static/ico_styleguide.png | Bin 697 -> 0 bytes docs/html/design/style/color.html | 9 +- docs/html/design/style/devices-displays.html | 4 + docs/html/design/style/iconography.html | 11 +- docs/html/design/style/index.html | 4 + docs/html/design/style/metrics-grids.html | 8 +- docs/html/design/style/themes.html | 4 + docs/html/design/style/touch-feedback.html | 4 + docs/html/design/style/typography.html | 8 +- docs/html/design/style/writing.html | 6 +- 49 files changed, 588 insertions(+), 62 deletions(-) create mode 100644 docs/html/design/downloads/index.html create mode 100644 docs/html/design/static/content/downloads_color_swatches.png create mode 100644 docs/html/design/static/content/downloads_roboto_specimen_preview.png create mode 100644 docs/html/design/static/content/downloads_stencils.png delete mode 100644 docs/html/design/static/download/RobotoSpecimenBook.pdf delete mode 100644 docs/html/design/static/download/Roboto_Hinted_20111129.zip delete mode 100644 docs/html/design/static/download/action_bar_icons-v4.0.zip delete mode 100644 docs/html/design/static/download/color_swatches.zip delete mode 100644 docs/html/design/static/ico_styleguide.png diff --git a/docs/html/design/building-blocks/buttons.html b/docs/html/design/building-blocks/buttons.html index cc43fcb2dd24c..9f9652f9c455f 100644 --- a/docs/html/design/building-blocks/buttons.html +++ b/docs/html/design/building-blocks/buttons.html @@ -80,6 +80,10 @@ Android Design - Buttons +
  • +
    Downloads
    +
    • +
    • @@ -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.

    diff --git a/docs/html/design/building-blocks/dialogs.html b/docs/html/design/building-blocks/dialogs.html index fc00780462987..f03a57af59a2c 100644 --- a/docs/html/design/building-blocks/dialogs.html +++ b/docs/html/design/building-blocks/dialogs.html @@ -80,6 +80,10 @@ Android Design - Dialogs +
  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/building-blocks/grid-lists.html b/docs/html/design/building-blocks/grid-lists.html index b4cfdcb22bad1..3f602161a16fc 100644 --- a/docs/html/design/building-blocks/grid-lists.html +++ b/docs/html/design/building-blocks/grid-lists.html @@ -80,6 +80,10 @@ Android Design - Grid Lists +
  • +
    Downloads
    +
    • +
    • @@ -159,7 +163,7 @@ navigation.

    -

    Grid List with Labels

    +

    Grid List with Labels

    Use labels to display additional contextual information for your grid list items.

    diff --git a/docs/html/design/building-blocks/index.html b/docs/html/design/building-blocks/index.html index c99d85caeef5f..029cabf6c30bd 100644 --- a/docs/html/design/building-blocks/index.html +++ b/docs/html/design/building-blocks/index.html @@ -93,6 +93,10 @@ Android Design - Building Blocks +
  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/building-blocks/lists.html b/docs/html/design/building-blocks/lists.html index 914ae9ea4224b..dfd13d98486c3 100644 --- a/docs/html/design/building-blocks/lists.html +++ b/docs/html/design/building-blocks/lists.html @@ -80,6 +80,10 @@ Android Design - Lists +
  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/building-blocks/pickers.html b/docs/html/design/building-blocks/pickers.html index 4c95a9fa4ff81..fc9989c82a88a 100644 --- a/docs/html/design/building-blocks/pickers.html +++ b/docs/html/design/building-blocks/pickers.html @@ -80,6 +80,10 @@ Android Design - Pickers +
  • +
    Downloads
    +
    • +
    • @@ -123,7 +127,7 @@ spinners.

    -

    Date and time pickers

    +

    Date and time pickers

    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 +

  • +
    Downloads
    +
    • +
    • @@ -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.

    diff --git a/docs/html/design/building-blocks/scrolling.html b/docs/html/design/building-blocks/scrolling.html index 3f1167c6ad11c..3599a976b6e81 100644 --- a/docs/html/design/building-blocks/scrolling.html +++ b/docs/html/design/building-blocks/scrolling.html @@ -80,6 +80,10 @@ Android Design - Scrolling +
  • +
    Downloads
    +
    • +
    • @@ -104,7 +108,8 @@ Android Design - Scrolling

    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 +

  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/building-blocks/spinners.html b/docs/html/design/building-blocks/spinners.html index bf21fe857f3be..5ef9d04878a1e 100644 --- a/docs/html/design/building-blocks/spinners.html +++ b/docs/html/design/building-blocks/spinners.html @@ -80,6 +80,10 @@ Android Design - Spinners +
  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/building-blocks/switches.html b/docs/html/design/building-blocks/switches.html index 3d7bc9c8e5364..09af540995ff8 100644 --- a/docs/html/design/building-blocks/switches.html +++ b/docs/html/design/building-blocks/switches.html @@ -80,6 +80,10 @@ Android Design - Switches +
  • +
    Downloads
    +
    • +
    • @@ -104,7 +108,8 @@ Android Design - Switches

    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.

    diff --git a/docs/html/design/building-blocks/tabs.html b/docs/html/design/building-blocks/tabs.html index c094cce91eedd..d4b0e5244b8d5 100644 --- a/docs/html/design/building-blocks/tabs.html +++ b/docs/html/design/building-blocks/tabs.html @@ -80,6 +80,10 @@ Android Design - Tabs +
  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/building-blocks/text-fields.html b/docs/html/design/building-blocks/text-fields.html index 6496fa5c08779..b9ec42d7207db 100644 --- a/docs/html/design/building-blocks/text-fields.html +++ b/docs/html/design/building-blocks/text-fields.html @@ -80,6 +80,10 @@ Android Design - Text Fields +
  • +
    Downloads
    +
    • +
    • @@ -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 @@ + + + + + + +Android Design - Downloads + + + + + + + + + +

    + +
    Android Design
    + +
    + + + +
    + + +
    +
    +

    Downloads

    +
    +
    + Previous + Next +
    +
    + + + + +
    +
    + +

    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.

    + +
    +
    + +

    + Download All +

    + +
    +
    + +

    Stencils and Sources

    + +
    +
    + +

    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.

    + +
    +
    + + + +
    +
    + +

    + Adobe® Fireworks® PNG Stencil + Omni® OmniGraffle® Stencil + Adobe® Photoshop® Sources +

    + +
    +
    + +

    Action Bar Icon Pack

    + +
    +
    + +

    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.

    + +
    +
    + + + +
    +
    + +

    + Action Bar Icon Pack +

    + +
    +
    + +

    Style

    + +
    +
    + +

    Roboto

    +

    Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the +requirements of UI and high-resolution screens.

    +

    More on Roboto

    + +
    +
    + + + +
    +
    + +

    + Roboto + Specimen Book +

    + +
    +
    + +
    +
    + +

    Color

    +

    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.

    +

    More on Color

    + +
    +
    + + + +
    +
    + +

    + Color Swatches +

    + +
    +
    + + + + +
    +
     
    +
    + Previous + Next +
    +
    + +
    + +
    + +
    + + + +

    + Site Terms of Service – + Privacy Policy – + Brand Guidelines +

    + +
    +
    + + + + + + + + + + diff --git a/docs/html/design/get-started/creative-vision.html b/docs/html/design/get-started/creative-vision.html index 11783c465259c..154f8d08a785a 100644 --- a/docs/html/design/get-started/creative-vision.html +++ b/docs/html/design/get-started/creative-vision.html @@ -80,6 +80,10 @@ Android Design - Creative Vision +
  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/get-started/principles.html b/docs/html/design/get-started/principles.html index 0d9ef2031cd43..f10a90dd68b24 100644 --- a/docs/html/design/get-started/principles.html +++ b/docs/html/design/get-started/principles.html @@ -80,6 +80,10 @@ Android Design - Design Principles +
  • +
    Downloads
    +
    • +
    • @@ -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
    -

    Make Me Amazing

    +

    Make Me Amazing

    diff --git a/docs/html/design/get-started/ui-overview.html b/docs/html/design/get-started/ui-overview.html index bd5ff9c84bac5..a4881d5072a1d 100644 --- a/docs/html/design/get-started/ui-overview.html +++ b/docs/html/design/get-started/ui-overview.html @@ -80,6 +80,10 @@ Android Design - UI Overview +
  • +
    Downloads
    +
    • +
    • @@ -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 +

  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/patterns/actionbar.html b/docs/html/design/patterns/actionbar.html index 911c549df7db1..1566d047f3be6 100644 --- a/docs/html/design/patterns/actionbar.html +++ b/docs/html/design/patterns/actionbar.html @@ -80,6 +80,10 @@ Android Design - Action Bar +
  • +
    Downloads
    +
    • +
    • @@ -118,7 +122,8 @@ app.

    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.

    -Download the Action Bar Icon -Pack +Download the Action Bar Icon Pack

    @@ -436,7 +443,8 @@ sharing options.

    The Gallery app's share action provider with extended spinner for additional sharing options.
    -

    Action Bar Checklist

    +

    Action Bar Checklist

    +

    When planning your split action bars, ask yourself questions like these:

    How important is view navigation to the task?

    If view navigation is very important to your app, use tabs (for fastest view-switching) or spinners.

    diff --git a/docs/html/design/patterns/app-structure.html b/docs/html/design/patterns/app-structure.html index fb9205b4bf813..1b48280eaa017 100644 --- a/docs/html/design/patterns/app-structure.html +++ b/docs/html/design/patterns/app-structure.html @@ -80,6 +80,10 @@ Android Design - Application Structure +
  • +
    Downloads
    +
    • +
    • @@ -111,7 +115,8 @@ Android Design - Application Structure
  • 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

    + +
  • +
    Downloads
    +
    • +
    • @@ -110,7 +114,7 @@ Android Design - Backwards Compatibility

    Android 4.0 brings these changes for tablets to the phone platform.

    -

    Adapting Android 4.0 to Older Hardware and Apps

    +

    Adapting Android 4.0 to Older Hardware and Apps

    diff --git a/docs/html/design/patterns/gestures.html b/docs/html/design/patterns/gestures.html index f8585e47a1fb7..c88817f1668d1 100644 --- a/docs/html/design/patterns/gestures.html +++ b/docs/html/design/patterns/gestures.html @@ -80,6 +80,10 @@ Android Design - Gestures +
  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/patterns/index.html b/docs/html/design/patterns/index.html index ff797db14db0e..863baa996baad 100644 --- a/docs/html/design/patterns/index.html +++ b/docs/html/design/patterns/index.html @@ -93,6 +93,10 @@ Android Design - Design Patterns +
  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/patterns/multi-pane-layouts.html b/docs/html/design/patterns/multi-pane-layouts.html index af05e31043dae..7925c9818d86b 100644 --- a/docs/html/design/patterns/multi-pane-layouts.html +++ b/docs/html/design/patterns/multi-pane-layouts.html @@ -80,6 +80,10 @@ Android Design - Multi-pane Layouts +
  • +
    Downloads
    +
    • +
    • @@ -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

    + +
  • +
    Downloads
    +
    • +
    • @@ -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:

    +
  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/patterns/notifications.html b/docs/html/design/patterns/notifications.html index c5045aed9e772..99af4189ee7bf 100644 --- a/docs/html/design/patterns/notifications.html +++ b/docs/html/design/patterns/notifications.html @@ -80,6 +80,10 @@ Android Design - Notifications +
  • +
    Downloads
    +
    • +
    • @@ -173,7 +177,7 @@ develop a widget that they can choose to place on their home screen.

    -

    Design Guidelines

    +

    Design Guidelines

    @@ -269,7 +273,7 @@ currently pending.

  • Use color to distinguish your app from others. Notification icons should generally be monochrome.
    • -

    Interacting With Notifications

    +

    Interacting With Notifications

    diff --git a/docs/html/design/patterns/pure-android.html b/docs/html/design/patterns/pure-android.html index 507558a0f7326..f5a804266d61a 100644 --- a/docs/html/design/patterns/pure-android.html +++ b/docs/html/design/patterns/pure-android.html @@ -80,6 +80,10 @@ Android Design - Pure Android +
  • +
    Downloads
    +
    • +
    • @@ -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 +

  • +
    Downloads
    +
    • +
    • @@ -180,7 +184,8 @@ selected data items of the same kind.

    -

    Checklist

    +

    Checklist

    + +
  • +
    Downloads
    +
    • +
    • @@ -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

    + +
  • +
    Downloads
    +
    • +
    • @@ -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.

    -

    Download the swatches

    +

    Download the swatches

    diff --git a/docs/html/design/style/devices-displays.html b/docs/html/design/style/devices-displays.html index 9fba7195615bf..89e087639f135 100644 --- a/docs/html/design/style/devices-displays.html +++ b/docs/html/design/style/devices-displays.html @@ -80,6 +80,10 @@ Android Design - Devices and Displays +
  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/style/iconography.html b/docs/html/design/style/iconography.html index 5d5d200af75e8..96954de80a09a 100644 --- a/docs/html/design/style/iconography.html +++ b/docs/html/design/style/iconography.html @@ -80,6 +80,10 @@ Android Design - Iconography +
  • +
    Downloads
    +
    • +
    • @@ -191,7 +195,7 @@ from above, so that users perceive some depth.

    -

    Action Bar

    +

    Action Bar

    @@ -211,8 +215,7 @@ files for further customization.

    -Download the Action Bar Icon -Pack +Download the Action Bar Icon Pack

    @@ -290,7 +293,7 @@ Disabled: 30% opacity

    -

    Small / Contextual Icons

    +

    Small / Contextual 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 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 +

  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/style/metrics-grids.html b/docs/html/design/style/metrics-grids.html index 17d49372e4053..7bb9dd0ed7abc 100644 --- a/docs/html/design/style/metrics-grids.html +++ b/docs/html/design/style/metrics-grids.html @@ -80,6 +80,10 @@ Android Design - Metrics and Grids +
  • +
    Downloads
    +
    • +
    • @@ -130,7 +134,7 @@ Screen Sizes and Densities Device Dashboard.

    -

    48dp Rhythm

    +

    48dp Rhythm

    Touchable UI components are generally laid out along 48dp units.

    @@ -157,7 +161,7 @@ will be able to reliably and accurately target them with their fingers.

    Mind the gaps

    Spacing between each UI element is 8dp.

    -

    Examples

    +

    Examples

    diff --git a/docs/html/design/style/themes.html b/docs/html/design/style/themes.html index ada974d30ff38..a62997839a3fa 100644 --- a/docs/html/design/style/themes.html +++ b/docs/html/design/style/themes.html @@ -80,6 +80,10 @@ Android Design - Themes +
  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/style/touch-feedback.html b/docs/html/design/style/touch-feedback.html index 0d4983252e728..d1c08f81f7f43 100644 --- a/docs/html/design/style/touch-feedback.html +++ b/docs/html/design/style/touch-feedback.html @@ -80,6 +80,10 @@ Android Design - Touch Feedback +
  • +
    Downloads
    +
    • +
    • diff --git a/docs/html/design/style/typography.html b/docs/html/design/style/typography.html index d3cc76988b4e4..d9b6d4b404dbd 100644 --- a/docs/html/design/style/typography.html +++ b/docs/html/design/style/typography.html @@ -80,6 +80,10 @@ Android Design - Typography +
  • +
    Downloads
    +
    • +
    • @@ -119,8 +123,8 @@ italic weights by default.

    -

    Download Roboto

    -

    Specimen Book

    +

    Download Roboto

    +

    Specimen Book

    diff --git a/docs/html/design/style/writing.html b/docs/html/design/style/writing.html index e5f1ea8a39e84..146ce88c1e26d 100644 --- a/docs/html/design/style/writing.html +++ b/docs/html/design/style/writing.html @@ -132,6 +132,10 @@ Android Design - Writing Style +
  • +
    Downloads
    +
    • +
    • @@ -186,7 +190,7 @@ Android Design - Writing Style -

    Examples

    +

    Examples

    1. Keep it brief. From the setup wizard: