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 <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 <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 </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 76 layout definition.</p> 77 78 <p>To be notified when the timer finishes or when users tap on it, implement the corresponding 79 listener methods in your activity:</p> 80 81 <pre> 82 public class WearActivity extends Activity implements 83 DelayedConfirmationView.DelayedConfirmationListener { 84 85 private DelayedConfirmationView mDelayedView; 86 87 @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 @Override 98 public void onTimerFinished(View view) { 99 // User didn't cancel, perform the action 100 } 101 102 @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 110 an action:</p> 111 112 <pre> 113 // Two seconds to cancel the action 114 mDelayedView.setTotalTimeMs(2000); 115 // Start the timer 116 mDelayedView.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> 122 A 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 128 that starts <code>ConfirmationActivity</code> from one of your activities. You can specify 129 one 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 140 manifest file:</p> 141 142 <pre> 143 <manifest> 144 <application> 145 ... 146 <activity 147 android:name="android.support.wearable.activity.ConfirmationActivity"> 148 </activity> 149 </application> 150 </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> 156 Intent intent = new Intent(this, ConfirmationActivity.class); 157 intent.putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE, 158 ConfirmationActivity.SUCCESS_ANIMATION); 159 intent.putExtra(ConfirmationActivity.EXTRA_MESSAGE, 160 getString(R.string.msg_sent)); 161 startActivity(intent); 162 </pre> 163 164 <p>After showing the confirmation animation, <code>ConfirmationActivity</code> finishes and your 165 activity resumes.</p> 166
