Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Spinners |
Joe Fernandez | 33baa5a | 2013-11-14 11:41:19 -0800 | [diff] [blame] | 2 | page.tags=spinner,dropdown |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 3 | @jd:body |
| 4 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 5 | <a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/spinner.html"> |
| 6 | <div> |
| 7 | <h3>Developer Docs</h3> |
| 8 | <p>Spinners</p> |
| 9 | </div> |
| 10 | </a> |
| 11 | |
Dirk Dougherty | 3155825 | 2014-02-08 20:29:06 -0800 | [diff] [blame] | 12 | <p itemprop="description">Spinners provide a quick way to select one value from a set. In the default state, a spinner shows |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 13 | its currently selected value. Touching the spinner displays a dropdown menu with all other available |
| 14 | values, from which the user can select a new one.</p> |
| 15 | |
| 16 | |
| 17 | <div class="layout-content-row"> |
| 18 | <div class="layout-content-col span-6"> |
| 19 | |
| 20 | <img src="{@docRoot}design/media/spinners_form.png"> |
| 21 | |
| 22 | <h4>Spinners in forms</h4> |
| 23 | <p>Spinners are useful for data picking in forms. They are compact and integrate nicely with other |
| 24 | components. Use spinners in forms for both simple data input and in combination with other input |
| 25 | fields. For example, a text field might let you edit an email address for a contact, while its |
| 26 | associated spinner allows you to select whether it's a Home or Work address.</p> |
| 27 | |
| 28 | </div> |
| 29 | <div class="layout-content-col span-7"> |
| 30 | |
| 31 | <img src="{@docRoot}design/media/spinners_actionbar.png"> |
| 32 | |
| 33 | <h4>Spinners in action bars</h4> |
| 34 | <p>Use spinners in action bars to switch views. For example, Gmail uses a spinner to permit switching |
| 35 | between accounts or commonly used labels. Spinners are useful when changing the view is important to |
| 36 | your app, but not necessarily a frequent occurrence. In cases where view switching is frequent, use |
| 37 | tabs.</p> |
| 38 | |
| 39 | </div> |
| 40 | </div> |
| 41 | |
| 42 | <img src="{@docRoot}design/media/spinners_hololightanddark.png"> |
| 43 | <div class="figure-caption"> |
| 44 | Spinners in the Holo Dark and Holo Light themes, in various states. |
| 45 | </div> |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 46 | |