1page.title=Showing Confirmations
2
3@jd:body
4
5<div id="tb-wrapper">
6<div id="tb">
7<h2>This lesson teaches you to</h2>
8<ol>
9  <li><a href="#confirmation-timers">Use Automatic Confirmation Timers</a></li>
10  <li><a href="#show-confirmation">Show Confirmation Animations</a></li>
11</ol>
12<h2>You should also read</h2>
13<ul>
14  <li><a href="{@docRoot}design/wear/index.html">Android Wear Design Principles</a></li>
15</ul>
16</div>
17</div>
18
19
20<p><a href="{@docRoot}design/wear/patterns.html#Countdown">Confirmations</a> in Android Wear apps
21use the whole screen or a larger portion of it than those in handheld apps. This ensures that
22users can see these confirmations by just glancing at the screen and that they have large enough
23touch targets to cancel an action.</p>
24
25<p>The Wearable UI Library helps you show confirmation animations and timers in your
26Android Wear apps:</p>
27
28<dl>
29<dt><em>Confirmation timers</em></dt>
30  <dd>Automatic confirmation timers show users an animated timer that lets them cancel an action
31  they just performed.</dd>
32<dt><em>Confirmation animations</em></dt>
33  <dd>Confirmation animations give users visual feedback when they complete an action.</dd>
34</dl>
35
36<p>The following sections show you how to implement these patterns.</p>
37
38
39<h2 id="confirmation-timers">Use Automatic Confirmation Timers</h2>
40
41<div style="float:right;margin-left:25px;width:230px;margin-top:10px">
42<img src="{@docRoot}wear/images/09_uilib.png" width="230" height="230" alt=""/>
43<p class="img-caption" style="text-align:center"><strong>Figure 1:</strong>
44A confirmation timer.</p>
45</div>
46
47<p>Automatic confirmation timers let users cancel an action they just performed. When the user
48performs the action, your app shows a button to cancel the action with a timer animation and
49starts the timer. The user has the option to cancel the action until the timer finishes. Your app
50gets notified if the user cancels the action and when the timer expires.</p>
51
52<p>To show a confirmation timer when users complete an action in your app:</p>
53
54<ol>
55<li>Add a <code>DelayedConfirmationView</code> element to your layout.</li>
56<li>Implement the <code>DelayedConfirmationListener</code> interface in your activity.</li>
57<li>Set the duration of the timer and start it when the user completes an action.</li>
58</ol>
59
60<p>Add the <code>DelayedConfirmationView</code> element to your layout as follows:</p>
61
62<pre>
63&lt;android.support.wearable.view.DelayedConfirmationView
64    android:id="@+id/delayed_confirm"
65    android:layout_width="40dp"
66    android:layout_height="40dp"
67    android:src="@drawable/cancel_circle"
68    app:circle_border_color="@color/lightblue"
69    app:circle_border_width="4dp"
70    app:circle_radius="16dp">
71&lt;/android.support.wearable.view.DelayedConfirmationView>
72</pre>
73
74<p>You can assign a drawable resource to display inside the circle with the
75<code>android:src</code> attribute and configure the parameters of the circle directly on the
76layout definition.</p>
77
78<p>To be notified when the timer finishes or when users tap on it, implement the corresponding
79listener methods in your activity:</p>
80
81<pre>
82public class WearActivity extends Activity implements
83                           DelayedConfirmationView.DelayedConfirmationListener {
84
85    private DelayedConfirmationView mDelayedView;
86
87    &#64;Override
88    protected void onCreate(Bundle savedInstanceState) {
89        super.onCreate(savedInstanceState);
90        setContentView(R.layout.activity_wear_activity);
91
92        mDelayedView =
93                (DelayedConfirmationView) findViewById(R.id.delayed_confirm);
94        mDelayedView.setListener(this);
95    }
96
97    &#64;Override
98    public void onTimerFinished(View view) {
99        // User didn't cancel, perform the action
100    }
101
102    &#64;Override
103    public void onTimerSelected(View view) {
104        // User canceled, abort the action
105    }
106}
107</pre>
108
109<p>To start the timer, add the following code to the point in your activity where users select
110an action:</p>
111
112<pre>
113// Two seconds to cancel the action
114mDelayedView.setTotalTimeMs(2000);
115// Start the timer
116mDelayedView.start();
117</pre>
118
119<div style="float:right;margin-left:25px;width:210px;margin-top:15px">
120<img src="{@docRoot}wear/images/08_uilib.png" width="200" height="200" alt=""/>
121<p class="img-caption" style="text-align:center;margin-left:-5px"><strong>Figure 2:</strong>
122A confirmation animation.</p>
123</div>
124
125<h2 id="show-confirmation">Show Confirmation Animations</h2>
126
127<p>To show a confirmation animation when users complete an action in your app, create an intent
128that starts <code>ConfirmationActivity</code> from one of your activities. You can specify
129one of the these animations with the <code>EXTRA_ANIMATION_TYPE</code> intent extra:</p>
130
131<ul>
132<li><code>SUCCESS_ANIMATION</code></li>
133<li><code>FAILURE_ANIMATION</code></li>
134<li><code>OPEN_ON_PHONE_ANIMATION</code></li>
135</ul>
136
137<p>You can also add a message that appears under the confirmation icon.</p>
138
139<p>To use the <code>ConfirmationActivity</code> in your app, first declare this activity in your
140manifest file:</p>
141
142<pre>
143&lt;manifest>
144  &lt;application>
145    ...
146    &lt;activity
147        android:name="android.support.wearable.activity.ConfirmationActivity">
148    &lt;/activity>
149  &lt;/application>
150&lt;/manifest>
151</pre>
152
153<p>Then determine the result of the user action and start the activity with an intent:</p>
154
155<pre>
156Intent intent = new Intent(this, ConfirmationActivity.class);
157intent.putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE,
158                ConfirmationActivity.SUCCESS_ANIMATION);
159intent.putExtra(ConfirmationActivity.EXTRA_MESSAGE,
160                getString(R.string.msg_sent));
161startActivity(intent);
162</pre>
163
164<p>After showing the confirmation animation, <code>ConfirmationActivity</code> finishes and your
165activity resumes.</p>
166