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