Tombol

Tombol mengkomunikasikan suatu tindakan yang terjadi ketika pengguna menyentuhnya.

Tombol adalah komponen standar Android Open Source Project (AOSP). Tombol dapat diisi dengan warna latar belakang solid, atau tidak diisi (dengan latar belakang transparan). Tombol yang diisi menunjukkan tindakan utama atau yang lebih disukai. Tombol dapat muncul secara independen atau dalam kelompok – tidak seperti tab , yang selalu muncul dalam kelompok.

Anatomi

Anatomi tombol
1. Wadah kancing yang belum terisi
2. Wadah tombol yang terisi, menunjukkan tindakan utama atau yang disukai.
3. Label tombol

Spesifikasi

Panjang minimum dan maksimum tombol

Panjang label tombol maksimum adalah 20 karakter. Lebar tombol minimum adalah 156dp.
Panjang label tombol maksimum adalah 20 karakter. Lebar tombol minimum adalah 156 dp.

Tombol dengan ikon vs. tombol standar

Tombol dapat menyertakan ikon. Jika disertakan, ikon biasanya muncul di sebelah kiri teks tombol.
Tombol dapat menyertakan ikon. Jika disertakan, ikon biasanya muncul di sebelah kiri teks tombol.

Tombol dapat muncul sebagai elemen di komponen lain, seperti bilah aplikasi atau dialog .

Penempatan tombol di bilah aplikasi

Tombol-tombol ditempatkan di sisi kanan bilah aplikasi.
Tombol-tombol ditempatkan di sisi kanan bilah aplikasi.

Tombol dalam dialog

Tombol pada dialog biasanya terletak di sisi kiri bawah dialog.
Tombol-tombol dalam dialog biasanya terletak di sisi kiri bawah dialog.

Tombol Pahlawan

Tepi membulat pada tombol hero menekankan pentingnya tombol tersebut.
Tepi yang membulat menekankan pentingnya tombol utama (hero button).

Kustomisasi

Produsen OEM dapat mencerminkan merek mereka dengan memodifikasi tampilan visual tombol, seperti:

  • Menentukan warna aksen
  • Menyediakan ikon khusus
  • Menambahkan font kustom
  • Mengubah tampilan tombol aktif, tidak aktif, dan dinonaktifkan.
  • Mengatur dimensi tombol, bentuk sudut, dan penempatannya
  • Menggunakan gerakan untuk memberikan umpan balik kepada pengguna.

Panduan Integrasi Pustaka UI Mobil memberikan panduan kepada OEM untuk menyesuaikan komponen.

Contoh

tombol kosong dan terisi
Tombol yang kosong dan terisi, di mana tombol yang terisi menunjukkan tindakan utama.
tombol terisi dinonaktifkan
Warna dan opasitas tombol yang terisi ini menunjukkan status nonaktif.
Dialog tombol yang belum terisi
Tombol yang tidak terisi dalam dialog menunjukkan tindakan yang memiliki bobot yang sama.
durasi gerakan riak tombol
Gerakan riak ini memiliki durasi 330 ms. Gerakan ini digunakan untuk mengkonfirmasi kontak pengguna dengan tombol.
Animasi riak tombol
Gerakan riak ini awalnya menutupi 60% permukaan tombol. Gerakan tersebut meluas menjauh dari sentuhan pengguna, dan berhenti 10 dp dari tepi tombol.