Desain material memperkenalkan elevasi untuk elemen-elemen UI. Elevasi membantu pengguna memahami arti penting setiap elemen dan memfokuskan perhatian pada tugas yang ada.
Elevasi tampilan, yang dinyatakan oleh properti Z, menentukan tampilan visual bayangannya: tampilan dengan nilai Z lebih tinggi menghasilkan bayangan yang lebih besar dan lebih halus. Tampilan dengan nilai Z lebih tinggi akan menutupi tampilan yang memiliki nilai Z lebih rendah; akan tetapi, nilai Z tampilan tidak memengaruhi ukuran tampilan.
Bayangan digambar oleh induk tampilan yang dielevasikan, dan karenanya dapat mengalami pemangkasan tampilan standar, yang secara default dipangkas oleh induk.
Elevasi juga berguna untuk membuat animasi di mana widget untuk sementara naik ke atas bidang tampilan saat menjalankan tindakan tertentu.
Untuk informasi selengkapnya tentang elevasi dalam desain material, lihat Objek di ruang 3D.
Menetapkan Elevasi ke Tampilan Anda
Nilai Z untuk tampilan memiliki dua komponen:
- Elevasi: Komponen statis.
- Translasi: Komponen dinamis yang digunakan untuk animasi.
Z = elevation + translationZ
Gambar 1 - Bayangan untuk berbagai elevasi tampilan.
Untuk menetapkan elevasi default (resting) sebuah tampilan, gunakan atribut android:elevation dalam tata letak XML. Untuk menetapkan elevasi tampilan dalam kode suatu aktivitas, gunakan metode View.setElevation().
Untuk menetapkan translasi tampilan, gunakan metode View.setTranslationZ().
Metode ViewPropertyAnimator.z() dan ViewPropertyAnimator.translationZ() yang baru memungkinkan Anda menganimasikan elevasi tampilan dengan mudah. Untuk informasi selengkapnya, lihat referensi API untuk ViewPropertyAnimator dan panduan developer Animasi Properti.
Anda juga dapat menggunakan StateListAnimator untuk menentukan animasi ini secara deklaratif. Pendekatan ini berguna khususnya ketika perubahan status memicu animasi, seperti saat pengguna menekan tombol. Untuk informasi selengkapnya, lihat Menganimasikan Perubahan Status Tampilan.
Nilai Z diukur dalam satuan dp (piksel kepadatan mandiri).
Menyesuaikan Bayangan dan Garis Luar Tampilan
Batas-batas drawable latar belakang tampilan menentukan bentuk default bayangannya. Garis luar menunjukkan bentuk luar objek grafis dan menentukan area ripple untuk respons sentuh.
Perhatikan tampilan ini, yang ditentukan dengan sebuah drawable latar belakang:
<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
Drawable latar belakang ditentukan sebagai persegi panjang dengan sudut-sudut melengkung:
<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
Tampilan ini menghasilkan bayangan dengan sudut-sudut melengkung, karena drawable latar belakang menentukan garis luar tampilan. Penggunaan garis luar kustom akan mengganti bentuk default bayangan tampilan.
Untuk menentukan garis luar kustom suatu tampilan dalam kode Anda:
- Perluas class
ViewOutlineProvider. - Ganti metode
getOutline(). - Tetapkan penyedia garis luar baru ke tampilan Anda dengan metode
View.setOutlineProvider().
Anda dapat membuat garis luar lonjong dan persegi dengan sudut-sudut melengkung menggunakan metode dalam class Outline. Penyedia garis luar default untuk tampilan memperoleh garis luar ini dari latar belakang tampilan. Agar tampilan tidak menghasilkan bayangan, tetapkan penyedia garis luarnya ke null.
Memangkas Tampilan
Pemangkasan tampilan memudahkan Anda mengubah bentuk tampilan. Anda dapat memangkas tampilan agar konsisten dengan elemen desain lainnya, atau untuk mengubah bentuk tampilan sebagai respons terhadap input pengguna.
Anda dapat memangkas tampilan ke area luarnya menggunakan metode View.setClipToOutline() atau atribut android:clipToOutline. Hanya garis luar persegi panjang, lingkaran, dan persegi panjang bersudut melengkung yang mendukung pemangkasan, seperti yang ditentukan oleh metode Outline.canClip().
Untuk memangkas tampilan ke bentuk drawable, tetapkan drawable tersebut sebagai latar belakang tampilan (seperti ditunjukkan di atas) dan panggil metode View.setClipToOutline().
Memangkas tampilan adalah operasi yang mahal; karena itu, jangan animasikan bentuk yang Anda gunakan untuk memangkas tampilan. Untuk memperoleh efek ini, gunakan animasi Efek Reveal.