Tombol

Tombol mengomunikasikan aksi yang akan terjadi bila pengguna menyentuhnya.

Tombol adalah komponen Proyek Open Source Android (AOSP) standar. Layar ini dapat diisi dengan warna latar belakang solid, atau tidak terisi (dengan latar belakang transparan). Tombol terisi menunjukkan tindakan utama atau pilihan. Tombol dapat muncul secara terpisah atau berkelompok – 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 disukai
3. Label tombol

Spesifikasi

Panjang minimum dan maksimum tombol

Panjang label tombol maksimum 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 akan 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

Tepi melengkung pada tombol {i>hero<i} menekankan pentingnya tombol ini
Tepi membulat tombol banner besar menekankan tingkat pentingnya

Penyesuaian

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 nonaktif
  • Menyetel dimensi tombol, bentuk sudut, dan penempatan
  • Menggunakan {i>motion <i}untuk memberikan umpan balik kepada pengguna

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

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

Contoh

tombol tidak terisi dan terisi
Tombol tidak terisi dan terisi, dengan tombol yang terisi menunjukkan tindakan utama
tombol terisi dinonaktifkan
Warna dan opasitas tombol yang terisi ini menunjukkan status nonaktif
Dialog tombol tidak terisi
Tombol tidak terisi dalam dialog menunjukkan tindakan dengan bobot yang sama
durasi gerakan ripple tombol
Gerakan ripple ini berdurasi 330 md. {i>Password<i} digunakan untuk mengonfirmasi kontak pengguna dengan sebuah tombol.
Animasi ripple tombol
Gerakan riak ini awalnya menempatkan 60% permukaan tombol. Melebar dari ketukan pengguna, dan berhenti 10dp dari tepi tombol.