Desain Material untuk Android

Coba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan tema di Compose.

Desain Material adalah panduan komprehensif untuk desain visual, gerak, dan interaksi di seluruh platform dan perangkat. Untuk menggunakan Desain Material di aplikasi Android, ikuti panduan yang ditentukan dalam spesifikasi Desain Material. Jika aplikasi menggunakan Jetpack Compose, Anda dapat menggunakan library Compose Material 3. Jika aplikasi menggunakan tampilan, Anda dapat menggunakan library Komponen Material Android.

Android menyediakan fitur berikut untuk membantu Anda membuat aplikasi Desain Material:

  • Tema aplikasi Desain Material untuk menyesuaikan gaya semua widget UI Anda
  • Widget untuk tampilan kompleks, misalnya daftar dan kartu
  • API untuk bayangan dan animasi kustom

Tema dan widget material

Untuk memanfaatkan fitur Material, seperti penataan gaya widget UI standar, dan untuk menyederhanakan definisi gaya aplikasi, terapkan tema berbasis Material ke aplikasi Anda.

Gambar 1. Tema Material Gelap.
Gambar 2. Tema Material Terang.

Jika Anda menggunakan Android Studio untuk membuat project Android, tema Material akan diterapkan secara default. Untuk mempelajari cara memperbarui tema project, lihat Gaya dan tema.

Untuk memberi pengguna pengalaman yang familier, gunakan pola UX Material yang paling umum:

Jika memungkinkan, gunakan Ikon Material yang telah ditentukan sebelumnya. Misalnya, untuk tombol "menu" navigasi di panel navigasi, gunakan ikon "hamburger" standar. Lihat Ikon Desain Material untuk daftar ikon yang tersedia. Anda juga dapat mengimpor ikon SVG dari library Material Icon dengan Vector Asset Studio Android Studio.

Ketinggian bayangan dan kartu

Selain properti X dan Y, tampilan di Android memiliki properti Z. Properti ini menyatakan elevasi tampilan, yang menentukan hal berikut:

  • Ukuran bayangannya: tampilan dengan nilai Z yang lebih tinggi menghasilkan bayangan yang lebih besar.
  • Urutan gambar: tampilan dengan nilai Z yang lebih tinggi akan muncul di atas tampilan lain.
Gambar 3. Nilai Z yang mewakili elevasi.

Anda dapat menerapkan elevasi ke tata letak berbasis kartu untuk membantu menampilkan bagian informasi penting di dalam kartu yang menyediakan tampilan Material. Anda dapat menggunakan widget CardView untuk membuat kartu dengan elevasi default. Untuk informasi selengkapnya, lihat Membuat tata letak berbasis kartu.

Untuk informasi tentang menambahkan elevasi ke tampilan lain, lihat Membuat bayangan dan tampilan klip.

Animasi

Gambar 4. Animasi respons sentuh.

Animation API memungkinkan Anda membuat animasi kustom untuk masukan sentuh di kontrol UI, perubahan status tampilan, dan transisi aktivitas.

API ini memungkinkan Anda:

  • Menanggapi peristiwa sentuh di tampilan Anda dengan animasi masukan sentuhan.
  • Menyembunyikan dan menampilkan tampilan dengan animasi buka melingkar.
  • Beralih antar-aktivitas dengan animasi transisi aktivitas kustom.
  • Membuat animasi yang lebih alami dengan gerakan melengkung.
  • Menganimasikan perubahan di satu atau beberapa properti tampilan dengan animasi perubahan status tampilan.
  • Menampilkan animasi di drawable daftar status di antara perubahan status tampilan.

Animasi masukan sentuh disertakan dalam beberapa tampilan standar, seperti tombol. API animasi memungkinkan Anda menyesuaikan animasi tersebut dan menambahkannya ke tampilan kustom Anda.

Untuk informasi selengkapnya, lihat Pengantar animasi.

Drawable

Kemampuan drawable ini membantu Anda mengimplementasikan aplikasi Desain Material:

  • Vektor drawable bersifat skalabel tanpa kehilangan definisi dan sangat cocok untuk ikon satu warna dalam aplikasi. Pelajari vektor drawable lebih lanjut.
  • Menambahkan tint drawable memungkinkan Anda menentukan bitmap sebagai mask alfa dan menambahkan tint dengan warna pada saat runtime. Lihat cara menambahkan tint ke drawable.
  • Ekstraksi warna memungkinkan Anda mengekstrak warna yang menonjol dari gambar bitmap. Lihat cara memilih warna dengan Palette API.