Cómo mostrar confirmaciones en Wear

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.

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:

1. Agrega un elemento <CircularProgressLayout> a tu diseño.
2. Implementa la interfaz OnTimerFinishedListener en tu actividad.
3. 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:

    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()
        }
    }
    

    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:

    circularProgress?.apply {
        // Two seconds to cancel the action
        totalTime = 2000
        // Start the timer
        startTimer()
    }
    

    // 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:

• SUCCESS_ANIMATION
• FAILURE_ANIMATION
• OPEN_ON_PHONE_ANIMATION

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:

    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)
    

    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.