c9506415d5
ce470e17fd4298c1b8aa9a5fd7493bde7a6be840 8874ab0473f4db10e71bf0537c0703db03bac4ee bdd8d0fada73dabbda7f6f174c17317d1e30a79e 6443ca4cd9406ed8e9ba55461d4b2eb677aad17a 5ac5a324b377c8c5f29a3d368ebfdc76b0d02e3e 1edd4ae5c4748bd9d1e64f65dc554790063d59b8 be13fa0b7ac7929e65b1f3e40b2834ed0d9ed7ff 6a681afd38d9881154207436e5e145856e9d2f75 353474c0acdad9b8ffdb86d3d5f32137885dd720 2b1584c1d53cd1070d5157c07158828b4baf8844 Had to revert these because they're not ready to be published. Change-Id: I704cf0df1db9aa159295bdf78e97cef9605addc6
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>
|