Membuat bayangan dan tampilan klip

Mencoba cara Compose

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

Modifier.shadow() →

Desain Material memperkenalkan elevasi untuk elemen-elemen UI. Elevasi membantu pengguna memahami arti penting setiap elemen dan memfokuskan perhatian pada tugas saat ini.

Catatan: Halaman ini menjelaskan bayangan yang diperoleh berdasarkan elevasi. Material3 memperkenalkan pendekatan elevasi berdasarkan warna permukaan. Untuk mengetahui informasi selengkapnya tentang pemeliharaan dan pendekatan pengalaman pengguna, lihat Elevasi Material, dan pertimbangkan untuk memigrasikan project Anda ke Jetpack Compose.

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, serta menutupi tampilan yang memiliki nilai Z lebih rendah. Namun, nilai Z tampilan tidak memengaruhi ukuran tampilan.

Gambar 1. Elevasi pada sumbu Z dan bayangan yang dihasilkan.

Bayangan digambar oleh induk tampilan yang dielevasikan. Bayangan tersebut dapat mengalami pemangkasan tampilan standar dan secara default dipangkas oleh induk.

Elevasi juga berguna untuk membuat animasi di mana widget untuk sementara naik ke atas bidang tampilan saat menjalankan tindakan.

Untuk mengetahui informasi selengkapnya, lihat Elevasi dalam Desain Material.

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

Nilai Z diukur dalam satuan dp (piksel kepadatan mandiri).

Gambar 2. Bayangan yang berbeda untuk elevasi yang berbeda dalam dp.

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() 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. Pendekatan ini berguna khususnya ketika perubahan status memicu animasi, seperti saat pengguna mengetuk tombol. Untuk mengetahui informasi selengkapnya, lihat Menganimasikan perubahan status tampilan menggunakan StateListAnimator.

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 berikut, yang ditentukan 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-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, lakukan hal berikut:

1. Perluas class ViewOutlineProvider.
2. Ganti metode getOutline().
3. 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 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 luarnya menggunakan metode View.setClipToOutline(). Hanya garis luar yang berbentuk 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 dalam contoh sebelumnya—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 reveal.