Membuat bayangan dan tampilan klip

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

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.

Gambar yang menunjukkan cara elevasi tampilan menghasilkan bayangan.
Gambar 1. Elevasi pada sumbu Z dan bayangan yang dihasilkan.

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).

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

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:

  1. Perluas class ViewOutlineProvider.
  2. Ganti metode getOutline().
  3. 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.