1page.title=Pure Android
2page.image=images/cards/design-pure-android_2x.png
3@jd:body
4
5<p>Most developers want to distribute their apps on multiple platforms. As you plan your app for
6Android, keep in mind that different platforms play by different rules and conventions. Design
7decisions that make perfect sense on one platform will look and feel misplaced in the context of a
8different platform. While a "design once, ship anywhere" approach might save you time up-front, you
9run the very real risk of creating inconsistent apps that alienate users. Consider the following
10guidelines to avoid the most common traps and pitfalls.</p>
11
12<div class="vspace size-1">&nbsp;</div>
13
14<div class="cols">
15  <div class="col-5">
16
17<h4>Don't mimic UI elements from other platforms</h4>
18<p>Platforms typically provide a carefully designed set of UI elements that are themed in a very
19distinctive fashion. For example, some platforms advocate rounded corners for their buttons, others
20use gradients in their title bars. In some cases, elements may have the same purpose, but are
21designed to work a bit differently.</p>
22<p>As you build your app for Android, don't carry over themed UI elements from other platforms and
23don't mimic their specific behaviors. Review the
24<a href="{@docRoot}design/building-blocks/index.html">Building Blocks</a>
25section in this styleguide to learn about Android's most important UI elements
26and the way they look in the system default themes. Also examine Android's platform apps to get a
27sense of how elements are applied in the context of an app. If you want to customize the theme of UI
28elements, customize carefully according to your specific branding - and not according to the
29conventions of a different platform.</p>
30
31  </div>
32  <div class="col-8">
33
34    <img src="{@docRoot}design/media/migrating_ui_elements.png">
35    <div class="figure-caption">
36      Sampling of UI elements from Android, iOS, and Windows Phone.
37    </div>
38
39  </div>
40</div>
41
42<div class="vspace size-2">&nbsp;</div>
43
44<div class="cols">
45  <div class="col-5">
46
47<h4>Don't carry over platform-specific icons</h4>
48<p>Platforms typically provide sets of icons for common functionality, such as sharing, creating a new
49document or deleting.</p>
50<p>As you are migrating your app to Android, please swap out platform-specific icons with their Android
51counterparts.</p>
52<p>You can find a wide variety of icons for use in your app on the
53<a href="{@docRoot}design/downloads/index.html">Downloads</a> page.</p>
54
55  </div>
56  <div class="col-8">
57
58    <img src="{@docRoot}design/media/migrating_icons.png">
59    <div class="figure-caption">
60      Sampling of icons from Android, iOS, and Windows Phone.
61    </div>
62
63  </div>
64</div>
65
66<div class="vspace size-2">&nbsp;</div>
67
68<div class="cols">
69  <div class="col-5">
70
71<h4>Don't use bottom tab bars</h4>
72<p>Other platforms use the bottom tab bar to switch between the app's views. Per platform convention,
73Android's tabs for view control are shown in action bars at the top of the screen instead. In
74addition, Android apps may use a bottom bar to display actions on a split action bar.</p>
75<p>You should follow this guideline to create a consistent experience with other apps on the Android
76platform and to avoid confusion between actions and view switching on Android.</p>
77<p>For more information on how to properly use action bars for view control, see
78<a href="{@docRoot}design/patterns/actionbar.html">Action Bars</a>.</p>
79
80  </div>
81  <div class="col-8">
82
83    <img src="{@docRoot}design/media/migrating_ios_dialers.png">
84    <div class="figure-caption">
85      Android dialer with tabs in an action bar vs. bottom tabs in iOS.
86    </div>
87
88  </div>
89</div>
90
91<div class="cols">
92  <div class="col-5">
93
94<h4>Don't hardcode links to other apps</h4>
95<p>In some cases you might want your app to take advantage of another app's feature set. For
96example, you may want to share the content that your app created via a social network or messaging
97app, or view the content of a weblink in a browser. Don't use hard-coded, explicit links to
98particular apps to achieve this. Instead, use Android's intent API to launch an activity chooser
99which lists all applications that are set up to handle the particular request. This lets the user
100complete the task with their preferred app. For sharing in particular, consider using the <em>Share
101Action Provider</em> in your action bar to provide faster access to the user's most recently used
102sharing target.</p>
103
104  </div>
105  <div class="col-8">
106
107    <img src="{@docRoot}design/media/migrating_intents.png">
108    <div class="figure-caption">
109      Link to other apps with the activity chooser or use the <em>Share Action Provider</em> in the
110      action bar.
111    </div>
112
113  </div>
114</div>
115
116<div class="vspace size-2">&nbsp;</div>
117
118<div class="cols">
119  <div class="col-5">
120
121<h4>Don't use labeled back buttons on action bars</h4>
122<p>Other platforms use an explicit back button with label to allow the user to navigate up the
123application's hierarchy. Instead, Android uses the main action bar's app icon for hierarchical
124navigation and the navigation bar's back button for temporal navigation. For more information,
125please review the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern.</p>
126<p>Follow this guideline to provide a consistent navigation experience across the platform.</p>
127
128  </div>
129  <div class="col-8">
130
131    <img src="{@docRoot}design/media/migrating_ios_galleries.png">
132    <div class="figure-caption">
133      Android action bar with up caret vs. iOS labeled "Back" button.
134    </div>
135
136  </div>
137</div>
138
139<div class="cols">
140  <div class="col-5">
141
142<h4>Don't use right-pointing carets on line items</h4>
143<p>A common pattern on other platforms is the display of right-pointing carets on line items that allow
144the user to drill deeper into additional content.</p>
145<p>Android does not use such indicators on drill-down line items. Avoid them to stay consistent with
146the platform and in order to not have the user guess as to what the meaning of those carets may be.</p>
147
148  </div>
149  <div class="col-8">
150
151    <img src="{@docRoot}design/media/migrating_ios_settings.png">
152    <div class="figure-caption">
153      Android settings without right-pointing carets in line items vs. iOS settings.
154    </div>
155
156  </div>
157</div>
158
159<h2 id="device-independence">Device Independence</h2>
160
161<p>Remember that your app will run on a wide variety of different screen sizes. Create visual assets
162for different screen sizes and densities and make use of concepts such as multi-pane layouts to
163appropriately scale your UI on different device form factors.</p>
164<p>For more information, read <a href="{@docRoot}design/style/devices-displays.html">Devices and Displays</a> as
165well as <a href="{@docRoot}design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a> in this design guide.</p>
166