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.
Além de ler as seções abaixo, revise os princípios de design para Wear OS.
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:
- Adicione um elemento
<CircularProgressLayout>
ao layout. - Implemente a interface
OnTimerFinishedListener
na sua atividade. - 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:
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 o timer, adicione o seguinte código ao ponto na atividade em que os usuários selecionam uma ação:
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: 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
:
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:
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);
Depois de mostrar a animação de confirmação, a ConfirmationActivity
será concluída e a atividade retomada.