Desain Material memperkenalkan elevasi untuk elemen UI. Elevasi membantu pengguna memahami arti penting setiap elemen dan memfokuskan perhatian mereka pada tugas saat ini.
Elevasi tampilan, yang diwakili oleh properti Z, menentukan tampilan visual bayangannya. Tampilan dengan nilai Z yang lebih tinggi menghasilkan bayangan yang lebih besar dan lebih halus, dan menutupi tampilan yang memiliki nilai Z yang lebih rendah. Namun, nilai Z tampilan tidak memengaruhi ukuran tampilan.
Bayangan digambar oleh induk tampilan yang ditinggikan. Gambar dapat dipotong oleh tampilan standar dan terpotong oleh induk secara default.
Elevasi juga berguna untuk membuat animasi tempat widget sementara naik di atas bidang tampilan saat melakukan tindakan.
Untuk informasi selengkapnya, lihat Elevasi dalam Desain Material.
Menetapkan ketinggian untuk tampilan
Nilai Z untuk tampilan memiliki dua komponen:
- Elevasi: komponen statis
- Terjemahan: komponen dinamis yang digunakan untuk animasi
Z = elevation + translationZ
Nilai Z diukur dalam dp (piksel kepadatan mandiri).
Untuk menetapkan elevasi default (istirahat) tampilan, gunakan
atribut android:elevation
dalam tata letak XML. Untuk menetapkan elevasi
tampilan dalam kode aktivitas, gunakan
metode
View.setElevation()
.
Untuk menetapkan terjemahan tampilan, gunakan
metode
View.setTranslationZ()
.
Metode
ViewPropertyAnimator.z()
dan
ViewPropertyAnimator.translationZ()
memungkinkan Anda menganimasikan elevasi tampilan. Untuk mengetahui informasi selengkapnya, lihat referensi API untuk ViewPropertyAnimator
dan panduan developer animasi properti.
Anda juga dapat menggunakan
StateListAnimator
untuk menentukan animasi ini secara deklaratif. Hal ini sangat berguna untuk
kasus saat perubahan status memicu animasi, seperti saat pengguna mengetuk tombol.
Untuk informasi selengkapnya, lihat
Menganimasikan perubahan
status tampilan menggunakan StateListAnimator.
Menyesuaikan bayangan dan garis batas tampilan
Batas-batas drawable latar belakang tampilan menentukan bentuk default bayangnya. Garis batas mewakili bentuk luar objek grafis dan menentukan area ripple untuk masukan sentuh.
Perhatikan tampilan berikut, yang didefinisikan dengan 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 lengkung, karena drawable latar belakang menentukan garis luar tampilan. Memberikan garis luar kustom akan mengganti bentuk default bayangan tampilan.
Untuk mendefinisikan garis luar kustom untuk tampilan dalam kode Anda, lakukan hal berikut:
- Perluas
class
ViewOutlineProvider
. - Ganti
metode
getOutline()
. - Tetapkan penyedia garis batas baru untuk tampilan Anda dengan metode
View.setOutlineProvider()
.
Anda dapat membuat garis luar lonjong dan persegi panjang dengan sudut membulat menggunakan
metode dalam
class
Outline
. Penyedia garis batas default untuk tampilan memperoleh garis batas dari
latar belakang tampilan. Untuk mencegah tampilan mentransmisikan bayangan, tetapkan
penyedia garis batasnya ke null
.
Penayangan klip
Memangkas tampilan memungkinkan 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 garis batasnya menggunakan
metode
View.setClipToOutline()
. Hanya garis luar yang berupa persegi panjang, lingkaran, dan persegi panjang bersudut bundar yang mendukung
pemotongan, seperti yang ditentukan oleh
metode
Outline.canClip()
.
Untuk memangkas tampilan ke bentuk drawable, tetapkan drawable tersebut sebagai
latar belakang tampilan—seperti yang ditunjukkan pada contoh sebelumnya—dan panggil
metode View.setClipToOutline()
.
Memangkas tampilan adalah operasi yang mahal, jadi jangan animasikan bentuk yang Anda gunakan untuk memangkas tampilan. Untuk mencapai efek ini, gunakan animasi menampilkan.