Tombol

Tombol mengomunikasikan tindakan yang akan terjadi saat pengguna menyentuhnya.

Tombol adalah komponen Proyek Open Source Android (AOSP) standar. Iklan dapat diisi dengan warna latar belakang yang solid, atau tidak terisi (dengan latar belakang transparan). Tombol terisi menunjukkan tindakan utama atau pilihan. Tombol dapat muncul secara terpisah atau grup – tidak seperti tab, yang selalu muncul dalam grup.


Anatomi

Anatomi tombol
1. Penampung tombol tidak terisi
2. Penampung tombol terisi, yang menunjukkan tindakan utama atau yang diinginkan
3. Label tombol

Spesifikasi

Panjang tombol minimal dan maksimal

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

Tombol dengan ikon vs. tombol default

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 dalam komponen lain, seperti panel aplikasi atau dialog.

Penempatan tombol di panel aplikasi

Tombol ditempatkan di sisi kanan panel aplikasi
Tombol ditempatkan di sisi kanan panel aplikasi

Tombol dalam dialog

Tombol dalam dialog biasanya terletak di sisi kiri bawah dialog
Tombol dalam dialog biasanya terletak di sisi kiri bawah dialog

Tombol utama

Ujung bulat pada tombol hero menekankan pentingnya
Edge bulat tombol utama menekankan pentingnya

Penyesuaian

OEM dapat mencerminkan mereknya dengan memodifikasi tampilan visual tombol, seperti:

  • Menentukan warna aksen
  • Menyediakan ikon kustom
  • Menambahkan font kustom
  • Mengubah tampilan tombol yang aktif, tidak aktif, dan yang dinonaktifkan
  • Menyetel dimensi tombol, bentuk sudut, dan penempatan
  • Menggunakan gerakan untuk memberikan masukan kepada pengguna

Panduan Integrasi Library UI Mobil memberikan panduan OEM untuk menyesuaikan komponen.

Sistem desain menyediakan panduan khusus untuk menggunakan tata letak, warna, tipografi, pengaturan ukuran, bentuk, dan gerakan untuk menyesuaikan komponen.


Contoh

tombol tidak terisi dan terisi
Tombol tidak terisi dan terisi, dengan tombol terisi menunjukkan tindakan utama
tombol yang diisi dinonaktifkan
Warna dan opasitas tombol yang terisi ini menunjukkan status dinonaktifkan
Dialog tombol tidak terisi
Tombol yang tidak terisi dalam dialog menunjukkan tindakan yang berbobot sama
durasi gerakan ripple tombol
Gerakan ripple ini memiliki durasi 330 md. Notifikasi tersebut digunakan untuk mengonfirmasi kontak pengguna dengan tombol.
Animasi ripple tombol
Gerakan ripple ini awalnya menempatkan 60% dari permukaan tombol. Melebar dari ketukan pengguna, dan berhenti 10 dp dari tepi tombol.