80 lines
2.6 KiB
Plaintext
80 lines
2.6 KiB
Plaintext
page.title=Progress and Activity
|
|
@jd:body
|
|
|
|
<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 id="progress">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="{@docRoot}design/media/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"> </div>
|
|
|
|
<img src="{@docRoot}design/media/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="{@docRoot}design/media/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 the Play Store
|
|
app 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="{@docRoot}design/media/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>
|