Mostrar confirmações no Wear

As confirmações exibidas em apps para Wear OS usam a tela inteira ou uma parte maior da tela do que os apps para dispositivos portáteis. Isso garante que os usuários vejam essas confirmações apenas olhando para a tela e que tenham áreas de toque grandes o suficiente para cancelar uma ação.

A Biblioteca de IU de wearables ajuda a exibir animações e timers de confirmação nos seus apps:

Timers de confirmação

Os timers de confirmação automática mostram aos usuários um timer animado que permite cancelar uma ação que eles acabaram de realizar.

Animações de confirmação

As animações de confirmação oferecem aos usuários um feedback visual quando concluem uma ação.

As seções a seguir mostram como implementar esses padrões.

Usar timers de confirmação automática

Figura 1: um timer de confirmação.

Os timers de confirmação automática permitem aos usuários cancelar uma ação que acabaram de realizar. Quando o usuário realiza a ação, o app mostra um botão para cancelá-la com um timer animado e inicia o timer. O usuário tem a opção de cancelar a ação antes que o timer termine. O app será notificado se o usuário cancelar a ação e quando o timer expirar.

Para mostrar um timer de confirmação quando os usuários concluírem uma ação no seu app:

1. Adicione um elemento <CircularProgressLayout> ao layout.
2. Implemente a interface OnTimerFinishedListener na sua atividade.
3. Defina a duração do timer e inicie-o quando o usuário concluir uma ação.

Para usar o CircularProgressLayout no seu app, você precisa incluir as seguintes dependências (ou versões posteriores) no arquivo build.gradle do 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'
        ...
    }
    

É possível adicionar o elemento <CircularProgressLayout> ao seu layout da seguinte maneira:

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

Você também pode adicionar qualquer visualização como filha ao CircularProgressLayout para exibir um timer de progresso. O exemplo acima usa uma ImageView, mas também pode ser incluída uma TextView para mostrar o texto dentro dela.

Observação: a classe CircularProgressLayout substitui uma classe obsoleta semelhante na Biblioteca de Suporte de Wearables.

Para ser notificado quando o timer terminar ou quando os usuários tocarem nele, implemente os métodos de listener correspondentes na sua atividade:

    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 o timer, adicione o seguinte código ao ponto na atividade em que os usuários selecionam uma ação:

    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: uma animação de confirmação.

Mostrar animações de confirmação

Para mostrar uma animação de confirmação quando os usuários concluírem uma ação no seu app, crie um intent que inicie ConfirmationActivity em uma das suas atividades. Você pode especificar uma dessas animações com o intent extra EXTRA_ANIMATION_TYPE:

• SUCCESS_ANIMATION
• FAILURE_ANIMATION
• OPEN_ON_PHONE_ANIMATION

Você também pode adicionar uma mensagem para aparecer abaixo do ícone de confirmação.

Para usar ConfirmationActivity no app, primeiro declare essa atividade no seu arquivo de manifesto:

    <manifest>
      <application>
        ...
        <activity
            android:name="android.support.wearable.activity.ConfirmationActivity">
        </activity>
      </application>
    </manifest>
    

Em seguida, determine o resultado da ação do usuário e inicie a atividade com um 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);
    

Depois de mostrar a animação de confirmação, a ConfirmationActivity será concluída e a atividade retomada.