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 | 28 | ||||
| -rw-r--r-- | docs/html/design/patterns/app-structure.jd | 48 | ||||
| -rw-r--r-- | docs/html/design/patterns/buttons.jd | 10 | ||||
| -rw-r--r-- | docs/html/design/patterns/compatibility.jd | 18 | ||||
| -rw-r--r-- | docs/html/design/patterns/confirming-acknowledging.jd | 24 | ||||
| -rw-r--r-- | docs/html/design/patterns/fullscreen.jd | 10 | ||||
| -rw-r--r-- | docs/html/design/patterns/gestures.jd | 22 | ||||
| -rw-r--r-- | docs/html/design/patterns/help.jd | 28 | ||||
| -rw-r--r-- | docs/html/design/patterns/multi-pane-layouts.jd | 24 | ||||
| -rw-r--r-- | docs/html/design/patterns/navigation-drawer.jd | 30 | ||||
| -rw-r--r-- | docs/html/design/patterns/new.jd | 49 | ||||
| -rw-r--r-- | docs/html/design/patterns/notifications_k.jd | 40 | ||||
| -rw-r--r-- | docs/html/design/patterns/pure-android.jd | 37 | ||||
| -rw-r--r-- | docs/html/design/patterns/selection.jd | 18 | ||||
| -rw-r--r-- | docs/html/design/patterns/settings.jd | 128 | ||||
| -rw-r--r-- | docs/html/design/patterns/swipe-views.jd | 6 | ||||
| -rw-r--r-- | docs/html/design/patterns/widgets.jd | 20 |
18 files changed, 275 insertions, 273 deletions
diff --git a/docs/html/design/patterns/accessibility.jd b/docs/html/design/patterns/accessibility.jd index b968237..b910294 100644 --- a/docs/html/design/patterns/accessibility.jd +++ b/docs/html/design/patterns/accessibility.jd @@ -48,11 +48,11 @@ page.metaDescription=Design an app that's universally accessible to people with <h4>Label visual UI elements meaningfully</h4> <p>In your wireframes, <a href="{@docRoot}guide/topics/ui/accessibility/apps.html#label-ui">label functional UI components</a> that have no visible text. Those components might be buttons, icons, tabs with icons, and icons with state (like stars). Developers can use the <code><a href="{@docRoot}guide/topics/ui/accessibility/apps.html#label-ui">contentDescription</a></code> attribute to set the label.</p> -<div class ="layout-content-row"> - <div class="layout-content-col span-8"> +<div class ="cols"> + <div class="col-8"> <img src="{@docRoot}design/media/accessibility_contentdesc.png"> </div> - <div class="layout-content-col span-5 with-callouts"> + <div class="col-5 with-callouts"> <ol> <li class="value-1">group</li> <li class="value-2">all contacts</li> @@ -95,4 +95,4 @@ page.metaDescription=Design an app that's universally accessible to people with <li>Provide alternatives to affordances that time out</li> <li>Use standard framework controls or enable TalkBack for custom controls</li> <li>Try it out yourself</li> -</ul>
\ No newline at end of file +</ul> diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd index 5467722..ef02c53 100644 --- a/docs/html/design/patterns/actionbar.jd +++ b/docs/html/design/patterns/actionbar.jd @@ -34,8 +34,8 @@ page.metaDescription=The Action bar is an essential design element for all apps. <p>The action bar is split into four different functional areas that apply to most apps.</p> <img src="{@docRoot}design/media/action_bar_basics.png"> -<div class="layout-content-row"> - <div class="layout-content-col span-7 with-callouts"> +<div class="cols"> + <div class="col-7 with-callouts"> <ol> <li class="value-1"><h4>App icon</h4> @@ -57,7 +57,7 @@ Up navigation, see the <a href="{@docRoot}design/patterns/navigation.html">Navig </ol> </div> - <div class="layout-content-col span-6 with-callouts"> + <div class="col-6 with-callouts"> <ol> <li class="value-2"><h4>View control</h4> @@ -107,8 +107,8 @@ content across multiple bars located below the main action bar or at the bottom <h2 id="considerations-split-action-bars">Layout Considerations for Split Action Bars</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-8 with-callouts"> +<div class="cols"> + <div class="col-8 with-callouts"> <p>When splitting up content across multiple action bars, you generally have three possible locations for action bar content:</p> @@ -124,7 +124,7 @@ the top bar.</p> <p>To display actions and, if necessary, the action overflow, use the bottom bar.</p> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <img src="{@docRoot}design/media/action_bar_pattern_considerations.png"> @@ -144,8 +144,8 @@ action overflow. The action bar should show only those actions that are availabl <p>For guidance on prioritizing actions, use the FIT scheme.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <p><strong>F — Frequent</strong></p> <ul> @@ -155,7 +155,7 @@ action overflow. The action bar should show only those actions that are availabl </ul> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <p><strong>I — Important</strong></p> <ul> @@ -164,7 +164,7 @@ action overflow. The action bar should show only those actions that are availabl </ul> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <p><strong>T — Typical</strong></p> <ul> @@ -194,8 +194,8 @@ files for further customization. </p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Action overflow</h4> <p>The action overflow in the action bar provides access to your app's less frequently used actions. @@ -203,7 +203,7 @@ The overflow icon only appears on phones that have no menu hardware keys. Phones display the action overflow when the user presses the key.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/action_bar_pattern_overflow.png"> <div class="figure-caption"> @@ -285,4 +285,4 @@ actions exceeds the capacity of the main action bar, display them separately in <p>Sometimes it is important to display contextual information for your app that's always visible. Examples are the number of unread messages in a messaging inbox view or the Now Playing information in a music player. Carefully plan which important information you would like to display and -structure your action bars accordingly.</p>
\ No newline at end of file +structure your action bars accordingly.</p> diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd index 404dd4d..4f3106e 100644 --- a/docs/html/design/patterns/app-structure.jd +++ b/docs/html/design/patterns/app-structure.jd @@ -25,13 +25,13 @@ page.tags=navigation,layout,tablet <p>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.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-9"> +<div class="cols"> + <div class="col-9"> <img src="{@docRoot}design/media/app_structure_overview.png"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <h4>Top level views</h4> <p>The top level of the app typically consists of the different views that your app supports. The views @@ -57,8 +57,8 @@ visitors alike.</p> <p>Ask yourself: "What are my typical users most likely going to want to do in my app?", and structure your start screen experience accordingly.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Put content forward</h4> <p>Many apps focus on the content display. Avoid navigation-only screens and instead let people get to @@ -66,7 +66,7 @@ the meat of your app right away by making content the centerpiece of your start layouts that are visually engaging and appropriate for the data type and screen size.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/app_structure_market.png"> <div class="figure-caption"> @@ -80,8 +80,8 @@ layouts that are visually engaging and appropriate for the data type and screen <h4>Set up action bars for navigation and actions</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <p>All screens in your app should display action bars to provide consistent navigation and surface important actions.</p> @@ -96,7 +96,7 @@ important actions.</p> </ul> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/app_structure_gmail.png"> <div class="figure-caption"> @@ -111,8 +111,8 @@ important actions.</p> <p>The top level communicates your app’s capabilities by introducing the user to the major functional areas. In many cases the top level will consist of multiple views, and you need to make sure that the user can navigate between them efficiently. Android supports a number of view controls for this task. Use the control that best matches your app's navigation needs:</p> <h4>Fixed tabs</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p><em>Fixed tabs</em> display top-level views concurrently and make it easy to explore and switch between them. They are always visible on the screen, and can't be moved out of the way like scrollable tabs. <em>Fixed tabs</em> should always allow the user to navigate between the views by swiping left or right on the content area.</p> <p><strong>Use tabs if</strong>:</p> <ul> @@ -122,7 +122,7 @@ important actions.</p> </ul> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/app_structure_default_tabs.png"> <div class="figure-caption"> @@ -132,8 +132,8 @@ important actions.</p> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Spinners</h4> <p>A <em>spinner</em> is a drop-down menu that allows users to switch between views of your app. </p> @@ -144,7 +144,7 @@ important actions.</p> </ul> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/app_structure_spinner.png"> <div class="figure-caption"> @@ -155,8 +155,8 @@ important actions.</p> </div> <h4>Navigation drawers</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p>A <em>navigation drawer</em> is a slide-out menu that allows users to switch between views of your app. It can hold a large number of items and is accessible from anywhere in your app. Navigation drawers show your app's top-level views, but can also provide navigation to lower-level screens. This makes them particularly suitable for complex apps.</p> <p><strong>Use navigation drawers if</strong>:</p> @@ -169,7 +169,7 @@ important actions.</p> </ul> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/app_structure_drawer.png"> <div class="figure-caption"> Navigation drawer from the Keep app. @@ -196,8 +196,8 @@ experience than to an explicit navigation step.</p> <div class="vspace size-1"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <p>If the categories are familiar, predictable, or closely related, use scrolling tabs (where not all items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to @@ -210,7 +210,7 @@ minimize navigational effort. Rule of thumb: no more than 5–7 tabs.</p> </div> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <p>If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are in view at the same time.</p> @@ -257,14 +257,14 @@ design guide.</p> <p>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.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <h4>Layout</h4> <p>Consider the activities people will perform in the detail view and arrange the layout accordingly.</p> </div> - <div class="layout-content-col span-9"> + <div class="col-9"> <img src="{@docRoot}design/media/app_structure_people_detail.png"> diff --git a/docs/html/design/patterns/buttons.jd b/docs/html/design/patterns/buttons.jd index 2d65b2d..085acec 100644 --- a/docs/html/design/patterns/buttons.jd +++ b/docs/html/design/patterns/buttons.jd @@ -19,13 +19,13 @@ page.tags=buttons back into view. </p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Lean Back</h4> <p>Touch the screen anywhere to bring back system bars. </p> <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;"> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4>Immersive</h4> <p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> @@ -69,8 +69,8 @@ page.tags=buttons interrupted by accidental touches and swipes. </p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px"> </div> diff --git a/docs/html/design/patterns/compatibility.jd b/docs/html/design/patterns/compatibility.jd index dfc52c0..2905676 100644 --- a/docs/html/design/patterns/compatibility.jd +++ b/docs/html/design/patterns/compatibility.jd @@ -20,8 +20,8 @@ page.metaDescription=Notes on how Android 4.x adapts UI designed for older hardw <h2 id="older-hardware">Adapting Android 4.0 to Older Hardware and Apps</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Phones with virtual navigation controls</h4> <p>Android apps written for Android 3.0 and later display actions in the action bar. Actions that don't @@ -30,15 +30,15 @@ action overflow.</p> <p>Users access the action overflow by touching it in the action bar.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/compatibility_virtual_nav.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Phones with physical navigation keys</h4> <p>Android phones with traditional navigation hardware keys don't display the virtual navigation bar at @@ -46,15 +46,15 @@ the bottom of the screen. Instead, the action overflow is available from the men resulting actions popup has the same style as in the previous example, but is displayed at the bottom of the screen.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/compatibility_physical_buttons.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Legacy apps on phones with virtual navigation controls</h4> <p>When you run an app that was built for Android 2.3 or earlier on a phone with virtual navigation @@ -62,7 +62,7 @@ controls, an action overflow control appears at the right side of the virtual na can touch the control to display the app's actions in the traditional Android menu styling.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/compatibility_legacy_apps.png"> diff --git a/docs/html/design/patterns/confirming-acknowledging.jd b/docs/html/design/patterns/confirming-acknowledging.jd index d39d32d..201e5a0 100644 --- a/docs/html/design/patterns/confirming-acknowledging.jd +++ b/docs/html/design/patterns/confirming-acknowledging.jd @@ -4,12 +4,12 @@ page.tags=dialog,toast,notification <p>In some situations, when a user invokes an action in your app, it's a good idea to <em>confirm</em> or <em>acknowledge</em> that action through text.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/confirm_ack_confirming.png"> <p><strong>Confirming</strong> is asking the user to verify that they truly want to proceed with an action they just invoked. In some cases, the confirmation is presented along with a warning or critical information related to the action that they need to consider.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/confirm_ack_acknowledge.png"> <p><strong>Acknowledging</strong> is displaying text to let the user know that the action they just invoked has been completed. This removes uncertainty about implicit operations that the system is taking. In some cases, the acknowledgment is presented along with an option to undo the action.</p> </div> @@ -22,14 +22,14 @@ page.tags=dialog,toast,notification <img src="{@docRoot}design/media/confirm_ack_flowchart.png"> <h2>Confirming</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Example: Google Play Books</h4> <img src="{@docRoot}design/media/confirm_ack_ex_books.png"> <p>In this example, the user has requested to delete a book from their Google Play library. An <a href="{@docRoot}design/building-blocks/dialogs.html#alerts">alert</a> appears to confirm this action because it's important to understand that the book will no longer be available from any device.</p> <p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <h4>Example: Android Beam</h4> <img src="{@docRoot}design/media/confirm_ack_ex_beam.png"> <p>Confirmations don't necessarily have to be presented in an alert with two buttons. After initiating Android Beam, the user is prompted to touch the content to be shared (in this example, it's a photo). If they decide not to proceed, they simply move their phone away.</p> @@ -37,15 +37,15 @@ page.tags=dialog,toast,notification </div> <h2>Acknowledging</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Example: Abandoned Gmail draft saved</h4> <img src="{@docRoot}design/media/confirm_ack_ex_draftsave.png"> <p>In this example, if the user navigates back or up from the Gmail compose screen, something possibly unexpected happens: the current draft is automatically saved. An acknowledgment in the form of a toast makes that apparent. It fades after a few seconds.</p> <p>Undo isn't appropriate here because saving was initiated by the app, not the user. And it's quick and easy to resume composing the message by navigating to the list of drafts.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4>Example: Gmail conversation deleted</h4> <img src="{@docRoot}design/media/confirm_ack_draft_deleted.png"> <p>After the user deletes a conversation from the list in Gmail, an acknowledgment appears with an undo option. The acknowledgment remains until the user takes an unrelated action, such as scrolling the list.</p> @@ -53,14 +53,14 @@ page.tags=dialog,toast,notification </div> <h2>No Confirmation or Acknowledgment</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Example: +1'ing</h4> <img style="padding: 33px 0 30px;" src="{@docRoot}design/media/confirm_ack_ex_plus1.png"> <p><strong>Confirmation is unnecessary</strong>. If the user +1'd by accident, it's not a big deal. They can just touch the button again to undo the action.</p> <p><strong>Acknowledgment is unnecessary</strong>. The user will see the +1 button bounce and turn red. That's a very clear signal.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <h4>Example: Removing an app from the Home Screen</h4> <img src="{@docRoot}design/media/confirm_ack_ex_removeapp.png"> <p><strong>Confirmation is unnecessary</strong>. This is a deliberate action: the user must drag and drop an item onto a relatively large and isolated target. Therefore, accidents are highly unlikely. But if the user regrets the decision, it only takes a few seconds to bring it back again.</p> diff --git a/docs/html/design/patterns/fullscreen.jd b/docs/html/design/patterns/fullscreen.jd index 624d44c..1c95f21 100644 --- a/docs/html/design/patterns/fullscreen.jd +++ b/docs/html/design/patterns/fullscreen.jd @@ -19,13 +19,13 @@ page.tags=full screen,immersive,leanback back into view. </p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Lean Back</h4> <p>Touch the screen anywhere to bring back system bars. </p> <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;"> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4>Immersive</h4> <p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> @@ -69,8 +69,8 @@ page.tags=full screen,immersive,leanback interrupted by accidental touches and swipes. </p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px"> </div> diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd index ada0735..b471ee3 100644 --- a/docs/html/design/patterns/gestures.jd +++ b/docs/html/design/patterns/gestures.jd @@ -15,9 +15,9 @@ following table shows the core gesture set that is supported in Android.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> +<div class="cols"> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/gesture_touch.png"> <h4>Touch</h4> <p>Triggers the default functionality for a given item.</p> @@ -28,7 +28,7 @@ following table shows the core gesture set that is supported in Android.</p> </ul> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/gesture_longtouch.png"> <h4>Long press</h4> <p>Enters data selection mode. Allows you to select one or more items in a view and act upon @@ -40,7 +40,7 @@ following table shows the core gesture set that is supported in Android.</p> </ul> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/gesture_swipe.png"> <h4>Swipe or drag</h4> <p>Scrolls overflowing content, or navigates between views in the same hierarchy. Swipes are @@ -57,9 +57,9 @@ following table shows the core gesture set that is supported in Android.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> +<div class="cols"> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/gesture_drag.png"> <h4>Long press drag</h4> <p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p> @@ -70,7 +70,7 @@ following table shows the core gesture set that is supported in Android.</p> </ul> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/gesture_doubletouch.png"> <h4>Double touch </h4> <p> Scales up a standard amount around the target with each repeated gesture until reaching @@ -84,7 +84,7 @@ following table shows the core gesture set that is supported in Android.</p> </ul> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/gesture_doubletouchdrag.png"> <h4>Double touch drag</h4> <p>Scales content by pushing away or pulling closer, centered around gesture.</p> @@ -106,9 +106,9 @@ following table shows the core gesture set that is supported in Android.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> +<div class="cols"> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/gesture_pinchopen.png" style="margin-left:-4px"> <h4>Pinch open</h4> <p>Zooms into content.</p> @@ -119,7 +119,7 @@ following table shows the core gesture set that is supported in Android.</p> </ul> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/gesture_pinchclose.png"> <h4>Pinch close</h4> <p>Zooms out of content.</p> diff --git a/docs/html/design/patterns/help.jd b/docs/html/design/patterns/help.jd index 97949e2..6ef155a 100644 --- a/docs/html/design/patterns/help.jd +++ b/docs/html/design/patterns/help.jd @@ -21,8 +21,8 @@ page.tags=settings,preferences <em>To teach high value functionality that's only available through a gesture.</em></p> <p>For example, we use help content to teach users how to place apps on their Home screen. This functionality is:</p> -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <ul> <li><strong>High value</strong> <p style="margin-top:0;">Without it, users wouldn't be able to customize the most frequently visited Android screen to meet their needs.</p></li> @@ -31,7 +31,7 @@ page.tags=settings,preferences </ul> <p>However, not all high value gesture-only functionality needs a tutorial. For example, don't teach users how to scroll content. They already know how because it's a fundamental, system-wide interaction.</p> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <img src="{@docRoot}design/media/help_cling.png"> <div class="figure-caption"> The first time each user visits the All Apps screen, a semi-transparent overlay appears to teach an important gesture. @@ -44,11 +44,11 @@ page.tags=settings,preferences <p>On every screen in your app, offer help in the <a href="{@docRoot}design/patterns/actionbar.html">action overflow</a>. Always make it the very last item in the menu and label it "Help".</p> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <img src="{@docRoot}design/media/help_overflow.png"> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/help_solo_overflow.png"> <div class="figure-caption"> Even if your screen has no other action overflow items, "Help" should appear there and not be promoted to the action bar. @@ -67,28 +67,28 @@ page.tags=settings,preferences <p>When someone chooses "Help":</p> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <img src="{@docRoot}design/media/help_dont.png"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/help_better.png"> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <img src="{@docRoot}design/media/help_evenbetter.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <h4 class="do-dont-label bad">Don't</h4> <p>Present a dialog asking them to choose between help and other options.</p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <h4 class="do-dont-label good">Better</h4> <p>Immediately launch a web browser with help content. Place other options in a footer.</p> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <h4 class="do-dont-label good">Even Better</h4> <p>Build a help screen in your app and offer other options in the action bar. For example, you could let users contact you with questions or feedback through an action button. The action overflow is the ideal place for non-help information that users rarely need.</p> <p>This requires more development work than launching a web browser, but it's a nicer experience for users because they don't leave your app to get the help they need and doesn't require a network connection.</p> diff --git a/docs/html/design/patterns/multi-pane-layouts.jd b/docs/html/design/patterns/multi-pane-layouts.jd index dbe7d01..c9d3d84 100644 --- a/docs/html/design/patterns/multi-pane-layouts.jd +++ b/docs/html/design/patterns/multi-pane-layouts.jd @@ -51,13 +51,13 @@ relationship between the panels.</p> one orientation, try not to 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.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <img src="{@docRoot}design/media/multipane_stretch.png"> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <h4>Stretch/compress</h4> <p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p> @@ -65,13 +65,13 @@ you can use to adjust the layout after orientation change while keeping function </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <img src="{@docRoot}design/media/multipane_stack.png"> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <h4>Stack</h4> <p>Rearrange the panels on your screen to match the orientation.</p> @@ -79,13 +79,13 @@ you can use to adjust the layout after orientation change while keeping function </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <img src="{@docRoot}design/media/multipane_expand.png"> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <h4>Expand/collapse</h4> <p>When the device rotates, collapse the left pane view to only show the most important information.</p> @@ -93,13 +93,13 @@ you can use to adjust the layout after orientation change while keeping function </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <img src="{@docRoot}design/media/multipane_show.png"> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <h4>Show/hide</h4> <p>If your screen cannot accommodate the compound view on rotation show the right pane in full screen view on rotation to portrait. Use the Up icon in action bar to show the parent screen.</p> diff --git a/docs/html/design/patterns/navigation-drawer.jd b/docs/html/design/patterns/navigation-drawer.jd index dbac459..b359470 100644 --- a/docs/html/design/patterns/navigation-drawer.jd +++ b/docs/html/design/patterns/navigation-drawer.jd @@ -112,8 +112,8 @@ likely visit often and make those navigation hubs as well.</p> screens as well as important lower-level screens. </div> -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <p> To facilitate access to the navigation drawer on navigation hubs, all screens that correspond to an entry in your navigation drawer should show the navigation drawer indicator next to the application icon in the action bar. Touching the app icon causes the navigation @@ -121,7 +121,7 @@ likely visit often and make those navigation hubs as well.</p> <p> All other lower-level screens show the traditional Up indicator next to the application icon. The drawer is still accessible with an edge-swipe, but is not featured in the action bar.</p> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <img src="{@docRoot}design/media/navigation_drawer_indicator_big.png"> <div class="figure-caption"> App icon with navigation drawer indicator. @@ -135,8 +135,8 @@ likely visit often and make those navigation hubs as well.</p> <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. -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <h4>Titles, icons, and counters</h4> <p> You can structure navigation targets by adding titles. The titles are not interactive, but just organize navigation targets into functional topics. If you have many navigation @@ -144,7 +144,7 @@ hubs of your app as list items inside the navigation drawer - one item per row. <p> Navigation targets can have optional leading icons as well as trailing counters. Use the counters to inform users about a changed state of data in the corresponding view.</p> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <img src="{@docRoot}design/media/navigation_drawer_titles_icons.png"> <div class="figure-caption"> Use titles and icons to organize your drawer. @@ -152,15 +152,15 @@ hubs of your app as list items inside the navigation drawer - one item per row. </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <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. </div> </div> - <div class="layout-content-col span-5"> + <div class="col-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. @@ -201,27 +201,27 @@ is fully expanded:</p> </div> <h4>Actions</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/navigation_drawer_nav_and_actions.png"> <div class="figure-caption"> Keep actions on the right side of the action bar and in the overflow </div> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <p> Don’t place actions in the navigation drawer. Actions belong in the action bar, and the user expects to see them there. Keep in mind that not all applications use the navigation drawer pattern. It may be tempting to expose all your app’s capabilities in a single place, but keep the bigger picture in mind. Place your actions where all apps display them.</p> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p> This also applies to common navigation targets, such as access to Help or the app’s Settings. As per style guide convention Help and Settings are always located in the action overflow.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/navigation_drawer_settings_help.png"> <div class="figure-caption"> Keep Help and Settings in the overflow. diff --git a/docs/html/design/patterns/new.jd b/docs/html/design/patterns/new.jd index 1523cea..47b05b2 100644 --- a/docs/html/design/patterns/new.jd +++ b/docs/html/design/patterns/new.jd @@ -1,5 +1,6 @@ page.title=New in Android page.tags=KitKat,Android 4.4 +page.image=images/cards/design-new-in-android_2x.jpg @jd:body @@ -92,8 +93,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <h3> Gestures </h3> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p> The updated <a href="{@docRoot}design/patterns/gestures.html">Gestures</a> page covers new and updated gestures introduced in Android KitKat: @@ -101,7 +102,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> gestures are used for changing the viewing size of content. </p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/gesture_doubletouch.png"> <img src="{@docRoot}design/media/gesture_doubletouchdrag.png"> </div> @@ -111,8 +112,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <h2>Android 4.1 Jelly Bean</h2> <h4>Notifications</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <p>Notifications have received some notable enhancements in Android 4.1:</p> <ul> <li>Users can act on notifications immediately from the drawer</li> @@ -126,7 +127,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> href="{@docRoot}design/patterns/notifications.html">Notifications</a> page for more details.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/new_notifications.png"> </div> </div> @@ -134,8 +135,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <div class="vspace size-2"> </div> <h4>Resizable Application Widgets</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <p>Widgets are an essential aspect of home screen customization, allowing "at-a-glance" views of an app's most important data and functionality right from the user's home screen. Android 4.1 introduces improved App Widgets that can @@ -152,7 +153,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> href="{@docRoot}design/patterns/widgets.html">Application Widgets</a> page has useful details about widget types, limitations, and design considerations.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/new_widgets.png"> </div> </div> @@ -160,8 +161,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <div class="vspace size-2"> </div> <h4>Accessibility</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-11"> +<div class="cols"> + <div class="col-11"> <p>One of Android's missions is to organize the world's information and make it universally accessible and useful. Our mission applies to all users-including people with disabilities such as visual impairment, color @@ -183,7 +184,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <a href="{@docRoot}design/patterns/widgets.html">Widgets</a> page has useful details about widget types, limitations, and design considerations.</p> </div> - <div class="layout-content-col span-2"> + <div class="col-2"> <img src="{@docRoot}design/media/new_accessibility.png"> </div> </div> @@ -191,8 +192,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <h2>Android 4.0 Ice Cream Sandwich</h2> <h4>Navigation bar</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <p>Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a virtual navigation bar that houses the Back, Home and Recents buttons. Read the @@ -200,7 +201,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> pattern to learn how the OS adapts to phones with hardware buttons and how pre-Android 3.0 apps that rely on menu keys are supported.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/whats_new_nav_bar.png"> </div> </div> @@ -208,13 +209,13 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <div class="vspace size-2"> </div> <h4>Action bar</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <p>The action bar is the most important structural element of an Android app. It provides consistent navigation across the platform and allows your app to surface actions.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/whats_new_action_bar.png"> </div> </div> @@ -222,14 +223,14 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <div class="vspace size-2"> </div> <h4>Multi-pane layouts</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <p>Creating apps that scale well across different form factors and screen sizes is important in the Android world. Multi-pane layouts allow you to combine different activities that show separately on smaller devices into richer compound views for tablets.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/whats_new_multipanel.png"> </div> </div> @@ -238,13 +239,13 @@ lockscreen, priority notifications, and cloud-synced notifications.</p> <h4>Selection</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <p>The long press gesture which was traditionally used to show contextual actions for objects is now used for data selection. When selecting data, contextual action bars allow you to surface actions.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/whats_new_multiselect.png"> </div> </div> diff --git a/docs/html/design/patterns/notifications_k.jd b/docs/html/design/patterns/notifications_k.jd index c8ef50b..01a12a7 100644 --- a/docs/html/design/patterns/notifications_k.jd +++ b/docs/html/design/patterns/notifications_k.jd @@ -22,8 +22,8 @@ paying attention.</p> <h2>Anatomy of a notification</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Base Layout</h4> <p>At a minimum, all notifications consist of a base layout, including:</p> <ul> @@ -34,7 +34,7 @@ paying attention.</p> image is shown for the main icon</li> </ul> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/notifications_pattern_anatomy.png"> <div class="figure-caption"> Base layout of a notification @@ -54,8 +54,8 @@ for you to re-use in your application.</p> <img src="{@docRoot}design/media/notifications_pattern_expandable.png"> <h4>Actions</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p>Android supports optional actions that are displayed at the bottom of the notification. With actions, users can handle the most common tasks for a particular notification from within the notification shade without having to @@ -80,7 +80,7 @@ displaying</li> or "Open")</li> </ul> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/notifications_pattern_two_actions.png"> <div class="figure-caption"> Calendar reminder notification with two actions @@ -96,11 +96,11 @@ otherwise hidden, you must make sure that any action a user can invoke from a notification is available from within the associated application as well.</p> <h2>Design guidelines</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/notifications_pattern_personal.png"> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <h4>Make it personal</h4> <p>For notifications of items sent by another user (such as a message or status update), include that person's image.</p> @@ -264,8 +264,8 @@ other people.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <h4>When not to display a notification</h4> <p>There are however many other cases where notifications should not be @@ -312,20 +312,20 @@ develop a widget that they can choose to place on their home screen.</p> </ul> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/notifications_pattern_social_fail.png"> </div> </div> <h2 id="interacting-with-notifications">Interacting With Notifications</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/notifications_pattern_phone_icons.png"> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <p>Notifications are indicated by icons in the notification area and can be accessed by opening the notification drawer.</p> @@ -337,8 +337,8 @@ removes it from the drawer.</p> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p><h4>Ongoing notifications</h4> <p>Ongoing notifications keep users informed about an ongoing process in the @@ -349,15 +349,15 @@ downloading a file, or encoding a video. Ongoing notifications cannot be manually removed from the notification drawer.</p></p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-12"> +<div class="cols"> + <div class="col-12"> <h4>Dialogs and toasts are for feedback not notification</h4> <p>Your app should not create a dialog or toast if it is not currently on screen. Dialogs and Toasts should only be displayed as the immediate response diff --git a/docs/html/design/patterns/pure-android.jd b/docs/html/design/patterns/pure-android.jd index a0f672e..e617711 100644 --- a/docs/html/design/patterns/pure-android.jd +++ b/docs/html/design/patterns/pure-android.jd @@ -1,4 +1,5 @@ page.title=Pure Android +page.image=images/cards/design-pure-android_2x.png @jd:body <p>Most developers want to distribute their apps on multiple platforms. As you plan your app for @@ -10,8 +11,8 @@ guidelines to avoid the most common traps and pitfalls.</p> <div class="vspace size-1"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Don't mimic UI elements from other platforms</h4> <p>Platforms typically provide a carefully designed set of UI elements that are themed in a very @@ -28,7 +29,7 @@ elements, customize carefully according to your specific branding - and not acco conventions of a different platform.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/migrating_ui_elements.png"> <div class="figure-caption"> @@ -40,8 +41,8 @@ conventions of a different platform.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Don't carry over platform-specific icons</h4> <p>Platforms typically provide sets of icons for common functionality, such as sharing, creating a new @@ -52,7 +53,7 @@ counterparts.</p> <a href="{@docRoot}design/downloads/index.html">Downloads</a> page.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/migrating_icons.png"> <div class="figure-caption"> @@ -64,8 +65,8 @@ counterparts.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Don't use bottom tab bars</h4> <p>Other platforms use the bottom tab bar to switch between the app's views. Per platform convention, @@ -77,7 +78,7 @@ platform and to avoid confusion between actions and view switching on Android.</ <a href="{@docRoot}design/patterns/actionbar.html">Action Bars</a>.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/migrating_ios_dialers.png"> <div class="figure-caption"> @@ -87,8 +88,8 @@ platform and to avoid confusion between actions and view switching on Android.</ </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Don't hardcode links to other apps</h4> <p>In some cases you might want your app to take advantage of another app's feature set. For @@ -101,7 +102,7 @@ Action Provider</em> in your action bar to provide faster access to the user's m sharing target.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/migrating_intents.png"> <div class="figure-caption"> @@ -114,8 +115,8 @@ sharing target.</p> <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Don't use labeled back buttons on action bars</h4> <p>Other platforms use an explicit back button with label to allow the user to navigate up the @@ -125,7 +126,7 @@ please review the <a href="{@docRoot}design/patterns/navigation.html">Navigation <p>Follow this guideline to provide a consistent navigation experience across the platform.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/migrating_ios_galleries.png"> <div class="figure-caption"> @@ -135,8 +136,8 @@ please review the <a href="{@docRoot}design/patterns/navigation.html">Navigation </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Don't use right-pointing carets on line items</h4> <p>A common pattern on other platforms is the display of right-pointing carets on line items that allow @@ -145,7 +146,7 @@ the user to drill deeper into additional content.</p> the platform and in order to not have the user guess as to what the meaning of those carets may be.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/migrating_ios_settings.png"> <div class="figure-caption"> diff --git a/docs/html/design/patterns/selection.jd b/docs/html/design/patterns/selection.jd index 7ed6dcc..e00f726 100644 --- a/docs/html/design/patterns/selection.jd +++ b/docs/html/design/patterns/selection.jd @@ -23,8 +23,8 @@ handle multi-select and contextual actions in your apps.</p> <div class="vspace size-1"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>What has changed?</h4> <p>In previous versions of Android, the long press gesture was universally used to display contextual @@ -34,7 +34,7 @@ contextual actions and selection management functions for selected data into a n the contextual action bar (CAB).</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/selection_context_menu.png"> <div class="figure-caption"> @@ -52,8 +52,8 @@ is selected. It appears after the user long-presses on a selectable data item.</ <div class="vspace size-1"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p>From here the user can:</p> <ul> @@ -65,15 +65,15 @@ is selected. It appears after the user long-presses on a selectable data item.</ </ul> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/selection_cab_example.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Selecting CAB actions</h4> <p>You can decide which actions and elements appear in the CAB. Use the guidelines in the <a href="actionbar.html">Action Bar @@ -85,7 +85,7 @@ the selection. Actions that apply to a single selected data item don't necessari selected data items of the same kind.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/selection_adjusting_actions.png"> <div class="figure-caption"> diff --git a/docs/html/design/patterns/settings.jd b/docs/html/design/patterns/settings.jd index a24d6c0..9ba837a 100644 --- a/docs/html/design/patterns/settings.jd +++ b/docs/html/design/patterns/settings.jd @@ -64,8 +64,8 @@ meets the bar:</p> <div class="vspace size-3"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5 with-callouts"> +<div class="cols"> + <div class="col-5 with-callouts"> <h4 id="group-settings">If you still have lots of settings, group related settings together</h4> @@ -89,7 +89,7 @@ to a subscreen of related settings. In addition, the items themselves are groupe dividers.</p> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <img src="{@docRoot}design/media/settings_grouping.png"> @@ -101,26 +101,26 @@ on the total number of settings in your app.</p> <div class="vspace size-1"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-2"> +<div class="cols"> + <div class="col-2"> <h4>7 or fewer</h4> </div> - <div class="layout-content-col span-11"> + <div class="col-11"> <p>Don't group them at all. It won't benefit users and will seem like overkill.</p> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-2"> +<div class="cols"> + <div class="col-2"> <h4>8 to 10</h4> </div> - <div class="layout-content-col span-11"> + <div class="col-11"> <p>Try grouping related settings under 1 or 2 section dividers. If you have any "singletons" (settings that don't relate to any other settings and can't be grouped under your section @@ -136,13 +136,13 @@ importance.</li> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-2"> +<div class="cols"> + <div class="col-2"> <h4>11 to 15</h4> </div> - <div class="layout-content-col span-11"> + <div class="col-11"> <p>Same advice as above, but try 2 to 4 section dividers.</p> @@ -161,13 +161,13 @@ setting.</li> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-2"> +<div class="cols"> + <div class="col-2"> <h4>16 or more</h4> </div> - <div class="layout-content-col span-11"> + <div class="col-11"> <p>If you have any instances of 4 or more related settings, group them under a subscreen. Then use the advice suggested above for the reduced list size.</p> @@ -178,66 +178,66 @@ the advice suggested above for the reduced list size.</p> <h2 id="patterns">Design Patterns</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-3"> +<div class="cols"> + <div class="col-3"> <h4>Checkbox</h4> <p>Use this pattern for a setting that is either selected or not selected.</p> </div> - <div class="layout-content-col span-10"> + <div class="col-10"> <img src="{@docRoot}design/media/settings_checkbox.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-3"> +<div class="cols"> + <div class="col-3"> <h4>Multiple choice</h4> <p>Use this pattern for a setting that needs to present a discrete set of options, from which the user can choose only one.</p> </div> - <div class="layout-content-col span-10"> + <div class="col-10"> <img src="{@docRoot}design/media/settings_multiple_choice.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-3"> +<div class="cols"> + <div class="col-3"> <h4>Slider</h4> <p>Use this pattern for a setting where the range of values are not discrete and fall along a continuum.</p> </div> - <div class="layout-content-col span-10"> + <div class="col-10"> <img src="{@docRoot}design/media/settings_slider.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-3"> +<div class="cols"> + <div class="col-3"> <h4>Date/time</h4> <p>Use this pattern for a setting that needs to collect a date and/or time from the user.</p> </div> - <div class="layout-content-col span-10"> + <div class="col-10"> <img src="{@docRoot}design/media/settings_date_time.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-3"> +<div class="cols"> + <div class="col-3"> <h4>Subscreen navigation</h4> <p>Use this pattern for navigating to a subscreen or sequence of subscreens that guide the user @@ -250,15 +250,15 @@ first step in the sequence.</li> </ul> </div> - <div class="layout-content-col span-10"> + <div class="col-10"> <img src="{@docRoot}design/media/settings_subscreen_navigation.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-3"> +<div class="cols"> + <div class="col-3"> <h4>List subscreen</h4> <p>Use this pattern for a setting or category of settings that contains a list of equivalent items. @@ -268,15 +268,15 @@ example, status is reinforced with an icon to the right of the label.) Any actio the list appear in the action bar rather than the list itself.</p> </div> - <div class="layout-content-col span-10"> + <div class="col-10"> <img src="{@docRoot}design/media/settings_list_subscreen.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-3"> +<div class="cols"> + <div class="col-3"> <h4>Master on/off switch</h4> <p>Use this pattern for a category of settings that need a mechanism for turning on or off as a @@ -286,15 +286,15 @@ is turned off, the items in the list disappear, replaced by text that describes empty. If any actions require the switch to be on, they become disabled.</p> </div> - <div class="layout-content-col span-10"> + <div class="col-10"> <img src="{@docRoot}design/media/settings_master_on_off.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-3"> +<div class="cols"> + <div class="col-3"> <div class="vspace size-2"> </div> @@ -303,15 +303,15 @@ However, you should only do this in cases where users rarely need to access the it's initially set up and more often just want to toggle the switch.</p> </div> - <div class="layout-content-col span-10"> + <div class="col-10"> <img src="{@docRoot}design/media/settings_master_on_off_2.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-3"> +<div class="cols"> + <div class="col-3"> <h4>Individual on/off switch</h4> <p>Use this pattern for an individual setting that requires a more elaborate description than can @@ -323,15 +323,15 @@ reflect the current selection.</p> does, we made the status more descriptive than just "On".</p> </div> - <div class="layout-content-col span-10"> + <div class="col-10"> <img src="{@docRoot}design/media/settings_individual_on_off.png"> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-3"> +<div class="cols"> + <div class="col-3"> <h4>Dependency</h4> <p>Use this pattern for a setting that changes availability based on the value of another setting. @@ -344,7 +344,7 @@ master on/off switch so that your main settings screen isn't cluttered by lots o </p> </div> - <div class="layout-content-col span-10"> + <div class="col-10"> <img src="{@docRoot}design/media/settings_dependency.png"> @@ -408,8 +408,8 @@ they'll fit everywhere.</p> it or provide instructions. Starting in Ice Cream Sandwich, we're using secondary text for status. </p> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <div class="do-dont-label bad emulate-content-left-padding">Before</div> @@ -431,7 +431,7 @@ it or provide instructions. Starting in Ice Cream Sandwich, we're using secondar </table> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <div class="do-dont-label good">After</div> @@ -490,8 +490,8 @@ provide a description. Only include one if necessary.</p> <p>The following are examples of changes we made to labels and secondary text in the Settings app in Ice Cream Sandwich.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <div class="do-dont-label bad emulate-content-left-padding">Before</div> @@ -506,7 +506,7 @@ in Ice Cream Sandwich.</p> </table> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <div class="do-dont-label good">After</div> @@ -521,7 +521,7 @@ in Ice Cream Sandwich.</p> </table> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <p>In this checkbox setting, we eliminated the throwaway word "Use" and rephrased the label to be more direct and understandable.</p> @@ -530,8 +530,8 @@ more direct and understandable.</p> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <div class="do-dont-label bad emulate-content-left-padding">Before</div> @@ -553,7 +553,7 @@ more direct and understandable.</p> </table> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <div class="do-dont-label good">After</div> @@ -575,7 +575,7 @@ more direct and understandable.</p> </table> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <p>In this multiple choice setting, we changed the label to a friendlier term and also replaced the description with status. We put some descriptive words around the selected value, "10 @@ -584,8 +584,8 @@ minutes", because on its own, the meaning could be misinterpreted as "sleep for </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <div class="do-dont-label bad emulate-content-left-padding">Before</div> @@ -607,7 +607,7 @@ minutes", because on its own, the meaning could be misinterpreted as "sleep for </table> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <div class="do-dont-label good">After</div> @@ -629,7 +629,7 @@ minutes", because on its own, the meaning could be misinterpreted as "sleep for </table> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <p>This setting navigates to a a sequence of subscreens that allow users to choose a type of screen lock and then set it up. We eliminated the throwaway word "Change" in the label, and @@ -639,8 +639,8 @@ hasn't set up a screen lock, the secondary text says "None".</p> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <div class="do-dont-label bad emulate-content-left-padding">Before</div> @@ -662,7 +662,7 @@ hasn't set up a screen lock, the secondary text says "None".</p> </table> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <div class="do-dont-label good">After</div> @@ -684,7 +684,7 @@ hasn't set up a screen lock, the secondary text says "None".</p> </table> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <p>In this checkbox setting—although it's technical jargon—we kept the "NFC" label because: (1) we couldn't find a clear, concise alternative, and (2) user familiarity with the diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd index af5c9dc..9ee33db 100644 --- a/docs/html/design/patterns/swipe-views.jd +++ b/docs/html/design/patterns/swipe-views.jd @@ -42,8 +42,8 @@ using the swipe gesture to navigate to the next/previous detail view.</p> <h2 id="between-tabs">Swiping Between Tabs</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <div class="framed-nexus5-port-span-5"> <video class="play-on-hover" autoplay> @@ -58,7 +58,7 @@ using the swipe gesture to navigate to the next/previous detail view.</p> </div> </div> - <div class="layout-content-col span-8"> + <div class="col-8"> <p>If your app uses action bar tabs, use swipe to navigate between the different views.</p> <div class="vspace size-1"> </div> diff --git a/docs/html/design/patterns/widgets.jd b/docs/html/design/patterns/widgets.jd index 47acc7b..b149af6 100644 --- a/docs/html/design/patterns/widgets.jd +++ b/docs/html/design/patterns/widgets.jd @@ -21,18 +21,18 @@ page.metaDescription=Design guide to creating widgets that are easy to use and l <div class="vspace size-2"> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h3>Collection widgets</h3> <p>As the name implies, collection widgets specialize in displaying multitude elements of the same type, such as a collection of pictures from a gallery app, a collection of articles from a news app or a collection of emails/messages from a communication app. Collection widgets typically focus on two use cases: browsing the collection, and opening an element of the collection to its detail view for consumption. Collection widgets can scroll vertically.</p> </div> - <div class="layout-content-col span-3"> + <div class="col-3"> <img src="{@docRoot}design/media/widgets_collection_gmail.png"> <div class="figure-caption"> ListView widget </div> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/widgets_collection_bookmarks.png"> <div class="figure-caption"> GridView widget @@ -84,8 +84,8 @@ A music player widget is primarily a control widget, but also keeps the user inf <li>Open application at top level: Tapping on an information element will usually navigate the user to a lower level detail screen. Providing access to the top level of your application provides more navigation flexibility and can replace a dedicated app shortcut that users would otherwise use to navigate to the app from the home screen. Using your application icon as an affordance can also provide your widget with a clear identity in case the data you're displaying is ambiguous.</li> </ul> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h3>Widget resizing</h3> <p>With version 3.1, Android introduced resizable widgets to the platform. Resizing allows users to adjust the height and/or the width of a widget within the constraints of the home panel placement grid. You can decide if your widget is freely resizable or if it is constrained to horizontal or vertical size changes. You do not have to support resizing if your particular widget is inherently fixed-size.</p> <p>Allowing users to resize widgets has important benefits:</p> @@ -95,7 +95,7 @@ A music player widget is primarily a control widget, but also keeps the user inf </ul> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/widgets_resizing01.png"> <div class="figure-caption"> A long press and subsequent release sets resizable widgets into resize mode. Users can use the drag handles or the widget corners to set the desired size. @@ -116,14 +116,14 @@ A music player widget is primarily a control widget, but also keeps the user inf </ul> <h3>Widget configuration</h3> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p>Sometimes widgets need to be setup before they can become useful. Think of an email widget for example, where you need to provide an account before the inbox can be displayed. Or a static photo widget where the user has to assign the picture that is to be displayed from the gallery.</p> <p>Android widgets display their configuration choices right after the widget is dropped onto a home panel. Keep the widget configuration light and don't present more than 2-3 configuration elements. Use dialog-style instead of full-screen activities to present configuration choices and retain the user's context of place, even if doing so requires use of multiple dialogs.</p> <p>Once setup, there typically is not a lot of reason to revisit the setup. Therefore Android widgets do not show a "Setup" or "Configuration" button.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <img src="{@docRoot}design/media/widgets_config.png"> <div class="figure-caption"> After adding a Play widget to a home panel, the widget asks the user to specify the type of media the widget should display. |