Las confirmaciones que se muestran en las apps de Wear OS usan la pantalla completa o una porción mayor que las de las apps para dispositivos portátiles. Esto garantiza que los usuarios puedan ver estas confirmaciones con solo mirar la pantalla y que tengan objetivos táctiles lo suficientemente grandes como para cancelar una acción.
Además de leer las secciones que se incluyen a continuación, debes consultar los principios de diseño de Wear OS.
La Biblioteca de IU para wearables te ayuda a mostrar animaciones de confirmación y temporizadores en tus apps:
- Temporizadores de confirmación
- Los temporizadores de confirmación automática les muestran a los usuarios un temporizador animado que les permite cancelar una acción que acaban de realizar.
- Animaciones de confirmación
- Las animaciones de confirmación les proporcionan a los usuarios comentarios visuales cuando completan una acción.
Las siguientes secciones te muestran cómo implementar estos patrones.
Cómo utilizar temporizadores de confirmación automática

Figura 1: Temporizador de confirmación
Los temporizadores de confirmación automática les permiten a los usuarios cancelar una acción que acaban de realizar. Cuando el usuario realiza la acción, tu app muestra un botón para cancelarla con una animación de temporizador e inicia el temporizador. Entonces, el usuario tiene tiempo de cancelar la acción hasta que finalice el temporizador. Tu app recibe una notificación si el usuario cancela la acción y cuando vence el temporizador.
Para mostrar un temporizador de confirmación cuando los usuarios completen una acción en tu app, haz lo siguiente:
- Agrega un elemento
<CircularProgressLayout>
a tu diseño. - Implementa la interfaz
OnTimerFinishedListener
en tu actividad. - Establece la duración del temporizador e inícialo cuando el usuario complete una acción.
Para usar CircularProgressLayout
en tu app, debes incluir las siguientes dependencias (o versiones posteriores) en el archivo build.gradle
de tu módulo wear
:
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' ... }
Puedes agregar el elemento <CircularProgressLayout>
a tu diseño de la siguiente manera:
<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>
También puedes agregar cualquier vista como elemento secundario a CircularProgressLayout
para mostrar un temporizador de progreso a su alrededor. En el ejemplo anterior, se usa un elemento ImageView
, pero también podría ser un elemento TextView
para mostrar texto en su interior.
Nota: La clase
CircularProgressLayout
reemplaza una clase obsoleta de la biblioteca de compatibilidad con dispositivos wearable.
Para recibir una notificación cuando finalice el temporizador o cuando los usuarios lo presionen, implementa los métodos de receptor correspondientes en tu actividad:
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(); } } }
Para iniciar el temporizador, agrega el siguiente código al punto de tu actividad en la que los usuarios seleccionan una acción:
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();

Figura 2: Animación de confirmación
Cómo mostrar animaciones de confirmación
Para mostrar una animación de confirmación cuando los usuarios completan una acción en tu app, crea un intent que inicie ConfirmationActivity
desde una de tus actividades. Puedes especificar una de estas animaciones con el intent adicional EXTRA_ANIMATION_TYPE
:
También puedes agregar un mensaje para que aparezca debajo del ícono de confirmación.
Para usar ConfirmationActivity
en tu app, primero declara esta actividad en tu archivo de manifiesto:
<manifest> <application> ... <activity android:name="android.support.wearable.activity.ConfirmationActivity"> </activity> </application> </manifest>
Luego, determina el resultado de la acción del usuario e inicia la actividad con un 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);
Después de mostrar la animación de confirmación, ConfirmationActivity
finaliza y se reanuda la actividad.