Google Git
Sign in
android / platform / frameworks / base / 737904669017c39d7780589de3ead7fc959bd3c5 / . / docs / html / design / building-blocks / progress.html
blob: 7fa830de463af356a0cb816f5419685c2663d950 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Android Design - Progress and Activity
</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 id="system">Feedback</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>When an operation of interest to the user is taking place over a relatively long period of time,
provide visual feedback that it's still happening and in the process of being completed.</p>
<h2>Progress</h2>
<p>If you know the percentage of the operation that has been completed, use a determinate progress bar
to give the user a sense of how much longer it will take.</p>
<img src="../static/content/progress_download.png">
<p>The progress bar should always travel from 0% to 100% completion. Avoid setting the bar to a lower
value than a previous value, or using the same progress bar to represent the progress of multiple
events, since doing so makes the display meaningless. If you're not sure how long a particular
operation will take, use an indeterminate progress indicator.</p>
<div class="vspace size-2">&nbsp;</div>
<img src="../static/content/progress_themes.png">
<div class="figure-caption">
Progress bar in Holo Dark and Holo Light.
</div>
<h2 id="activity">Activity</h2>
<p>If you don't know how much longer an operation will continue, use an indeterminate progress
indicator. There are two styles available: a flat bar and a circle. Use the one that best fits the
available space.</p>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<img src="../static/content/progress_activity.png">
</div>
<div class="layout-content-col span-7 with-callouts">
<ol>
<li class="value-1"><h4>Activity bar (shown with the Holo Dark theme)</h4>
<p>
An indeterminate activity bar is used at the start of an application download because Market hasn't
been able to contact the server yet, and it's not possible to determine how long it will take for
the download to begin.
</p>
</li>
</ol>
</div>
</div>
<div class="layout-content-row">
<div class="layout-content-col span-6">
<img src="../static/content/progress_activity2.png">
</div>
<div class="layout-content-col span-7 with-callouts">
<ol>
<li class="value-2"><h4>Activity circle (shown with the Holo Light theme)</h4>
<p>
An indeterminate activity circle is used in the Gmail application when a message is being
loaded because it's not possible to determine how long it will take to download the email.
</p>
</li>
</ol>
</div>
</div>
<p>You should only use one activity indicator on screen per activity, and it should appropriately sized
for the surrounding context. For example, the largest activity circle works well when displayed in a
blank content area, but not in a smaller dialog box.</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>