Bergabunglah bersama kami di ⁠#Android11: The Beta Launch Show pada tanggal 3 Juni!

Desain Material untuk Android

Desain material adalah panduan komprehensif untuk desain visual, motion, dan interaksi di seluruh platform dan perangkat. Untuk menggunakan desain material di aplikasi Android, ikuti panduan yang ditetapkan dalam spesifikasi desain material dan gunakan komponen dan gaya baru yang tersedia di support library desain material. Halaman ini menyediakan ringkasan tentang pola dan API yang harus Anda gunakan.

Android menyediakan fitur berikut untuk membantu Anda membuat aplikasi desain material:

  • Tema aplikasi desain material untuk menetapkan gaya widget UI Anda.
  • Widget untuk tampilan kompleks seperti daftar dan kartu
  • API baru untuk bayangan dan animasi kustom

Tema dan widget material

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

Tema material gelap

Tema material terang


Untuk informasi selengkapnya, lihat cara menerapkan tema material.

Untuk memberikan pengalaman yang tidak asing bagi pengguna, gunakan pola UX material yang paling umum:

  • Promosikan tindakan utama UI Anda dengan Tombol Tindakan Floating (FAB).
  • Tampilkan brand, navigasi, penelusuran, dan tindakan lainnya dengan Panel Aplikasi.
  • Tampilkan dan sembunyikan navigasi aplikasi Anda dengan Panel Navigasi.
  • Gunakan salah satu dari banyak komponen material lainnya untuk tata letak dan navigasi aplikasi Anda, seperti toolbar yang dapat disembunyikan, tab, menu navigasi bawah, dan lainnya. Untuk melihat semua komponen material, lihat Komponen Material untuk katalog Android

Jika memungkinkan, gunakan ikon material standar. Misalnya, tombol navigasi "menu" untuk panel navigasi Anda harus menggunakan ikon “hamburger” standar. Lihat Ikon Desain Material untuk daftar ikon yang tersedia. Anda juga dapat mengimpor ikon SVG dari library ikon material dengan Vector Asset Studio Android Studio.

Ketinggian bayangan dan kartu

Selain properti X dan Y, tampilan di Android memiliki properti Z. Properti baru ini menunjukkan ketinggian tampilan, yang menentukan:

  • Ukuran bayangan: tampilan dengan nilai Z yang lebih tinggi menghasilkan bayangan yang lebih besar.
  • Urutan gambar: tampilan dengan nilai Z yang lebih tinggi akan muncul di bagian atas tampilan lain.

Ketinggian sering kali diterapkan saat tata letak Anda menyertakan tata letak berbasis kartu, yang membantu Anda menampilkan bagian informasi penting di dalam kartu yang menyediakan tampilan material. Anda dapat menggunakan widget CardView untuk membuat kartu dengan ketinggian default. Untuk informasi selengkapnya, lihat Membuat Tata Letak Berbasis Kartu.

Untuk informasi tentang cara menambahkan ketinggian ke tampilan lain, lihat Membuat Bayangan dan Tampilan Klip.

Animasi

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

API ini memungkinkan Anda:

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

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

Untuk informasi selengkapnya, lihat Ringkasan Animasi.

Drawable

Kemampuan baru untuk drawable ini membantu Anda mengimplementasikan aplikasi desain material:

  • Vector drawable dapat diskalakan tanpa kehilangan definisi dan sangat cocok untuk ikon dalam aplikasi dengan satu warna. Pelajari vector drawable lebih lanjut.
  • Menambahkan tint drawable memungkinkan Anda menentukan bitmap sebagai mask alfa dan menambahkan tint dengan warna pada waktu proses. Lihat cara menambahkan tint ke drawable.
  • Ekstraksi warna memungkinkan Anda otomatis mengekstrak warna yang menonjol dari gambar bitmap. Lihat cara memilih warna dengan Palette API.