Gitiles
Code Review Sign In
gerrit.witaqua.org / frameworks_base / 06a864413f03627ba7671d1c19ae114e3afaad4b / . / docs / html / design / building-blocks / spinners.html
blob: bf21fe857f3bec3fdffdb271b16864e2999f64b3 [file] [log] [blame]
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>
6
7Android Design - Spinners
8 </title>
9 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
10 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
11 <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
12 <link rel="stylesheet" href="../static/default.css">
13
14 </head>
15 <body>
16
17 <div id="page-container">
18
19 <div id="page-header"><a href="../index.html">Android Design</a></div>
20
21 <div id="main-row">
22
23 <ul id="nav">
24
25 <li class="nav-section">
26 <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
27 <ul>
28 <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
29 <li><a href="../get-started/principles.html">Design Principles</a></li>
30 <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
31 </ul>
32 </li>
33
34 <li class="nav-section">
35 <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
36 <ul>
37 <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
38 <li><a href="../style/themes.html">Themes</a></li>
39 <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
40 <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
41 <li><a href="../style/typography.html">Typography</a></li>
42 <li><a href="../style/color.html">Color</a></li>
43 <li><a href="../style/iconography.html">Iconography</a></li>
44 <li><a href="../style/writing.html">Writing Style</a></li>
45 </ul>
46 </li>
47
48 <li class="nav-section">
49 <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
50 <ul>
51 <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
52 <li><a href="../patterns/gestures.html">Gestures</a></li>
53 <li><a href="../patterns/app-structure.html">App Structure</a></li>
54 <li><a href="../patterns/navigation.html">Navigation</a></li>
55 <li><a href="../patterns/actionbar.html">Action Bar</a></li>
56 <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
57 <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
58 <li><a href="../patterns/selection.html">Selection</a></li>
59 <li><a href="../patterns/notifications.html">Notifications</a></li>
60 <li><a href="../patterns/compatibility.html">Compatibility</a></li>
61 <li><a href="../patterns/pure-android.html">Pure Android</a></li>
62 </ul>
63 </li>
64
65 <li class="nav-section">
66 <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
67 <ul>
68 <li><a href="../building-blocks/tabs.html">Tabs</a></li>
69 <li><a href="../building-blocks/lists.html">Lists</a></li>
70 <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
71 <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
72 <li><a href="../building-blocks/spinners.html">Spinners</a></li>
73 <li><a href="../building-blocks/buttons.html">Buttons</a></li>
74 <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
75 <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
76 <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
77 <li><a href="../building-blocks/switches.html">Switches</a></li>
78 <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
79 <li><a href="../building-blocks/pickers.html">Pickers</a></li>
80 </ul>
81 </li>
82
83 <li>
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]84 <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]85 </li>
86
87 </ul>
88
89 <div id="content">
90
91
92 <div class="layout-content-row content-header">
93 <div class="layout-content-col span-9">
94 <h2>Spinners</h2>
95 </div>
96 <div class="paging-links layout-content-col span-4">
97 <a href="#" class="prev-page-link">Previous</a>
98 <a href="#" class="next-page-link">Next</a>
99 </div>
100 </div>
101
102
103
104
105<p>Spinners provide a quick way to select one value from a set. In the default state, a spinner shows
106its currently selected value. Touching the spinner displays a dropdown menu with all other available
107values, from which the user can select a new one.</p>
108
109
110<div class="layout-content-row">
111 <div class="layout-content-col span-6">
112
113 <img src="../static/content/spinners_form.png">
114
115<h4>Spinners in forms</h4>
116<p>Spinners are useful for data picking in forms. They are compact and integrate nicely with other
117components. Use spinners in forms for both simple data input and in combination with other input
118fields. For example, a text field might let you edit an email address for a contact, while its
119associated spinner allows you to select whether it's a Home or Work address.</p>
120
121 </div>
122 <div class="layout-content-col span-7">
123
124 <img src="../static/content/spinners_actionbar.png">
125
126<h4>Spinners in action bars</h4>
127<p>Use spinners in action bars to switch views. For example, Gmail uses a spinner to permit switching
128between accounts or commonly used labels. Spinners are useful when changing the view is important to
129your app, but not necessarily a frequent occurrence. In cases where view switching is frequent, use
130tabs.</p>
131
132 </div>
133</div>
134
135<img src="../static/content/spinners_hololightanddark.png">
136<div class="figure-caption">
137 Spinners in the Holo Dark and Holo Light themes, in various states.
138</div>
139
140
141
142
143 <div class="layout-content-row content-footer">
144 <div class="paging-links layout-content-col span-9">&nbsp;</div>
145 <div class="paging-links layout-content-col span-4">
146 <a href="#" class="prev-page-link">Previous</a>
147 <a href="#" class="next-page-link">Next</a>
148 </div>
149 </div>
150
151 </div>
152
153 </div>
154
155 <div id="page-footer">
156
157 <p id="copyright">
158 Except as noted, this content is licensed under
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]159 <a href="http://creativecommons.org/licenses/by/2.5/">
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]160 Creative Commons Attribution 2.5</a>.<br>
161 For details and restrictions, see the
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]162 <a href="http://developer.android.com/license.html">Content License</a>.
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]163 </p>
164
165 <p>
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]166 <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
167 <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
168 <a href="http://www.android.com/branding.html">Brand Guidelines</a>
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]169 </p>
170
171 </div>
172 </div>
173
174 <script src="../static/jquery-1.6.2.min.js"></script>
175 <script>
176 var SITE_ROOT = '../';
177 </script>
178 <script src="../static/default.js"></script>
179
180
181 <script type="text/javascript">
182 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
183 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
184 </script>
185 <script type="text/javascript">
186 var pageTracker = _gat._getTracker("UA-5831155-1");
187 pageTracker._trackPageview();
188 </script>
189 </body>
190</html>