Contoh MotionLayout

Topik ini berisi contoh cara menggunakan MotionLayout. Setiap contoh berisi GIF animasi gerakan, beserta dengan kode yang sesuai untuk tata letak dan adegan gerakan.

Gerakan dasar

Contoh ini berisi satu tampilan yang dapat Anda sentuh dan tarik untuk memindahkan secara horizontal.

Atribut khusus - backgroundColor

Contoh ini mirip dengan Gerakan dasar. Selain gerakan dasar, warna latar belakang tampilan berubah saat tampilan bergerak.

ImageFilterView - transisi gambar

Contoh ini menunjukkan cara melakukan transisi nilai saturasi ImageFilterView.

Posisi bingkai utama

Contoh ini menggunakan <KeyFrameSet> untuk mengubah posisi Y pada tampilan selama gerakan.

Interpolasi bingkai utama

Contoh ini dibuat berdasarkan contoh Posisi bingkai utama, yang menambahkan rotasi dan penskalaan ke transisi tampilan.

Siklus bingkai utama

Contoh ini menambahkan elemen <KeyCycle> untuk menambahkan gerakan mirip gelombang ke tampilan.

CoordinatorLayout (1/2)

Contoh ini menambahkan MotionLayout ke AppBarLayout yang ada untuk menambahkan gerakan ke panel aplikasi. Contoh ini dijelaskan lebih lanjut dalam Pengantar MotionLayout (bagian III).

CoordinatorLayout (2/2)

Contoh ini menambahkan MotionLayout ke AppBarLayout yang ada untuk menambahkan gerakan ke panel aplikasi.

DrawerLayout (1/2)

Contoh ini menunjukkan cara menambahkan gerakan ke DrawerLayout. Contoh ini dijelaskan lebih lanjut dalam Pengantar MotionLayout (bagian III).

DrawerLayout (2/2)

Contoh ini menunjukkan cara menambahkan gerakan ke DrawerLayout.

Panel samping

Contoh ini menunjukkan cara menampilkan panel samping saat menarik area konten utama ke kanan.

Paralaks

Contoh ini menunjukkan latar belakang paralaks, tempat lapisan latar belakang yang berbeda bergerak pada kecepatan yang berbeda.

ViewPager

Contoh ini menunjukkan cara menambahkan gerakan saat menggeser di antara tab ViewPager. Contoh ini dijelaskan lebih lanjut dalam Pengantar MotionLayout (bagian III).

ViewPager - Lottie

Contoh ini menunjukkan cara menambahkan gerakan saat menggeser di antara tab ViewPager.

Gerakan kompleks (1/3)

Contoh ini menggabungkan elemen dari contoh sebelumnya untuk menunjukkan gerakan yang kompleks.

Gerakan kompleks (2/3)

Contoh ini menggabungkan elemen dari contoh sebelumnya untuk menunjukkan gerakan yang kompleks.

Gerakan kompleks (3/3)

Contoh ini menggabungkan elemen dari contoh sebelumnya untuk menunjukkan gerakan yang kompleks.

Transisi fragmen (1/2)

Contoh ini menunjukkan cara menggunakan MotionLayout untuk melakukan transisi antar fragmen.

Transisi fragmen (2/2)

Contoh ini menunjukkan cara menggunakan MotionLayout untuk melakukan transisi antar fragmen.

Gerakan seperti YouTube

Contoh ini menunjukkan cara melakukan transisi antar tampilan yang ringkas dan pengalaman layar penuh dengan konten tambahan.

KeyTrigger

Contoh ini menunjukkan cara menampilkan dan menyembunyikan tombol tindakan yang mengambang saat transisi melampaui batas progres.

Multi-status

Contoh ini menunjukkan cara menggunakan status untuk menentukan gerakan mana yang akan diterapkan.