diff options
Diffstat (limited to 'docs/html/design/building-blocks')
-rw-r--r-- | docs/html/design/building-blocks/buttons.jd | 99 | ||||
-rw-r--r-- | docs/html/design/building-blocks/dialogs.jd | 186 | ||||
-rw-r--r-- | docs/html/design/building-blocks/grid-lists.jd | 96 | ||||
-rw-r--r-- | docs/html/design/building-blocks/index.jd | 30 | ||||
-rw-r--r-- | docs/html/design/building-blocks/lists.jd | 56 | ||||
-rw-r--r-- | docs/html/design/building-blocks/pickers.jd | 40 | ||||
-rw-r--r-- | docs/html/design/building-blocks/progress.jd | 105 | ||||
-rw-r--r-- | docs/html/design/building-blocks/scrolling.jd | 39 | ||||
-rw-r--r-- | docs/html/design/building-blocks/seek-bars.jd | 45 | ||||
-rw-r--r-- | docs/html/design/building-blocks/spinners.jd | 54 | ||||
-rw-r--r-- | docs/html/design/building-blocks/switches.jd | 64 | ||||
-rw-r--r-- | docs/html/design/building-blocks/tabs.jd | 65 | ||||
-rw-r--r-- | docs/html/design/building-blocks/text-fields.jd | 88 |
13 files changed, 0 insertions, 967 deletions
diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd deleted file mode 100644 index 713574a..0000000 --- a/docs/html/design/building-blocks/buttons.jd +++ /dev/null @@ -1,99 +0,0 @@ -page.title=Buttons -page.tags=button,input -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/buttons.html"> - <div> - <h3>Material Design</h3> - <p>Buttons<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/button.html"> - <div> - <h3>Developer Docs</h3> - <p>Buttons</p> - </div> -</a> - -<p itemprop="description">A button consists of text and/or an image that clearly communicates what action - will occur when the user touches it. A button can have an image, text, or both. -</p> - -<div class="cols" style="margin-top:22px"> - <div class="col-3"> - <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;"> - </div> - <div class="col-3"> - <img src="{@docRoot}design/media/buttons_text.png" style="height:94px;"> - </div> - <div class="col-7"> - <img src="{@docRoot}design/media/buttons_image_and_text.png" style="height:94px;"> - </div> -</div> - -<div class="cols" style="margin-top:0;"> - <div class="col-3"> - <p>An image alone works best when the action can be represented by a symbol that's well understood.</p> - </div> - <div class="col-3"> - <p>Text alone is most appropriate for actions that would be difficult to - represent visually, or are critical to convey in words to avoid any ambiguity.</p> - </div> - <div class="col-7"> - <p> - Both an icon and text is most appropriate when they complement each other: - each carrying its own bit of information, but together making a larger whole. - </p> - - <p> - For example, in a birthday reminder card in Google Now, the button's text - describes the action while its image indicates that the action will be done - in Google+. - </p> - </div> -</div> - -<h3>What about button backgrounds?</h3> - -<div class="cols"> - <div class="col-6"> - <p>For <strong>image-only</strong> buttons, a background isn't necessary because - users are accustomed to interacting with objects.</p> - - <div class="cols" style="margin-left:72px"> - <div class="col-2"> - <div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div> - <img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;"> - </div> - <div class="col-2" style="width:29px;margin-left:10px;"> - <div class="do-dont-label good"><strong>Do</strong></div> - <img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;"> - </div> - </div> - </div> - -<div class="col-7"> -<p> - For buttons <strong>with text</strong>, a background is also usually - unnecessary. To invite users to touch, phrase it as a clear action (e.g. - "Start", "Sign in") and use different color and formatting than the screen's - usual body text. -</p> - -<p> - Use buttons with backgrounds sparingly. Because they have a heavy appearance, - they work best when there's only one or two of them on the screen. They're - most appropriate for: -</p> - -<ul> - <li>A call to action you really want users to pursue (e.g. "Sign up")</li> - <li>A key decision point (e.g. "Accept" / "Decline")</li> - <li>When the user is about to commit a significant action (e.g. "Erase - everything", "Buy now")</li> -</ul> -</div> -</div> - diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd deleted file mode 100644 index 70460ba..0000000 --- a/docs/html/design/building-blocks/dialogs.jd +++ /dev/null @@ -1,186 +0,0 @@ -page.title=Dialogs -page.tags=dialog,alert,popup,toast -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/dialogs.html"> - <div> - <h3>Material Design</h3> - <p>Dialogs<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/dialogs.html"> - <div> - <h3>Developer Docs</h3> - <p>Dialogs</p> - </div> -</a> - -<p itemprop="description">Dialogs prompt the user for decisions or additional information required by the app to continue a -task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the -user to adjust settings or enter text.</p> - -<img src="{@docRoot}design/media/dialogs_main.png"> - -<div class="with-callouts"> - -<ol> - <li> - <h4>Optional title region</h4> - <p>The title introduces the content of your dialog. It can, for example, identify the name of a - setting that the user is about to change, or request a decision.</p> - </li> - <li> - <h4>Content area</h4> - <p>Dialog content varies widely. For settings dialogs, a dialog may contain UI elements such as - sliders, text fields, checkboxes, or radio buttons that allow the user to change app or system - settings. In other cases, such as alerts, the content may consist solely of text that provides - further context for a user decision.</p> - </li> - - <li> - <h4>Action buttons</h4> - <p>Action buttons are typically Cancel and/or OK, with OK indicating the preferred or most likely action. However, if the options consist of specific actions such as Close or Wait rather than a confirmation or cancellation of the action described in the content, then all the buttons should be active verbs. Order actions following these rules:</p> - <ul> - - <li>The dismissive action of a dialog is always on the left. Dismissive actions return to the user to the previous state.</li> - <li>The affirmative actions are on the right. Affirmative actions continue progress toward the user goal that triggered the dialog.</li> - </ul> - </li> -</ol> -</div> - -<img src="{@docRoot}design/media/dialogs_examples.png"> -<div class="figure-caption"> - Samples of typical dialog use in Android. -</div> - -<h2 id="alerts">Alerts</h2> - -<p>Alerts inform the user about a situation that requires their confirmation or acknowledgement before -proceeding. They differ slightly in appearance based upon the severity and impact of the message -conveyed.</p> - -<div class="cols"> - <div class="col-8"> - - <img src="{@docRoot}design/media/dialogs_w_no_title.png"> - - </div> - <div class="col-5"> - -<h4>Alerts without title bars</h4> -<p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed -up succinctly in a sentence or two. The content area should either ask a question (such as "Delete -this conversation?") or make a clear statement whose relationship to the action buttons is obvious.</p> - - </div> -</div> - - -<div class="cols"> - <div class="col-8"> - - <img src="{@docRoot}design/media/dialogs_w_title.png"> - - </div> - <div class="col-5"> - -<h4>Alerts with title bars</h4> -<p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving -potential loss of data, connectivity, extra charges, and so on requires a clear question or -statement (the title) and some additional explanation (in the content area).</p> -<p>Keep the question or statement short: for example, "Erase USB storage?" Avoid apologies. A user -should be able to skip the content completely and still have a clear idea of what choices are -available based on the title and the text of the action buttons.</p> - - </div> -</div> -<p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p> - -<div class="cols"> - <div class="col-4"> - <div class="do-dont-label bad">Don't</div> - <table class="ui-table bad"> - <thead> - <tr> - <th class="label"> - Are you sure? - </th> - </tr> - </thead> - </table> - </div> - <div class="col-4"> - <div class="do-dont-label bad">Don't</div> - <table class="ui-table bad"> - <thead> - <tr> - <th class="label"> - Warning! - </th> - </tr> - </thead> - </table> - </div> - <div class="col-5"> - <div class="do-dont-label good">Do</div> - <table class="ui-table good"> - <thead> - <tr> - <th class="label"> - Erase USB storage? - </th> - </tr> - </thead> - </table> - </div> -</div> - - -<h2 id="popups">Popups</h2> - -<p>Popups are lightweight version of dialogs that require a single selection from the user. Popups -don't have have explicit buttons that accept or cancel the operation. Instead, making a selection -advances the workflow, and simply touching outside the popup dismisses it.</p> - -<img src="{@docRoot}design/media/dialogs_popups_example.png"> - - -<h2 id="toasts">Toasts</h2> - - -<div class="cols"> - <div class="col-6"> - - <div class="vspace size-3"></div> - -<p>Toasts provide lightweight feedback about an operation in a small popup. For example, navigating -away from an email before you send it triggers a "Draft saved" toast to let you know that you can -continue editing later. Toasts automatically disappear after a timeout.</p> - -<a class="notice-designers-material left" - href="http://www.google.com/design/spec/components/snackbars-toasts.html"> - <div> - <h3>Material Design</h3> - <p>Toasts<p> - </div> -</a> - - -<a class="notice-developers left" href="{@docRoot}guide/topics/ui/notifiers/toasts.html"> - <div> - <h3>Developer Docs</h3> - <p>Toasts</p> - </div> -</a> - - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/dialogs_toasts.png"> - - </div> -</div> - diff --git a/docs/html/design/building-blocks/grid-lists.jd b/docs/html/design/building-blocks/grid-lists.jd deleted file mode 100644 index 7a1c652..0000000 --- a/docs/html/design/building-blocks/grid-lists.jd +++ /dev/null @@ -1,96 +0,0 @@ -page.title=Grid Lists -page.tags=gridview,layout,listview -@jd:body - -<img src="{@docRoot}design/media/gridview_overview.png"> - - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/grid-lists.html"> - <div> - <h3>Material Design</h3> - <p>Grid lists<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/gridview.html"> - <div> - <h3>Developer Docs</h3> - <p>Grid View</p> - </div> -</a> - -<p itemprop="description">Grid lists are an alternative to standard list views. They are best suited for showing data sets -that represent themselves through images. In contrast to simple lists, grid lists may scroll either -vertically or horizontally.</p> - - - -<h2 id="generic_grid">Generic Grids</h2> - - -<p>The items in a grid list are arranged in two dimensions, one of which is fixed when scrolling -content. The scrolling direction dictates the ordering of the items within the grid list. Since the -scrolling direction is not deterministic, make it easy for the user to determine the orientation by -cutting off grid items to communicate where the overflow is located.</p> -<p>Avoid creating grid lists that scroll in two dimensions.</p> - - -<div class="cols"> - <div class="col-7"> - - <img src="{@docRoot}design/media/gridview_vertical.png"> - - </div> - <div class="col-6"> - -<h4>Vertical scrolling</h4> -<p>Vertically scrolling grid list items are sorted in traditional western reading direction: -left-to-right and top-down. When displaying the list, cut off the items in the bottom row to -communicate that the user can scroll the list down to show additional items. Be sure to retain this -scheme when the user rotates the screen.</p> - - </div> -</div> - -<div class="cols"> - <div class="col-7"> - - <img src="{@docRoot}design/media/gridview_horizontal.png"> - - </div> - <div class="col-6"> - -<h4>Horizontal scrolling</h4> -<p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically -scrolling lists, the sorting changes slightly to a top-down and left-to-right arrangement. Employ -the same technique of cutting off the items in the rightmost column to indicate the scrolling -direction.</p> -<p>Don't use scrolling tabs as a means to switch views in conjunction with horizontally scrolling grid -lists, because the horizontal gesture for view and content navigation will conflict. If you show -scrolling tabs for view navigation together with a grid list, use vertical grid scrolling for list -navigation.</p> - - </div> -</div> - - -<h2 id="with-labels">Grid List with Labels</h2> - -<p>Use labels to display additional contextual information for your grid list items.</p> - - -<div class="cols"> - <div class="col-7"> - - <img src="{@docRoot}design/media/gridview_style.png"> - - </div> - <div class="col-6"> - -<h4>Style</h4> -<p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to -control the contrast and ensures legibility of the labels while letting the content "shine through".</p> - - </div> -</div> diff --git a/docs/html/design/building-blocks/index.jd b/docs/html/design/building-blocks/index.jd deleted file mode 100644 index 7fb0e55..0000000 --- a/docs/html/design/building-blocks/index.jd +++ /dev/null @@ -1,30 +0,0 @@ -page.title=Building Blocks -header.justLinks=1 -footer.hide=1 -@jd:body - -<style> -#landing-graphic-container { - position: relative; -} - -#text-overlay { - position: absolute; - left: 0; - top: 520px; - width: 450px; -} -</style> - -<div id="landing-graphic-container"> - <div id="text-overlay"> - <span itemprop="description">Your inventory of ready-to-use elements for creating - outstanding apps.</span> - <br><br> - <a href="{@docRoot}design/building-blocks/tabs.html" class="landing-page-link">Tabs</a> - </div> - - <a href="{@docRoot}design/building-blocks/tabs.html"> - <img src="{@docRoot}design/media/building_blocks_landing.png"> - </a> -</div> diff --git a/docs/html/design/building-blocks/lists.jd b/docs/html/design/building-blocks/lists.jd deleted file mode 100644 index 85753c8..0000000 --- a/docs/html/design/building-blocks/lists.jd +++ /dev/null @@ -1,56 +0,0 @@ -page.title=Lists -page.tags=listview,layout -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/lists.html"> - <div> - <h3>Material Design</h3> - <p>Lists<p> - </div> -</a> - -<p itemprop="description">Lists present multiple line items in a vertical arrangement. They can be used for data selection as -well as drilldown navigation.</p> - -<div class="vspace size-1"> </div> - -<div class="cols clearfix"> - <div class="col-9"> - - <img src="{@docRoot}design/media/lists_main.png"> - - </div> - <div class="col-4 with-callouts"> - -<ol style="margin-bottom: 60px;"> -<li> -<h4>Section Divider</h4> -<p>Use section dividers to organize the content of your list into groups and facilitate scanning.</p> -</li> -<li> -<h4>Line Items</h4> -<p>List items can accommodate a wide range of data types in different arrangements, including - simple single-line items, multi-line items, and custom items with icons, checkboxes, and action - buttons.</p> -</li> -</ol> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/listview.html"> - <div> - <h3>Developer Docs</h3> - <p>List View</p> - </div> -</a> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/lists-controls.html"> - <div> - <h3>Material Design</h3> - <p>Lists: Controls<p> - </div> -</a> - - - </div> -</div> diff --git a/docs/html/design/building-blocks/pickers.jd b/docs/html/design/building-blocks/pickers.jd deleted file mode 100644 index 72da0f7..0000000 --- a/docs/html/design/building-blocks/pickers.jd +++ /dev/null @@ -1,40 +0,0 @@ -page.title=Pickers -page.tags=datepicker,timepicker -@jd:body - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/pickers.html"> - <div> - <h3>Developer Docs</h3> - <p>Pickers</p> - </div> -</a> - -<p itemprop="description">Pickers provide a simple way to select a single value from a set. In addition to touching the -up/down arrow buttons, it's possible to set the desired value from the keyboard or via a swipe -gesture.</p> - -<div class="cols"> - <div class="col-6"> - - <img src="{@docRoot}design/media/picker_space.png"> - - </div> - <div class="col-6"> - -<h4>Space considerations</h4> -<p>Pickers can be used inline on a form, but their relatively large footprint is best suited for -display in a dialog. For inline display, consider using more compact controls such as text fields or -spinners.</p> - - </div> -</div> - -<h2 id="date-time">Date and time pickers</h2> - -<p>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 -app helps ensure that a user's specification of a data or time input is valid and formatted -correctly. The format of a time and date picker adjusts automatically to the locale.</p> - -<img src="{@docRoot}design/media/picker_datetime.png"> - diff --git a/docs/html/design/building-blocks/progress.jd b/docs/html/design/building-blocks/progress.jd deleted file mode 100644 index ae81440..0000000 --- a/docs/html/design/building-blocks/progress.jd +++ /dev/null @@ -1,105 +0,0 @@ -page.title=Progress & Activity -page.tags=progressbar,download,network -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/progress-activity.html"> - <div> - <h3>Material Design</h3> - <p>Progress and Activity<p> - </div> -</a> - -<p>Progress bars and activity indicators signal to users that something is happening that will take a moment.</p> -<h2 id="progress">Progress bars</h2> - -<p>Progress bars are for situations where the percentage completed can be determined. They give users a quick sense of how much longer an operation will take.</p> - -<img src="{@docRoot}design/media/progress_download.png"> - -<p>A progress bar should always fill from 0% to 100% and never move backwards to a lower value. If multiple operations are happening in sequence, use the progress bar to represent the delay as a whole, so that when the bar reaches 100%, it doesn't return back to 0%.</p> - -<div class="vspace size-2"> </div> - -<img src="{@docRoot}design/media/progress_themes.png"> -<div class="figure-caption"> - Progress bar in Holo Dark and Holo Light. -</div> - -<h2 id="activity">Activity indicators</h2> - -<p>Activity indicators are for operations of an indeterminate length. They ask users to wait a moment while something finishes up, without getting into specifics about what's happening behind the scenes.</p> - -<p>Two styles are available: a bar and a circle. Each is offered in a variety of sizes, in both Holo Light and Holo Dark themes. Choose the appropriate style and size for the surrounding context. For example, the largest activity circle works well when displayed in a blank content area, but not in a smaller dialog box. Each operation should only be represented by one activity indicator.</p> - -<div class="cols"> - <div class="col-6"> - - <img src="{@docRoot}design/media/progress_activity.png"> - - </div> - <div class="col-7 with-callouts"> - - <ol> - <li class="value-1"><h4>Activity bar</h4> - <p>In this example, an activity bar (in Holo Dark) appears when a user first requests a download. There's an unknown period of time when the download has not yet started. As soon as the download starts, this activity bar transforms into a progress bar.</p> - </li> - </ol> - - </div> -</div> - -<div class="cols"> - <div class="col-6"> - - <img src="{@docRoot}design/media/progress_activity2.png"> - - </div> - <div class="col-7 with-callouts"> - - <ol> - <li class="value-2"><h4>Activity circle</h4> - <p>In this example, an activity circle (in Holo Light) is used in the Gmail application when a message is being loaded because it's not possible to determine how long it will take to download the email.</p> - <p>When displaying an activity circle, do not include text to communicate what the app is doing. The moving circle alone provides sufficient feedback about the delay, and does so in an understated way that minimizes the impact.</p> - <p> - <div style="margin-left:0;margin-top:1em;"> - <img src="{@docRoot}design/media/progress_activity_do_dont.png"> - </div> - </p> - </li> - </ol> - - </div> -</div> - -<h2 id="custom-indicators">Custom indicators</h2> -<p>The standard progress bar and activity indicators work well for most situations and should be used whenever possible to provide a consistent experience across Android. However, some situations may call for something more custom.</p> - -<p>Here's an example:<br> -In all of the Google Play apps (Music, Books, Movies, Magazines), we wanted the current download state of each item to be visible at all times at the top-level screen. These states are: - <ul> - <li>Not downloaded</li> - <li>Temporarily downloaded (automatically cached by the app)</li> - <li>Permanently downloaded on the device at the user's request</li> - </ul> -</p> -<p>We also needed to indicate progress from one download state to another, because downloading is not instantaneous.</p> -<p>This presented a challenge, because the Google Play apps use a variety of different layouts, and some of them are highly space-constrained. We didn't want this information to clutter the top-level screens, or compete too much with the cover art.</p> -<p>So we designed a custom indicator that could show all of the information in a tiny footprint, with the flexibility to appear on top of content if necessary.</p> - -<img src="{@docRoot}design/media/progress_activity_custom.png"> - -<p>The color indicates whether it's downloaded (blue) or not (gray). The appearance of the pin indicates whether the download is permanent (white, upright) or temporary (gray, diagonal). And when state is in the process of changing, progress is indicated by a moving pie chart.</p> - -<div class="cols"> - <div class="col-9"> - <img src="{@docRoot}design/media/progress_activity_custom_app.png"> - </div> - <div class="col-4"> - <div class="figure-caption"> - Across Google Play apps with different layouts, the same custom indicator appears with each item. It communicates download state as well as progress, in a compact package that can be incorporated into any screen design. - </div> - </div> -</div> - -<p>If you find that the standard indicators aren't meeting your needs (due to space constraints, state complexities), by all means design your own. Make it feel like part of the Android family by injecting some of the visual characteristics of the standard indicators. In this example, we carried over the circular shape, the same shade of blue, and the flat and simple style.</p> diff --git a/docs/html/design/building-blocks/scrolling.jd b/docs/html/design/building-blocks/scrolling.jd deleted file mode 100644 index 04b1e4a..0000000 --- a/docs/html/design/building-blocks/scrolling.jd +++ /dev/null @@ -1,39 +0,0 @@ -page.title=Scrolling -page.tags=scrollview,listview -@jd:body - - -<p>Scrolling allows the user to navigate to content in the overflow using a swipe gesture. The -scrolling speed is proportional to the speed of the gesture.</p> -<h2 id="indicator">Scroll Indicator</h2> - -<p>Appears during scrolling to indicate what portion of the content is currently in view.</p> - -<div class="framed-nexus5-land-span-13"> - <video class="play-on-hover" autoplay> - <source src="{@docRoot}design/media/scroll_indicator.mp4" type="video/mp4"> - <source src="{@docRoot}design/media/scroll_indicator.webm" type="video/webm"> - <source src="{@docRoot}design/media/scroll_indicator.ogv" type="video/ogg"> - </video> -</div> -<div class="figure-caption"> - <div class="video-instructions"> </div> -</div> - -<h2 id="index-scrolling">Index Scrolling</h2> - -<p>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 -letter to pop up in a prominent way.</p> - -<div class="framed-nexus5-land-span-13"> - <video class="play-on-hover" autoplay> - <source src="{@docRoot}design/media/scroll_index.mp4" type="video/mp4"> - <source src="{@docRoot}design/media/scroll_index.webm" type="video/webm"> - <source src="{@docRoot}design/media/scroll_index.ogv" type="video/ogg"> - </video> -</div> -<div class="figure-caption"> - <div class="video-instructions"> </div> -</div> diff --git a/docs/html/design/building-blocks/seek-bars.jd b/docs/html/design/building-blocks/seek-bars.jd deleted file mode 100644 index 04446d2..0000000 --- a/docs/html/design/building-blocks/seek-bars.jd +++ /dev/null @@ -1,45 +0,0 @@ -page.title=Seek Bars and Sliders -page.tags=seekbar,progressbar -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/sliders.html"> - <div> - <h3>Material Design</h3> - <p>Sliders<p> - </div> -</a> - -<p>Interactive sliders make it possible to select a value from a continuous or discrete range of values -by moving the slider thumb. The smallest value is to the left, the largest to the right. The -interactive nature of the slider makes it a great choice for settings that reflect intensity levels, -such as volume, brightness, or color saturation.</p> - -<div class="cols"> - <div class="col-9"> - - <img src="{@docRoot}design/media/seekbar_example.png"> - - </div> - <div class="col-4"> - -<div class="vspace size-2"> </div> - -<h4>Example</h4> -<p>Interactive slider to set the ringer volume. The value can either be set through the hardware volume controls or interactively via a gesture.</p> - - </div> -</div> - - -<div class="cols"> - <div class="col-9"> - - <img src="{@docRoot}design/media/seekbar_style.png"> - <div class="figure-caption"> - Seek bars in Holo Light & Dark - </div> - - </div> - <div class="col-4"> </div> -</div> diff --git a/docs/html/design/building-blocks/spinners.jd b/docs/html/design/building-blocks/spinners.jd deleted file mode 100644 index 31c5558..0000000 --- a/docs/html/design/building-blocks/spinners.jd +++ /dev/null @@ -1,54 +0,0 @@ -page.title=Spinners -page.tags=spinner,dropdown -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/menus.html"> - <div> - <h3>Material Design</h3> - <p>Menus<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/spinner.html"> - <div> - <h3>Developer Docs</h3> - <p>Spinners</p> - </div> -</a> - -<p itemprop="description">Spinners provide a quick way to select one value from a set. In the default state, a spinner shows -its currently selected value. Touching the spinner displays a dropdown menu with all other available -values, from which the user can select a new one.</p> - - -<div class="cols"> - <div class="col-6"> - - <img src="{@docRoot}design/media/spinners_form.png"> - -<h4>Spinners in forms</h4> -<p>Spinners are useful for data picking in forms. They are compact and integrate nicely with other -components. Use spinners in forms for both simple data input and in combination with other input -fields. For example, a text field might let you edit an email address for a contact, while its -associated spinner allows you to select whether it's a Home or Work address.</p> - - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/spinners_actionbar.png"> - -<h4>Spinners in action bars</h4> -<p>Use spinners in action bars to switch views. For example, Gmail uses a spinner to permit switching -between accounts or commonly used labels. Spinners are useful when changing the view is important to -your app, but not necessarily a frequent occurrence. In cases where view switching is frequent, use -tabs.</p> - - </div> -</div> - -<img src="{@docRoot}design/media/spinners_hololightanddark.png"> -<div class="figure-caption"> - Spinners in the Holo Dark and Holo Light themes, in various states. -</div> - diff --git a/docs/html/design/building-blocks/switches.jd b/docs/html/design/building-blocks/switches.jd deleted file mode 100644 index 9dd09ca..0000000 --- a/docs/html/design/building-blocks/switches.jd +++ /dev/null @@ -1,64 +0,0 @@ -page.title=Switches -page.tags=switch,checkbox,radiobutton,button -@jd:body - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/selection-controls.html"> - <div> - <h3>Material Design</h3> - <p>Selection Controls<p> - </div> -</a> - -<p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio -buttons, and on/off switches.</p> - - - -<h2 id="checkboxes">Checkboxes</h2> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/checkbox.html"> - <div> - <h3>Developer Docs</h3> - <p>Checkboxes</p> - </div> -</a> - -<p itemprop="description">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.</p> - - <img src="{@docRoot}design/media/switches_checkboxes.png"> - - - -<h2 id="radio-buttons">Radio Buttons</h2> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/radiobutton.html"> - <div> - <h3>Developer Docs</h3> - <p>Radio Buttons</p> - </div> -</a> - -<p>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.</p> - - <img src="{@docRoot}design/media/switches_radios.png"> - - - -<h2 id="switches">On/off Switches</h2> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/togglebutton.html"> - <div> - <h3>Developer Docs</h3> - <p>Toggle Buttons</p> - </div> -</a> - -<p>On/off switches toggle the state of a single settings option.</p> - - <img src="{@docRoot}design/media/switches_switches.png"> - - diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd deleted file mode 100644 index 1315a2f..0000000 --- a/docs/html/design/building-blocks/tabs.jd +++ /dev/null @@ -1,65 +0,0 @@ -page.title=Tabs -page.tags=tabs,actionbar,navigation,viewpager -@jd:body - -<img src="{@docRoot}design/media/tabs_overview.png"> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/tabs.html"> - <div> - <h3>Material Design</h3> - <p>Tabs<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}training/implementing-navigation/lateral.html"> - <div> - <h3>Developer Docs</h3> - <p>Creating Swipe Views<br>with Tabs</p> - </div> -</a> - -<p itemprop="description">Tabs in the action bar make it easy to explore and switch between different views or functional -aspects of your app, or to browse categorized data sets.</p> - -<p>For details on using gestures to move between tabs, see the <a href="{@docRoot}design/patterns/swipe-views.html">Swipe Views</a> pattern.</p> - -<h2 id="scrollable">Scrollable Tabs</h2> - - -<div class="cols"> - <div class="col-6"> - -<p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate -to the next/previous view, swipe left or right.</p> - - </div> - <div class="col-7"> - - <video width="400" class="with-shadow play-on-hover" autoplay> - <source src="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4"> - <source src="{@docRoot}design/media/tabs_scrolly.webm" type="video/webm"> - <source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg"> - </video> - <div class="figure-caption"> - Scrolling tabs in the Play Store app. - <div class="video-instructions-image"> </div> - </div> - - </div> -</div> - - -<h2 id="fixed">Fixed Tabs</h2> -<p>Fixed tabs display all items concurrently. To navigate to a different view, touch the tab, or swipe left or right.</p> -<p>Fixed tabs are displayed with equal width, based on the width of the widest tab label. If there is insufficient room to display all tabs, the tab labels themselves will be scrollable. For this reason, fixed tabs are best suited for displaying 3 or fewer tabs.</p> - -<img src="{@docRoot}design/media/tabs_standard.png"> -<div class="figure-caption"> - Tabs in Holo Dark & Light. -</div> - -<img src="{@docRoot}design/media/tabs_youtube.png"> -<div class="figure-caption"> - Tabs in the Google Play Movies app. -</div> diff --git a/docs/html/design/building-blocks/text-fields.jd b/docs/html/design/building-blocks/text-fields.jd deleted file mode 100644 index 9403679..0000000 --- a/docs/html/design/building-blocks/text-fields.jd +++ /dev/null @@ -1,88 +0,0 @@ -page.title=Text Fields -page.tags=text,edittext,input -@jd:body - - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/components/text-fields.html"> - <div> - <h3>Material Design</h3> - <p>Text Fields<p> - </div> -</a> - -<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/text.html"> - <div> - <h3>Developer Docs</h3> - <p>Text Fields</p> - </div> -</a> - -<p itemprop="description">Text fields allow the user to type text into your app. They can be either single line or multi-line. -Touching a text field places the cursor and automatically displays the keyboard. In addition to -typing, text fields allow for a variety of other activities, such as text selection (cut, copy, -paste) and data lookup via auto-completion.</p> - - -<div class="cols"> - <div class="col-12"> - - <img src="{@docRoot}design/media/text_input_singlevsmultiline.png"> - - </div> -</div> - -<h4>Single line and multi line</h4> -<p>Single-line fields automatically scroll their content to the left as the text input cursor reaches -the right edge of the input field. Multi-line text fields automatically break to a new line for -overflow text and scroll vertically when the cursor reaches the lower edge.</p> - -<img src="{@docRoot}design/media/text_input_typesandtypedown.png"> - -<div class="cols"> - <div class="col-6"> - -<h4>Text field types</h4> -<p>Text fields can have different types, such as number, message, or email address. The type determines -what kind of characters are allowed inside the field, and may prompt the virtual keyboard to -optimize its layout for frequently used characters.</p> - - </div> - <div class="col-6"> - -<h4>Auto-complete text fields</h4> -<p>Use auto-complete text fields to present real-time completions or search results in popups, so users -can enter information more accurately and efficiently.</p> - - </div> -</div> - -<h2 id="text-selection">Text Selection</h2> - -<p>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. -Selection mode includes:</p> - -<div class="cols"> - <div class="col-9"> - - <img src="{@docRoot}design/media/text_input_textselection.png"> - - </div> - <div class="col-4 with-callouts"> - -<ol> -<li> -<h4>Contextual action bar</h4> -<p>A contextual action bar (CAB) displays the actions available to perform on the selection: - typically cut, copy, and paste, but apps can insert additional commands as needed.</p> -</li> -<li> -<h4>Selection handles</h4> -<p>Selection handles can be dragged to select more or less text while remaining in selection mode.</p> -</li> -</ol> - - </div> -</div> - |