Menampilkan konfirmasi di Wear

Konfirmasi yang ditampilkan dalam aplikasi Wear OS menggunakan keseluruhan layar atau porsi lebih besar daripada yang ada dalam aplikasi perangkat genggam. Hal ini memastikan bahwa pengguna dapat melihat konfirmasi ini cukup dengan melihat layar sekilas dan mereka memiliki target sentuh yang cukup luas untuk membatalkan tindakan.

Selain membaca bagian di bawah ini, Anda harus meninjau Prinsip desain Wear OS.

Library UI Wearable membantu Anda menampilkan animasi konfirmasi dan timer dalam aplikasi Anda:

Timer konfirmasi
Timer konfirmasi otomatis menampilkan timer animasi yang memungkinkan pengguna membatalkan tindakan yang baru saja dilakukan.
Animasi konfirmasi
Animasi konfirmasi memberi pengguna masukan visual ketika menyelesaikan tindakan.

Bagian berikut menampilkan cara mengimplementasikan pola-pola ini.

Menggunakan timer konfirmasi otomatis

Gambar 1: Timer konfirmasi.

Timer konfirmasi otomatis memungkinkan pengguna membatalkan tindakan yang baru saja dilakukan. Ketika pengguna melakukan tindakan tersebut, aplikasi Anda akan menampilkan tombol untuk membatalkan tindakan dengan animasi timer dan memulai timer. Pengguna memiliki opsi untuk membatalkan tindakan hingga timer selesai. Aplikasi Anda akan mendapat notifikasi jika pengguna membatalkan tindakan dan ketika timer berhenti.

Untuk menampilkan timer konfirmasi ketika pengguna menyelesaikan tindakan di aplikasi Anda:

  1. Tambahkan elemen <CircularProgressLayout> ke tata letak Anda.
  2. Implementasikan antarmuka OnTimerFinishedListener dalam aktivitas Anda.
  3. Setel durasi timer dan mulai ketika pengguna menyelesaikan tindakan.

Untuk menggunakan CircularProgressLayout dalam aplikasi, Anda perlu menyertakan dependensi berikut (atau versi lebih baru) dalam file build.gradle pada modul wear Anda:

    dependencies{
         ...
        compile 'com.android.support:wear:26.0.0'
        compile 'com.android.support:support-compat:26.0.0'
        compile 'com.android.support:support-core-utils:26.0.0'
        compile 'com.android.support:support-core-ui:26.0.0'
        ...
    }
    

Anda dapat menambahkan elemen <CircularProgressLayout> ke tata letak Anda seperti berikut:

    <android.support.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" />
    </android.support.wear.widget.CircularProgressLayout>
    

Anda juga dapat menambahkan tampilan apa pun sebagai turunan ke CircularProgressLayout untuk menampilkan timer progres di sekitarnya. Contoh di atas menggunakan ImageView, tetapi hal itu dapat juga berupa TextView untuk menampilkan teks di dalamnya.

Catatan: Class CircularProgressLayout menggantikan class serupa yang tidak digunakan lagi dalam Wearable Support Library.

Untuk mendapat notifikasi ketika timer berhenti atau pengguna mengetuknya, implementasikan metode pemroses yang sesuai dalam aktivitas Anda:

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

Untuk memulai timer, tambahkan kode berikut ke titik dalam aktivitas Anda tempat pengguna memilih tindakan:

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

Gambar 2: Animasi konfirmasi.

Menampilkan animasi konfirmasi

Untuk menampilkan animasi konfirmasi ketika pengguna menyelesaikan tindakan dalam aplikasi Anda, buat intent yang akan memulai ConfirmationActivity dari salah satu aktivitas Anda. Anda dapat menentukan salah satu animasi dengan ekstra intent EXTRA_ANIMATION_TYPE:

Anda juga dapat menambahkan pesan yang muncul di bawah ikon konfirmasi.

Untuk menggunakan ConfirmationActivity dalam aplikasi Anda, hal pertama adalah nyatakan aktivitas ini dalam file manifes:

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

Kemudian, tentukan hasil tindakan pengguna dan mulai aktivitas dengan 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);
    

Setelah menampilkan animasi konfirmasi, ConfirmationActivity akan berhenti dan aktivitas Anda akan dilanjutkan.