The confirmations that are displayed in Wear OS apps use the whole screen or a larger portion of it than those in handheld apps. This ensures that users can see these confirmations by just glancing at the screen and that they have large enough touch targets to cancel an action.
In addition to the reading the sections below, you should review the Wear OS design principles.
The Wearable UI Library helps you show confirmation animations and timers in your apps:
- Confirmation timers
- Automatic confirmation timers show users an animated timer that lets them cancel an action they just performed.
- Confirmation animations
- Confirmation animations give users visual feedback when they complete an action.
The following sections show you how to implement these patterns.
Use automatic confirmation timers

Figure 1: A confirmation timer.
Automatic confirmation timers let users cancel an action they just performed. When the user performs the action, your app shows a button to cancel the action with a timer animation and starts the timer. The user has the option to cancel the action until the timer finishes. Your app gets notified if the user cancels the action and when the timer expires.
To show a confirmation timer when users complete an action in your app:
- Add a
<CircularProgressLayout>
element to your layout. - Implement the
OnTimerFinishedListener
interface in your activity. - Set the duration of the timer and start it when the user completes an action.
To use CircularProgressLayout
in your app, you need to include the following
dependencies (or later versions)
in the build.gradle
file of your wear
module:
dependencies{ ... compile 'androidx.wear:wear:1.2.0' compile 'androidx.core:core:1.2.0' compile 'androidx.legacy:legacy-support-core-utils:1.0.0' compile 'androidx.legacy:legacy-support-core-ui:1.0.0' ... }
You can add the
<CircularProgressLayout>
element to your layout as follows:
<androidx.wear.widget.CircularProgressLayout android:id="@+id/circular_progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="4dp" app:backgroundColor="@color/darkblue" app:colorSchemeColors="@color/lightblue" app:strokeWidth="4dp"> <ImageView android:id="@+id/image_view" android:src="@drawable/cancel" android:layout_width="40dp" android:layout_height="40dp" /> </androidx.wear.widget.CircularProgressLayout>
You can also add any view as a child to CircularProgressLayout
to display a progress
timer around it. The above example uses an ImageView
, but it could also be a
TextView
to show text inside.
Note: The
CircularProgressLayout
class replaces a similar,
deprecated class in the Wearable Support Library.
To be notified when the timer finishes or when users tap on it, implement the corresponding listener methods in your activity:
Kotlin
class WearActivity : AppCompatActivity(), CircularProgressLayout.OnTimerFinishedListener, View.OnClickListener { private var circularProgress: CircularProgressLayout? = null override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_wear_activity) circularProgress = findViewById<CircularProgressLayout>(R.id.circular_progress).apply { onTimerFinishedListener = this@WearActivity setOnClickListener(this@WearActivity) } } override fun onTimerFinished(layout: CircularProgressLayout) { // User didn't cancel, perform the action } override fun onClick(view: View) { // User canceled, abort the action circularProgress?.stopTimer() } }
Java
public class WearActivity extends Activity implements CircularProgressLayout.OnTimerFinishedListener, View.OnClickListener { private CircularProgressLayout circularProgress; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_wear_activity); circularProgress = (CircularProgressLayout) findViewById(R.id.circular_progress); circularProgress.setOnTimerFinishedListener(this); circularProgress.setOnClickListener(this); } @Override public void onTimerFinished(CircularProgressLayout layout) { // User didn't cancel, perform the action } @Override public void onClick(View view) { if (view.equals(circularProgress)) { // User canceled, abort the action circularProgress.stopTimer(); } } }
To start the timer, add the following code to the point in your activity where users select an action:
Kotlin
circularProgress?.apply { // Two seconds to cancel the action totalTime = 2000 // Start the timer startTimer() }
Java
// Two seconds to cancel the action circularProgress.setTotalTime(2000); // Start the timer circularProgress.startTimer();

Figure 2: A confirmation animation.
Show confirmation animations
To show a confirmation animation when users complete an action in your app,
create an intent that starts
ConfirmationActivity
from one of your activities. You can specify
one of the these animations with the
EXTRA_ANIMATION_TYPE
intent extra:
You can also add a message that appears under the confirmation icon.
To use the
ConfirmationActivity
in your app, first declare this activity in
your manifest file:
<manifest> <application> ... <activity android:name="android.support.wearable.activity.ConfirmationActivity"> </activity> </application> </manifest>
Then determine the result of the user action and start the activity with an intent:
Kotlin
val intent = Intent(this, ConfirmationActivity::class.java).apply { putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE, ConfirmationActivity.SUCCESS_ANIMATION) putExtra(ConfirmationActivity.EXTRA_MESSAGE, getString(R.string.msg_sent)) } startActivity(intent)
Java
Intent intent = new Intent(this, ConfirmationActivity.class); intent.putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE, ConfirmationActivity.SUCCESS_ANIMATION); intent.putExtra(ConfirmationActivity.EXTRA_MESSAGE, getString(R.string.msg_sent)); startActivity(intent);
After showing the confirmation animation,
ConfirmationActivity
finishes and your activity resumes.