blob: 81a1c40705b9e4a7718470c3a196b5c72f70664a [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Pure Android
</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
<link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
<link rel="stylesheet" href="../static/default.css">
</head>
<body>
<div id="page-container">
<div id="page-header"><a href="../index.html">Android Design</a></div>
<div id="main-row">
<ul id="nav">
<li class="nav-section">
<div class="nav-section-header"><a href="../index.html">Get Started</a></div>
<ul>
<li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
<li><a href="../get-started/principles.html">Design Principles</a></li>
<li><a href="../get-started/ui-overview.html">UI Overview</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="../style/index.html">Style</a></div>
<ul>
<li><a href="../style/devices-displays.html">Devices and Displays</a></li>
<li><a href="../style/themes.html">Themes</a></li>
<li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
<li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
<li><a href="../style/typography.html">Typography</a></li>
<li><a href="../style/color.html">Color</a></li>
<li><a href="../style/iconography.html">Iconography</a></li>
<li><a href="../style/writing.html">Writing Style</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
<ul>
<li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
<li><a href="../patterns/gestures.html">Gestures</a></li>
<li><a href="../patterns/app-structure.html">App Structure</a></li>
<li><a href="../patterns/navigation.html">Navigation</a></li>
<li><a href="../patterns/actionbar.html">Action Bar</a></li>
<li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
<li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
<li><a href="../patterns/selection.html">Selection</a></li>
<li><a href="../patterns/notifications.html">Notifications</a></li>
<li><a href="../patterns/compatibility.html">Compatibility</a></li>
<li><a href="../patterns/pure-android.html">Pure Android</a></li>
</ul>
</li>
<li class="nav-section">
<div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
<ul>
<li><a href="../building-blocks/tabs.html">Tabs</a></li>
<li><a href="../building-blocks/lists.html">Lists</a></li>
<li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
<li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
<li><a href="../building-blocks/spinners.html">Spinners</a></li>
<li><a href="../building-blocks/buttons.html">Buttons</a></li>
<li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
<li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
<li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
<li><a href="../building-blocks/switches.html">Switches</a></li>
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
</ul>
</li>
<li>
<div id="back-dac-section"><a href="../../index.html" target="_blank">Developers</a></div>
</li>
</ul>
<div id="content">
<div class="layout-content-row content-header">
<div class="layout-content-col span-9">
<h2>Pure Android</h2>
</div>
<div class="paging-links layout-content-col span-4">
<a href="#" class="prev-page-link">Previous</a>
<a href="#" class="next-page-link">Next</a>
</div>
</div>
<p>Most developers want to distribute their apps on multiple platforms. As you plan your app for
Android, keep in mind that different platforms play by different rules and conventions. Design
decisions that make perfect sense on one platform will look and feel misplaced in the context of a
different platform. While a "design once, ship anywhere" approach might save you time up-front, you
run the very real risk of creating inconsistent apps that alienate users. Consider the following
guidelines to avoid the most common traps and pitfalls.</p>
<div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Don't mimic UI elements from other platforms</h4>
<p>Platforms typically provide a carefully designed set of UI elements that are themed in a very
distinctive fashion. For example, some platforms advocate rounded corners for their buttons, others
use gradients in their title bars. In some cases, elements may have the same purpose, but are
designed to work a bit differently.</p>
<p>As you build your app for Android, don't carry over themed UI elements from other platforms and
don't mimic their specific behaviors. Review the <a href="../building-
blocks/index.html">Building Blocks</a> section in this styleguide to learn about Android's most important UI elements
and the way they look in the system default themes. Also examine Android's platform apps to get a
sense of how elements are applied in the context of an app. If you want to customize the theme of UI
elements, customize carefully according to your specific branding - and not according to the
conventions of a different platform.</p>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/migrating_ui_elements.png">
<div class="figure-caption">
Sampling of UI elements from Android, iOS and Windows Phone 7.
</div>
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Don't carry over platform-specific icons</h4>
<p>Platforms typically provide sets of icons for common functionality, such as sharing, creating a new
document or deleting.</p>
<p>As you are migrating your app to Android, please swap out platform-specific icons with their Android
counterparts.</p>
<p>You can find a wide variety of icons for use in your app in the Android SDK.</p>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/migrating_icons.png">
<div class="figure-caption">
Sampling of icons from Android, iOS and Windows Phone 7.
</div>
</div>
</div>
<div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Don't use bottom tab bars</h4>
<p>Other platforms use the bottom tab bar to switch between the app's views. Per platform convention,
Android's tabs for view control are shown in action bars at the top of the screen instead. In
addition, Android apps may use a bottom bar to display actions on a split action bar.</p>
<p>You should follow this guideline to create a consistent experience with other apps on the Android
platform and to avoid confusion between actions and view switching on Android.</p>
<p>For more information on how to properly use action bars for view control, see
<a href="../patterns/actionbar.html">Action Bars</a>.</p>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/migrating_ios_dialers.png">
<div class="figure-caption">
Android dialer with tabs in an action bar vs. bottom tabs in iOS.
</div>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Don't use labeled back buttons on action bars</h4>
<p>Other platforms use an explicit back button with label to allow the user to navigate up the
application's hierarchy. Instead, Android uses the main action bar's app icon for hierarchical
navigation and the navigation bar's back button for temporal navigation. For more information,
please review the <a href="../patterns/navigation.html">Navigation</a> pattern.</p>
<p>Follow this guideline to provide a consistent navigation experience across the platform.</p>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/migrating_ios_galleries.png">
<div class="figure-caption">
Android action bar with up caret vs. iOS labeled "Back" button.
</div>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-5">
<h4>Don't use right-pointing carets on line items</h4>
<p>A common pattern on other platforms is the display of right-pointing carets on line items that allow
the user to drill deeper into additional content.</p>
<p>Android does not use such indicators on drill-down line items. Avoid them to stay consistent with
the platform and in order to not have the user guess as to what the meaning of those carets may be.</p>
</div>
<div class="layout-content-col span-8">
<img src="../static/content/migrating_ios_settings.png">
<div class="figure-caption">
Android settings without right-pointing carets in line items vs. iOS settings.
</div>
</div>
</div>
<h2>Device Independence</h2>
<p>Remember that your app will run on a wide variety of different screen sizes. Create visual assets
for different screen sizes and densities and make use of concepts such as multi-pane layouts to
appropriately scale your UI on different device form factors.</p>
<p>For more information, read <a href="../style/devices-displays.html">Devices and Displays</a> as
well as <a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a> in this design guide.</p>
<div class="layout-content-row content-footer">
<div class="paging-links layout-content-col span-9">&nbsp;</div>
<div class="paging-links layout-content-col span-4">
<a href="#" class="prev-page-link">Previous</a>
<a href="#" class="next-page-link">Next</a>
</div>
</div>
</div>
</div>
<div id="page-footer">
<p id="copyright">
Except as noted, this content is licensed under
<a href="http://creativecommons.org/licenses/by/2.5/" target="_blank">
Creative Commons Attribution 2.5</a>.<br>
For details and restrictions, see the
<a href="http://developer.android.com/license.html" target="_blank">Content License</a>.
</p>
<p>
<a href="http://www.android.com/terms.html" target="_blank">Site Terms of Service</a> &ndash;
<a href="http://www.android.com/privacy.html" target="_blank">Privacy Policy</a> &ndash;
<a href="http://www.android.com/branding.html" target="_blank">Brand Guidelines</a>
</p>
</div>
</div>
<script src="../static/jquery-1.6.2.min.js"></script>
<script>
var SITE_ROOT = '../';
</script>
<script src="../static/default.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5831155-1");
pageTracker._trackPageview();
</script>
</body>
</html>