summaryrefslogtreecommitdiffstats
path: root/docs/html/design/building-blocks
diff options
context:
space:
mode:
Diffstat (limited to 'docs/html/design/building-blocks')
-rw-r--r--docs/html/design/building-blocks/buttons.jd13
-rw-r--r--docs/html/design/building-blocks/dialogs.jd27
-rw-r--r--docs/html/design/building-blocks/grid-lists.jd7
-rw-r--r--docs/html/design/building-blocks/lists.jd7
-rw-r--r--docs/html/design/building-blocks/pickers.jd13
-rw-r--r--docs/html/design/building-blocks/spinners.jd13
-rw-r--r--docs/html/design/building-blocks/switches.jd36
-rw-r--r--docs/html/design/building-blocks/tabs.jd13
-rw-r--r--docs/html/design/building-blocks/text-fields.jd14
9 files changed, 93 insertions, 50 deletions
diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd
index 600ec6c..7957ef8 100644
--- a/docs/html/design/building-blocks/buttons.jd
+++ b/docs/html/design/building-blocks/buttons.jd
@@ -2,6 +2,13 @@ page.title=Buttons
page.tags="button","input"
@jd:body
+<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/button.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Buttons</p>
+ </div>
+</a>
+
<p>A button consists of text and/or an image that clearly communicates what action will occur when the
user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless
buttons</em>. Both can contain text labels and/or images.</p>
@@ -38,9 +45,3 @@ than basic buttons and integrate nicely with other content.</p>
<img src="{@docRoot}design/media/buttons_borderless.png">
-
-<div class="note develop">
-<p><strong>Developer Guide</strong></p>
- <p>For information about how to build and customize buttons in your app,
- see the <a href="{@docRoot}guide/topics/ui/controls/button.html">Buttons</a> API guide.</p>
-</div>
diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd
index 2f6ca27..f4bb87e 100644
--- a/docs/html/design/building-blocks/dialogs.jd
+++ b/docs/html/design/building-blocks/dialogs.jd
@@ -2,6 +2,13 @@ page.title=Dialogs
page.tags="dialog","alert","popup","toast"
@jd:body
+<a class="notice-developers" href="{@docRoot}guide/topics/ui/dialogs.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Dialogs</p>
+ </div>
+</a>
+
<p>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>
@@ -123,11 +130,6 @@ available based on the title and the text of the action buttons.</p>
</div>
</div>
-<div class="note develop">
-<p><strong>Developer Guide</strong></p>
- <p>For information about how to build dialogs in your app,
- see the <a href="{@docRoot}guide/topics/ui/dialogs.html">Dialogs</a> API guide.</p>
-</div>
<h2 id="popups">Popups</h2>
@@ -144,12 +146,19 @@ advances the workflow, and simply touching outside the popup dismisses it.</p>
<div class="layout-content-row">
<div class="layout-content-col span-6">
- <div class="vspace size-6"></div>
+ <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-developers left" href="{@docRoot}guide/topics/ui/notifiers/toasts.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Toasts</p>
+ </div>
+</a>
+
</div>
<div class="layout-content-col span-7">
@@ -158,9 +167,3 @@ continue editing later. Toasts automatically disappear after a timeout.</p>
</div>
</div>
-
-<div class="note develop">
-<p><strong>Developer Guide</strong></p>
- <p>For information about how to create toasts,
- see the <a href="{@docRoot}guide/topics/ui/notifiers/toasts.html">Toasts</a> API guide.</p>
-</div>
diff --git a/docs/html/design/building-blocks/grid-lists.jd b/docs/html/design/building-blocks/grid-lists.jd
index 8c82ba9..1a09ef5 100644
--- a/docs/html/design/building-blocks/grid-lists.jd
+++ b/docs/html/design/building-blocks/grid-lists.jd
@@ -4,6 +4,13 @@ page.tags="gridview","layout","listview"
<img src="{@docRoot}design/media/gridview_overview.png">
+<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/gridview.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Grid View</p>
+ </div>
+</a>
+
<p>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>
diff --git a/docs/html/design/building-blocks/lists.jd b/docs/html/design/building-blocks/lists.jd
index 16927a6..5514824 100644
--- a/docs/html/design/building-blocks/lists.jd
+++ b/docs/html/design/building-blocks/lists.jd
@@ -2,6 +2,13 @@ page.title=Lists
page.tags="listview","layout"
@jd:body
+<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/listview.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>List View</p>
+ </div>
+</a>
+
<p>Lists present multiple line items in a vertical arrangement. They can be used for data selection as
well as drilldown navigation.</p>
diff --git a/docs/html/design/building-blocks/pickers.jd b/docs/html/design/building-blocks/pickers.jd
index 47363d0..6dd72ba 100644
--- a/docs/html/design/building-blocks/pickers.jd
+++ b/docs/html/design/building-blocks/pickers.jd
@@ -2,6 +2,13 @@ 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>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>
@@ -31,9 +38,3 @@ correctly. The format of a time and date picker adjusts automatically to the loc
<img src="{@docRoot}design/media/picker_datetime.png">
-
-<div class="note develop">
-<p><strong>Developer Guide</strong></p>
- <p>For information about how to create date and time pickers,
- see the <a href="{@docRoot}guide/topics/ui/controls/pickers.html">Pickers</a> API guide.</p>
-</div>
diff --git a/docs/html/design/building-blocks/spinners.jd b/docs/html/design/building-blocks/spinners.jd
index 3550b0c..c00b639 100644
--- a/docs/html/design/building-blocks/spinners.jd
+++ b/docs/html/design/building-blocks/spinners.jd
@@ -2,6 +2,13 @@ page.title=Spinners
page.tags="spinner","dropdown"
@jd:body
+<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/spinner.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Spinners</p>
+ </div>
+</a>
+
<p>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>
@@ -37,9 +44,3 @@ tabs.</p>
Spinners in the Holo Dark and Holo Light themes, in various states.
</div>
-
-<div class="note develop">
-<p><strong>Developer Guide</strong></p>
- <p>For information about how to create spinners,
- see the <a href="{@docRoot}guide/topics/ui/controls/spinner.html">Spinners</a> API guide.</p>
-</div>
diff --git a/docs/html/design/building-blocks/switches.jd b/docs/html/design/building-blocks/switches.jd
index 0b195b9..74cab5a 100644
--- a/docs/html/design/building-blocks/switches.jd
+++ b/docs/html/design/building-blocks/switches.jd
@@ -4,31 +4,53 @@ page.tags="switch","checkbox","radiobutton","button"
<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>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">
-<div class="note develop">
-<p><strong>Developer Guide</strong></p>
- <p>For information about how to create these different switches,
- see the <a href="{@docRoot}guide/topics/ui/controls/checkbox.html">Checkboxes</a>,
- <a href="{@docRoot}guide/topics/ui/controls/radiobutton.html">Radio Buttons</a>, or
- <a href="{@docRoot}guide/topics/ui/controls/togglebutton.html">Toggle Buttons</a> API guides.</p>
-</div>
+
diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd
index 79cc9c7..4778400 100644
--- a/docs/html/design/building-blocks/tabs.jd
+++ b/docs/html/design/building-blocks/tabs.jd
@@ -4,6 +4,13 @@ page.tags="tabs","actionbar","navigation","viewpager"
<img src="{@docRoot}design/media/tabs_overview.png">
+<a class="notice-developers" href="{@docRoot}training/implementing-navigation/lateral.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Creating Swipe Views with Tabs</p>
+ </div>
+</a>
+
<p>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>
@@ -59,9 +66,3 @@ permits fast view switching even on narrower screens.</p>
<img src="{@docRoot}design/media/tabs_stacked.png">
-
-<div class="note develop">
-<p><strong>Developer Guide</strong></p>
- <p>For information about how to create tabs,
- see the <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> API guide.</p>
-</div>
diff --git a/docs/html/design/building-blocks/text-fields.jd b/docs/html/design/building-blocks/text-fields.jd
index 82321f0..383531b 100644
--- a/docs/html/design/building-blocks/text-fields.jd
+++ b/docs/html/design/building-blocks/text-fields.jd
@@ -2,6 +2,13 @@ page.title=Text Fields
page.tags="text","edittext","input"
@jd:body
+<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/text.html">
+ <div>
+ <h3>Developer Docs</h3>
+ <p>Text Fields</p>
+ </div>
+</a>
+
<p>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,
@@ -70,10 +77,3 @@ Selection mode includes:</p>
</div>
</div>
-
-<div class="note develop">
-<p><strong>Developer Guide</strong></p>
- <p>For information about how to create text fields, provide auto-complete suggestions,
- and specify the input mode,
- see the <a href="{@docRoot}guide/topics/ui/controls/text.html">Text Fields</a> API guide.</p>
-</div>