Membuat Transisi Indah dengan Gerakan Material untuk Android

1. Pengantar

Desain Material adalah sistem untuk mem-build produk digital yang menarik dan indah. Dengan menyatukan gaya, branding, interaksi, dan gerakan di bawah kumpulan prinsip dan komponen yang konsisten, tim produk dapat mewujudkan potensi desain terbesar mereka.

Komponen Material (MDC) membantu developer menerapkan Desain Material. Dibuat oleh tim engineer dan desainer UX di Google, MDC memiliki banyak komponen UI yang indah dan fungsional serta tersedia untuk Android, iOS, web, dan Flutter.material.io/develop

Apa yang dimaksud dengan sistem gerakan Material untuk Android?

Sistem gerakan Material untuk Android adalah kumpulan pola transisi dalam library MDC-Android yang dapat membantu pengguna memahami dan membuka aplikasi, seperti yang dijelaskan dalam pedoman Desain Material.

Keempat pola transisi Material utama adalah sebagai berikut:

• Transformasi Container: transisi antarelemen UI yang menyertakan container; membuat hubungan yang terlihat antara dua elemen UI yang berbeda dengan mengubah satu elemen menjadi elemen lainnya secara lancar.
• Sumbu Merata: transisi antarelemen UI yang memiliki hubungan spasial atau navigasi; menggunakan transformasi yang sama pada sumbu x, y, atau z untuk memperkuat hubungan antarelemen.
• Memudar: transisi antarelemen UI yang tidak memiliki hubungan kuat satu sama lain; menggunakan transisi memudar (jelas ke buram) dan makin jelas (buram ke jelas) yang berurutan, dengan skala elemen yang masuk.
• Memperjelas: digunakan untuk elemen UI yang masuk atau keluar dalam batasan layar.

Library MDC-Android menawarkan class transisi untuk pola ini, yang dibuat berdasarkan library Transisi AndroidX (androidx.transition) dan Framework Transisi Android (android.transition):

AndroidX

• Tersedia dalam paket com.google.android.material.transition
• Mendukung API Level 14+
• Mendukung Fragmen dan View, tetapi tidak mendukung Aktivitas atau Jendela
• Berisi perbaikan bug yang di-backport dan perilaku konsisten di seluruh API Level

Framework

• Tersedia dalam paket com.google.android.material.transition.platform
• Mendukung API Level 21+
• Mendukung Fragment, View, Activity, dan Windows
• Perbaikan bug tidak di-backport dan mungkin memiliki perilaku yang berbeda di seluruh API Level

Dalam codelab ini, Anda akan menggunakan transisi Material yang dibuat di atas library AndroidX, yang berarti Anda akan berfokus terutama pada Fragment dan View.

Yang akan Anda bangun

Codelab ini akan memandu Anda membuat beberapa transisi menjadi contoh aplikasi email Android bernama Reply, menggunakan Kotlin, untuk menunjukkan cara menggunakan transisi dari library MDC-Android untuk menyesuaikan tampilan dan nuansa aplikasi Anda.

Kode awal aplikasi Reply akan diberikan, dan Anda akan menyertakan transisi Material berikut ke dalam aplikasi, yang dapat dilihat di GIF codelab yang selesai di bawah:

• Transisi Transformasi Container dari daftar email menjadi halaman detail email
• Transisi Transformasi Container dari FAB menjadi halaman tulis email
• Transisi Sumbu Z Merata dari ikon penelusuran menjadi halaman tampilan penelusuran
• Transisi Memudar antara halaman kotak surat
• Transisi Transformasi Container dari chip alamat email ke tampilan kartu

Dalam codelab ini, Anda akan menggunakan transisi yang disediakan oleh sistem gerakan MDC-Android. Untuk eksplorasi lebih lanjut tentang sistem komponen dan tema MDC-Android, Anda dapat melihat Panduan memulai.

Yang Anda butuhkan

• Pengetahuan dasar tentang pengembangan Android dan Kotlin
• Android Studio (download di sini jika Anda belum memilikinya)
• Emulator atau perangkat Android (tersedia melalui Android Studio)
• Kode contoh (lihat langkah berikutnya)

Bagaimana Anda menilai tingkat pengalaman Anda mem-build aplikasi Android?

Pemula Menengah Mahir

2. Menyiapkan lingkungan pengembangan

Memulai Android Studio

Saat Anda membuka Android Studio, jendela yang berjudul "Welcome to Android Studio" akan ditampilkan. Namun, jika ini adalah pertama kalinya Anda meluncurkan Android Studio, selesaikan langkah-langkah Wizard Penyiapan Android Studio dengan nilai default. Langkah ini dapat memerlukan waktu beberapa menit untuk mendownload dan menginstal file yang diperlukan, jadi jangan ragu untuk membiarkan proses ini berjalan di latar belakang sembari Anda melakukan bagian berikutnya.

Opsi 1: Meng-clone aplikasi codelab awal dari GitHub

Untuk meng-clone codelab ini dari GitHub, jalankan perintah berikut:

git clone https://github.com/material-components/material-components-android-motion-codelab.git
cd material-components-android-motion-codelab

Untuk mendapatkan bantuan lebih lanjut: Meng-clone repositori dari GitHub

Opsi 2: Mendownload file ZIP aplikasi codelab awal

Download aplikasi awal

Aplikasi awal terletak di direktori material-components-android-motion-codelab-develop.

Memuat kode awal di Android Studio

1. Setelah wizard penyiapan selesai dan jendela Welcome to Android Studio ditampilkan, klik Open an existing Android Studio project.

2. Buka direktori tempat Anda menginstal kode contoh dan pilih direktori contoh untuk membuka project.
3. Tunggu Android Studio mem-build dan menyinkronkan project, seperti yang ditunjukkan oleh indikator aktivitas di bagian bawah jendela Android Studio.

Jika Android Studio meminta Anda untuk mengupdate versi Plugin Android Gradle project, Anda harus mengabaikan perintah tersebut karena project mungkin belum diuji dengan versi Gradle terbaru dan update dapat menyebabkan error atau masalah kompilasi lainnya.

4. Pada tahap ini, Android Studio dapat memunculkan beberapa error build karena alat build atau Android SDK tidak ada, seperti yang ditampilkan di bawah. Ikuti petunjuk di Android Studio untuk menginstal/mengupdate versi ini dan menyinkronkan project Anda. Jika masih mengalami masalah, ikuti pedoman terkait mengupdate alat Anda dengan SDK Manager.

Memverifikasi dependensi project

Project memerlukan dependensi pada library MDC-Android. Kode contoh yang Anda download seharusnya sudah mencantumkan dependensi ini, tetapi mari kita lihat konfigurasinya untuk memastikannya.

Buka file build.gradle modul app dan pastikan blok dependencies menyertakan dependensi pada MDC-Android:

implementation 'com.google.android.material:material:1.2.0'

Menjalankan aplikasi awal

1. Pastikan bahwa konfigurasi build di sebelah kiri pilihan perangkat adalah app.
2. Tekan tombol Run/Play berwarna hijau untuk mem-build dan menjalankan aplikasi.

3. Di jendela Select Deployment Target, jika Anda sudah memiliki perangkat Android yang tercantum di perangkat yang tersedia, lanjutkan ke Langkah 8. Jika tidak tercantum, klik Create New Virtual Device.
4. Di layar Select Hardware, pilih perangkat ponsel, misalnya Pixel 3, lalu klik Next.
5. Di layar System Image, pilih recent Android version, terutama API level yang paling tinggi. Jika tidak terinstal, klik link Download yang ditampilkan dan selesaikan proses download-nya.
6. Klik Next.
7. Di layar Android Virtual Device (AVD), biarkan setelan lalu klik Finish.
8. Pilih Android device dari dialog target deployment.
9. Klik Ok.
10. Android Studio mem-build, men-deploy, dan otomatis membuka aplikasi di perangkat target.

Jika Anda mendapatkan error INSTALL_FAILED_INVALID_APK saat membangun, coba lakukan 'Build' -> 'Clean Project' di Android Studio.

Jika Anda tidak dapat menambahkan dependensi atau menjalankan aplikasi dengan sukses, hentikan dan lakukan pemecahan masalah pada lingkungan developer Anda. Lihat panduan Android Studio tentang cara membuat dan menjalankan aplikasi untuk mengetahui informasi selengkapnya.

Berhasil! Kode awal untuk halaman beranda Reply akan berjalan di emulator Anda. Anda akan melihat Kotak masuk yang berisi daftar email.

Opsional: Memperlambat animasi perangkat

Karena codelab ini mencakup transisi yang cepat, tetapi belum sempurna, ada baiknya jika Anda memperlambat animasi perangkat untuk mengamati detail transisinya saat menerapkannya. Hal ini dapat dilakukan dengan perintah shell adb atau Kartu Setelan Cepat. Perhatikan bahwa metode memperlambat animasi perangkat ini juga akan memengaruhi animasi pada perangkat di luar aplikasi Reply.

Metode 1: Perintah ADB Shell

Untuk memperlambat animasi perangkat dengan faktor 10x, Anda dapat menjalankan perintah berikut dari command line:

adb shell settings put global window_animation_scale 10
adb shell settings put global transition_animation_scale 10
adb shell settings put global animator_duration_scale 10

Untuk mereset kecepatan animasi perangkat agar kembali normal, jalankan perintah berikut:

adb shell settings put global window_animation_scale 1
adb shell settings put global transition_animation_scale 1
adb shell settings put global animator_duration_scale 1

Metode 2: Kartu Setelan Cepat

Atau, untuk menyiapkan Kartu Setelan Cepat, aktifkan Setelan Developer di perangkat Anda terlebih dahulu jika Anda belum melakukannya sebelumnya:

1. Buka aplikasi "Setelan" di perangkat
2. Scroll ke bawah lalu klik "Tentang perangkat yang diemulasi"
3. Scroll ke bawah dan klik "Nomor build" dengan cepat hingga Setelan Developer diaktifkan

Selanjutnya, lakukan hal berikut, masih dalam aplikasi "Setelan" perangkat, untuk mengaktifkan Kartu Setelan Cepat:

1. Klik ikon penelusuran atau kotak penelusuran di bagian atas layar
2. Ketik "kartu" di kolom penelusuran
3. Klik baris "Quick settings developer Tiles"
4. Klik tombol "Skala animasi jendela"

Terakhir, di seluruh codelab, tarik menu notifikasi sistem ke bawah dari bagian atas layar dan gunakan ikon untuk beralih antara animasi dengan kecepatan lambat dan normal.

Petunjuk untuk menyiapkan Kartu Setelan Cepat mungkin sedikit berbeda atau tidak tersedia, bergantung pada perangkat dan level API.

3. Memahami kode aplikasi contoh

Mari kita lihat kodenya. Kami telah menyediakan aplikasi yang menggunakan library komponen Navigasi Jetpack untuk berpindah di antara beberapa Fragmen yang berbeda, semuanya dalam satu Aktivitas, MainActivity:

• HomeFragment: menampilkan daftar email
• EmailFragment: menampilkan satu email lengkap
• ComposeFragment: memungkinkan penulisan email baru
• SearchFragment: menampilkan tampilan penelusuran

Untuk mempelajari lebih lanjut konsep terkait yang digunakan dalam codelab ini, lihat panduan dan latihan berikut:

• Memulai Komponen Material untuk Android
• Android 01.1 Tingkat Lanjut: Fragmen
• Dasar-Dasar Android Kotlin 03.2: Menentukan jalur navigasi
• Dasar-Dasar Android Kotlin 02.4: Dasar-dasar data binding

navigation_graph.xml

Pertama, untuk memahami cara menyiapkan grafik navigasi aplikasi, buka navigation_graph.xml di direktori app -> src -> main -> res -> navigation:

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/navigation_graph"
   app:startDestination="@id/homeFragment">

   <fragment
       android:id="@+id/homeFragment"
       android:name="com.materialstudies.reply.ui.home.HomeFragment"
       android:label="HomeFragment">
       <argument...>
       <action
           android:id="@+id/action_homeFragment_to_emailFragment"
           app:destination="@id/emailFragment" />
   </fragment>
   <fragment
       android:id="@+id/emailFragment"
       android:name="com.materialstudies.reply.ui.email.EmailFragment"
       android:label="EmailFragment">
       <argument...>
   </fragment>
   <fragment
       android:id="@+id/composeFragment"
       android:name="com.materialstudies.reply.ui.compose.ComposeFragment"
       android:label="ComposeFragment">
       <argument...>
   </fragment>
   <fragment
       android:id="@+id/searchFragment"
       android:name="com.materialstudies.reply.ui.search.SearchFragment"
       android:label="SearchFragment" />
   <action
       android:id="@+id/action_global_homeFragment"
       app:destination="@+id/homeFragment"
       app:launchSingleTop="true"
       app:popUpTo="@+id/navigation_graph"
       app:popUpToInclusive="true"/>
   <action
       android:id="@+id/action_global_composeFragment"
       app:destination="@+id/composeFragment" />
   <action
       android:id="@+id/action_global_searchFragment"
       app:destination="@+id/searchFragment" />
</navigation>

Perhatikan bagaimana semua fragmen yang disebutkan di atas ada, dengan fragmen peluncuran default ditetapkan ke HomeFragment melalui app:startDestination="@id/homeFragment". Definisi XML grafik tujuan fragmen ini, serta tindakannya, menginformasikan kode navigasi Kotlin yang dihasilkan yang akan Anda temui saat menghubungkan transisi.

activity_main.xml

Selanjutnya, lihat tata letak activity_main.xml di direktori app -> src -> main -> res -> layout. Anda akan melihat NavHostFragment yang dikonfigurasi dengan grafik navigasi dari atas:

<fragment
   android:id="@+id/nav_host_fragment"
   android:name="androidx.navigation.fragment.NavHostFragment"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   app:defaultNavHost="true"
   app:navGraph="@navigation/navigation_graph"/>

NavHostFragment ini mengisi layar dan menangani semua perubahan navigasi fragmen layar penuh di aplikasi. BottomAppBar dan FloatingActionButton anchor-nya, juga di activity_main.xml, diletakkan di atas fragmen saat ini yang ditampilkan oleh NavHostFragment, sehingga akan ditampilkan atau disembunyikan bergantung pada tujuan fragmen dengan kode aplikasi contoh yang diberikan.

Selain itu, BottomNavDrawerFragment di activity_main.xml adalah panel samping bawah yang berisi menu untuk menavigasi di antara kotak surat email yang berbeda, yang ditampilkan secara bersyarat melalui tombol logo Reply BottomAppBar.

MainActivity.kt

Terakhir, untuk melihat contoh tindakan navigasi yang sedang digunakan, buka MainActivity.kt di direktori app -> src -> main -> java -> com.materialstudies.reply.ui. Cari fungsi navigateToSearch(), yang akan terlihat seperti ini:

private fun navigateToSearch() {
   val directions = SearchFragmentDirections.actionGlobalSearchFragment()
   findNavController(R.id.nav_host_fragment).navigate(directions)
}

Ini menunjukkan cara Anda membuka halaman tampilan penelusuran, tanpa transisi kustom apa pun. Selama codelab ini, Anda akan mempelajari MainActivity Reply dan empat fragmen utama untuk menyiapkan transisi Material yang berfungsi bersama dengan berbagai tindakan navigasi di seluruh aplikasi.

Setelah Anda memahami kode awal, sekarang mari kita implementasikan transisi pertama kita.

4. Menambahkan transisi Transformasi Container dari daftar email ke halaman detail email

Untuk memulai, Anda akan menambahkan transisi dengan mengklik email. Pola transformasi container sangatlah cocok untuk perubahan navigasi ini, karena pola ini didesain untuk transisi antara elemen UI yang menyertakan container. Pola ini menghasilkan hubungan yang terlihat di antara dua elemen UI.

Sebelum menambahkan kode, coba jalankan aplikasi Reply dan klik email. Aplikasi akan menampilkan animasi melompat-memotong sederhana, yang berarti layar diganti tanpa transisi:

Transformasi container di library MDC-Android disebut MaterialContainerTransform. Secara default, subclass Transition ini beroperasi sebagai transisi elemen bersama, yang berarti sistem Transisi Android dapat mengambil dua tampilan dalam tata letak yang berbeda saat ditandai dengan transitionName.

Mulailah dengan menambahkan atribut transitionName pada MaterialCardView di email_item_layout.xml seperti yang ditunjukkan dalam cuplikan berikut:

email_item_layout.xml

android:transitionName="@{@string/email_card_transition_name(email.id)}"

Nama transisi menggunakan resource string dengan parameter. Anda harus menggunakan ID dari setiap email untuk memastikan setiap transitionName di EmailFragment unik.

Level SDK minimum Reply adalah 24, yang berarti kita dapat langsung menggunakan atribut android:transitionName yang diperkenalkan di API level 21. Jika aplikasi Anda mendukung level API di bawah 21, gunakan metode ViewCompat#setTransitionName saat menyetel nama transisi tampilan.

Setelah Anda menetapkan nama transisi item daftar email, mari kita lakukan hal yang sama di tata letak detail email. Di fragment_email.xml, tetapkan transitionName dari MaterialCardView ke resource string berikut:

fragment_email.xml

android:transitionName="@string/email_card_detail_transition_name"

Menetapkan nama transisi tampilan "awal" (MaterialCardView di email_item_layout.xml) dan tampilan "akhir" (MaterialCardView di fragment_email.xml) akan membantu memberi tahu sistem Transisi Android tentang dua tampilan elemen bersama yang terlibat dalam transisi ini.

Di HomeFragment.kt, ganti kode di onEmailClicked dengan cuplikan di bawah untuk membuat pemetaan dari tampilan awal (item daftar email) dan tampilan akhir (layar detail email):

HomeFragment.kt

val emailCardDetailTransitionName = getString(R.string.email_card_detail_transition_name)
val extras = FragmentNavigatorExtras(cardView to emailCardDetailTransitionName)
val directions = HomeFragmentDirections.actionHomeFragmentToEmailFragment(email.id)
findNavController().navigate(directions, extras)

Bagian utama dari cuplikan di atas adalah FragmentNavigatorExtras. Sistem Transisi Android akan mendapatkan nama transisi yang ditetapkan pada parameter pertama (cardView), dan membuat pemetaan antara nama transisi tersebut dan string nama transisi yang diteruskan sebagai parameter kedua (emailCardDetailTransitionName). Ini adalah cara sistem mengetahui tampilan mana yang akan ditemukan dan diberikan ke instance MaterialContainerTransform sebagai tampilan "awal" dan "akhir" yang akan diubah.

Setelah mengonfigurasi plumbing, Anda dapat membuat transformasi penampung. Dalam metode EmailFragment onCreate, tetapkan sharedElementEnterTransition ke instance baru MaterialContainerTransform (mengimpor versi com.google.android.material.transition, bukan versi com.google.android.material.transition.platform) dengan menambahkan cuplikan berikut:

EmailFragment.kt

sharedElementEnterTransition = MaterialContainerTransform().apply {
   drawingViewId = R.id.nav_host_fragment
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   scrimColor = Color.TRANSPARENT
   setAllContainerColors(requireContext().themeColor(R.attr.colorSurface))
}

Ada beberapa hal penting yang terjadi di sini:

• Untuk mempermudah, hanya sharedElementEnterTransition yang ditetapkan, bukan sharedElementReturnTransition. Secara default, sistem Transisi Android akan otomatis membalikkan transisi masuk saat menavigasi kembali, jika tidak ada transisi kembali yang ditetapkan.
• drawingViewId mengontrol posisi penempatan penampung animasi dalam hierarki tampilan. Hal ini memungkinkan Anda menampilkan transisi di bawah atau di atas elemen lain di UI. Dalam kasus Reply, Anda menjalankan transformasi penampung di level yang sama dengan penampung fragmen untuk memastikannya digambar di bawah Panel Aplikasi Bawah dan Tombol Tindakan Mengambang.
• scrimColor adalah properti di MaterialContainerTransform yang mengontrol warna shade transparan yang digambar di belakang container animasi. Secara default, ini ditetapkan ke 32% hitam. Di sini disetel ke transparan, artinya tidak ada scrim yang akan digambar. Hal ini karena pada langkah berikutnya, Anda akan menambahkan transisi keluar ke daftar email yang cocok dengan transformasi penampung.
• Terakhir, kita menetapkan warna penampung MaterialContainerTransform ke colorSurface. Saat MaterialContainerTransform membuat animasi di antara dua tampilan, ada tiga "penampung" yang digambarnya ke kanvas: 1) penampung latar belakang 2) penampung untuk tampilan awal dan 3) penampung untuk tampilan akhir. Ketiga penampung ini dapat diberi warna isi dan disetel ke transparan secara default. Menetapkan warna isian latar belakang ini dapat berguna jika tampilan awal atau akhir Anda tidak menggambar latar belakang, sehingga elemen lain terlihat di bawahnya selama animasi. Karena semua penampung dalam contoh ini harus disetel ke colorSurface, kita dapat menggunakan metode bantuan setAllContainerColors untuk memastikan kita tidak mengalami masalah visual.

Sekarang, coba jalankan ulang aplikasinya.

Transisinya mulai terlihat baik. Saat Anda mengklik email di daftar email, transformasi penampung akan memperluas item daftar menjadi halaman detail layar penuh. Namun, perhatikan bahwa menekan tombol kembali tidak akan mengembalikan email ke dalam daftar. Selain itu, daftar email akan segera hilang di awal transisi, dan menampilkan latar belakang jendela abu-abu. Kita belum selesai.

Biasanya, masalah pertama menciutkan ini tidak berfungsi karena saat sistem Transisi Android mencoba menjalankan transisi kembali, daftar email belum di-inflate dan diisi ke dalam RecyclerView. Kita memerlukan cara untuk menunggu hingga HomeFragment menyusun daftar sebelum memulai transisi.

Sistem Transisi Android menyediakan metode untuk melakukannya - postponeEnterTransition dan startPostponedEnterTransition. Jika postponeEnterTransition dipanggil, semua transisi masuk yang akan dijalankan akan ditahan hingga panggilan penutup ke startPostponedEnterTransition dipanggil. Hal ini memberi kami peluang untuk "menjadwalkan" transisi hingga setelah RecyclerView diisi dengan email dan transisi dapat menemukan pemetaan yang dikonfigurasi.

Untuk memperbaiki transisi kembali, tambahkan dua baris berikut ke metode onViewCreated di HomeFragment.kt:

HomeFragment.kt

postponeEnterTransition()
view.doOnPreDraw { startPostponedEnterTransition() }

Coba jalankan ulang aplikasi. Menekan tombol kembali setelah membuka email akan menciutkan email kembali ke dalam daftar. Bagus! Mari kita terus tingkatkan animasinya.

Masalah daftar email yang menghilang terjadi karena saat membuka Fragment baru menggunakan Komponen Navigasi, Fragment saat ini akan langsung dihapus dan diganti dengan Fragment baru yang masuk. Agar daftar email tetap terlihat meskipun telah diganti, Anda dapat menambahkan transisi keluar ke HomeFragment.

MDC-Android menyediakan dua transisi untuk melakukannya untuk Anda - Hold dan MaterialElevationScale. Transisi Hold hanya mempertahankan targetnya di posisinya saat ini, sementara MaterialElevationScale menjalankan animasi skala yang halus.

Tambahkan cuplikan di bawah ke metode HomeFragment onEmailClicked agar daftar email diskalakan secara halus saat keluar dan kembali saat masuk kembali:

HomeFragment.kt

exitTransition = MaterialElevationScale(false).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
reenterTransition = MaterialElevationScale(true).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}

Fragment akan masuk kembali saat kembali terlihat setelah Fragment saat ini dikeluarkan dari data sebelumnya. Untuk HomeFragment, hal ini terjadi saat menekan kembali dari EmailFragment. Di sini, tindakan ini akan menyebabkan daftar email kita diskalakan secara halus saat kita kembali ke daftar.

Selanjutnya, untuk memastikan bahwa transisi MaterialElevationScale diterapkan ke layar utama secara keseluruhan, bukan ke setiap tampilan dalam hierarki, tandai RecyclerView di fragment_home.xml sebagai grup transisi.

fragment_home.xml

android:transitionGroup="true"

Level SDK minimum Reply adalah 24, yang berarti kita dapat langsung menggunakan atribut android:transitionGroup yang diperkenalkan di API level 21. Jika aplikasi Anda mendukung API level di bawah 21, gunakan metode ViewGroupCompat#setTransitionGroup saat menetapkan grup transisi tampilan.

Pada tahap ini, Anda akan memiliki transformasi container yang berfungsi sepenuhnya. Mengklik email akan meluaskan item daftar menjadi layar detail sembari menyurutkan daftar email. Menekan tombol kembali akan menutup layar detail email kembali menjadi daftar item sembari meningkatkan skala di daftar email.

5. Menambahkan transisi Transformasi Container dari FAB ke halaman tulis email

Mari kita lanjutkan dengan transformasi container dan kita tambahkan transisi dari Tombol Tindakan Mengambang ke ComposeFragment, yang meluaskan FAB ke email baru yang akan ditulis oleh pengguna. Pertama-tama, jalankan ulang aplikasi klik FAB untuk melihat bahwa tidak ada transisi ketika meluncurkan layar tulis email.

Untuk melihat jump-cut di atas, pastikan Anda mengklik FAB sambil melihat daftar email, setelah peluncuran aplikasi yang baru. Jika sebelumnya Anda telah membuka email saat menjalankan aplikasi saat ini, Anda mungkin melihat efek transisi parsial karena keluar yang sudah tidak berlaku atau transisi masuk kembali. Hal ini sangat mungkin terjadi jika Anda menggunakan Hot Reload Android Studio untuk menjalankan aplikasi, dan tidak akan menjadi masalah setelah semua alur dalam codelab ini selesai.

Meskipun kita menggunakan class transisi yang sama, cara kita mengonfigurasi instance ini akan berbeda karena FAB berada di MainActivity dan ComposeFragment ditempatkan di dalam penampung host navigasi MainActivity.

Di ComposeFragment.kt, tambahkan cuplikan berikut ke metode onViewCreated. Pastikan untuk mengimpor Slide versi androidx.transition.

ComposeFragment.kt

enterTransition = MaterialContainerTransform().apply {
   startView = requireActivity().findViewById(R.id.fab)
   endView = emailCardView
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   scrimColor = Color.TRANSPARENT
   containerColor = requireContext().themeColor(R.attr.colorSurface)
   startContainerColor = requireContext().themeColor(R.attr.colorSecondary)
   endContainerColor = requireContext().themeColor(R.attr.colorSurface)
}
returnTransition = Slide().apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_medium).toLong()
   addTarget(R.id.email_card_view)
}

Selain parameter yang digunakan untuk mengonfigurasi transformasi penampung kita sebelumnya, startView dan endView ditetapkan secara manual di sini. Daripada menggunakan atribut transitionName untuk memberi tahu sistem Transisi Android tentang tampilan yang harus diubah, Anda dapat menentukannya secara manual jika diperlukan.

Sekarang, jalankan ulang aplikasi. Anda akan melihat FAB berubah menjadi layar tulis (lihat GIF di akhir langkah ini).

Serupa dengan langkah sebelumnya, Anda perlu menambahkan transisi ke HomeFragment agar tidak menghilang setelah dihapus dan diganti dengan ComposeFragment.

Salin cuplikan di bawah ke dalam metode navigateToCompose di MainActivity sebelum panggilan NavController navigate.

MainActivity.kt

currentNavigationFragment?.apply {
   exitTransition = MaterialElevationScale(false).apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
   reenterTransition = MaterialElevationScale(true).apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
}

Perhatikan bahwa durasi MaterialElevationScale sama dengan durasi MaterialContainerTransform. Hal ini memastikan HomeFragment disimpan selama waktu yang sama dengan waktu yang diperlukan untuk menjalankan transformasi penampung dan akan hilang segera setelah transformasi penampung selesai.

Itu saja untuk langkah ini! Anda harus memiliki transisi dari FAB ke layar tulis yang terlihat seperti berikut:

6. Menambahkan transisi Sumbu Z Merata dari ikon penelusuran ke halaman tampilan penelusuran

Di langkah ini, kita akan menambahkan transisi dari ikon penelusuran ke tampilan penelusuran layar penuh. Karena tidak ada container yang dilibatkan dalam perubahan navigasi ini, kita dapat menggunakan transisi Sumbu Z Merata untuk memperkuat hubungan spasial antara dua layar dan menunjukkan pemindahan satu tingkat ke atas di hierarki aplikasi.

Sebelum menambahkan kode tambahan apa pun, coba jalankan aplikasi dan ketuk ikon penelusuran di pojok kanan bawah layar. Tindakan ini akan memunculkan layar tampilan penelusuran tanpa transisi.

Untuk memulai, temukan metode navigateToSearch di MainActivity, dan tambahkan cuplikan kode berikut sebelum panggilan metode NavController navigate untuk menyiapkan transisi Sumbu Z MaterialSharedAxis keluar dan masuk kembali fragmen saat ini.

MainActivity.kt

currentNavigationFragment?.apply {
   exitTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
   reenterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, false).apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
}

Selanjutnya, tambahkan cuplikan kode berikut ke metode onCreate di SearchFragment, yang mengonfigurasi transisi MaterialSharedAxis masuk dan kembali.

SearchFragment.kt

enterTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}
returnTransition = MaterialSharedAxis(MaterialSharedAxis.Z, false).apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}

Penting untuk diperhatikan di sini bagaimana kedua fragmen ini bergerak bersama, sehubungan dengan parameter konstruktor boolean MaterialSharedAxis forward. Saat fragmen MainActivity saat ini keluar, SearchFragment akan masuk. Itulah sebabnya, dalam fragmen MainActivity saat ini, transisi keluar bersifat maju dan di SearchFragment transisi masuk juga maju. Cara ini akan memastikan bahwa kedua fragmen bergerak ke arah yang sama saat pasangan transisi ini berjalan.

Hal yang sebaliknya berlaku untuk arah mundur. Saat SearchFragment keluar, fragmen saat ini MainActivity akan masuk. Karena alasan ini, SearchFragment dikonfigurasi untuk kembali ke arah mundur dan fragmen saat ini MainActivity dikonfigurasi untuk masuk kembali ke arah mundur.

Terakhir, untuk memastikan bahwa transisi MaterialSharedAxis diterapkan ke layar penelusuran secara keseluruhan, tandai LinearLayout di fragment_search.xml sebagai grup transisi, bukan ke setiap tampilan individual dalam hierarki.

fragment_search.xml

android:transitionGroup="true"

Level SDK minimum Reply adalah 24, yang berarti kita dapat langsung menggunakan atribut android:transitionGroup yang diperkenalkan di API level 21. Jika aplikasi Anda mendukung API level di bawah 21, gunakan metode ViewGroupCompat#setTransitionGroup saat menetapkan grup transisi tampilan.

Selesai. Sekarang coba jalankan ulang aplikasi dan ketuk ikon penelusuran. Layar utama dan tampilan penelusuran akan secara bersamaan memudar dan diskalakan searah sumbu Z ke bagian dalam, membuat efek yang mulus antara dua layar.

7. Menambahkan transisi Memudar antarhalaman kotak surat

Di langkah ini, kita akan menambahkan transisi di antara kotak surat yang berbeda. Karena kita tidak ingin menekankan hubungan spasial atau hierarki, kita akan menggunakan transisi memudar untuk melakukan "pertukaran" sederhana antara daftar email.

Sebelum menambahkan kode tambahan, coba jalankan aplikasi, ketuk logo Reply di Panel Aplikasi Bawah, dan beralihlah antara kotak surat. Daftar email akan berubah tanpa transisi.

Untuk memulai, temukan metode navigateToHome di MainActivity, dan tambahkan cuplikan kode berikut sebelum panggilan metode navigate NavController untuk menyiapkan transisi MaterialFadeThrough keluar fragmen saat ini.

MainActivity.kt

currentNavigationFragment?.apply {
   exitTransition = MaterialFadeThrough().apply {
       duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
   }
}

Selanjutnya, buka HomeFragment. Di onCreate, setel enterTransition fragmen ke instance baru MaterialFadeThrough.

HomeFragment.kt

enterTransition = MaterialFadeThrough().apply {
   duration = resources.getInteger(R.integer.reply_motion_duration_large).toLong()
}

Penyiapan di atas sedikit berbeda dengan langkah-langkah sebelumnya karena cara kerja kotak surat. Kotak surat hanyalah HomeFragment ditambah argumen yang memberi tahu fragmen daftar email mana yang akan ditampilkan. Selain fakta bahwa HomeFragment disetel ke singleTop=true dalam grafik navigasi, hal ini berarti Anda selalu menavigasi maju ke kotak surat baru dan tidak perlu menangani transisi kembali atau masuk kembali (transisi yang berjalan saat fragmen muncul). Karena alasan ini, yang perlu Anda khawatirkan adalah menyetel transisi masuk dan keluar HomeFragment.

Ini adalah contoh skenario arsitektur yang memengaruhi cara transisi dikonfigurasi. Anda harus melakukan pertimbangan serupa saat menambahkan transisi ke aplikasi Anda sendiri.

Jalankan ulang aplikasi. Saat Anda membuka panel navigasi bawah dan mengubah kotak surat, daftar email yang ada saat ini akan diskalakan dan memudar, sementara daftar baru akan diskalakan dan makin jelas. Bagus!

8. Menambahkan transisi Transformasi Container dari chip alamat email ke tampilan kartu

Di langkah ini, Anda akan menambahkan transisi yang mengubah chip menjadi kartu pop-up. Transformasi container digunakan di sini untuk membantu memberi tahu pengguna bahwa tindakan yang diambil dalam pop-up akan memengaruhi chip tempat pop-up berasal.

Sebelum menambahkan kode apa pun, jalankan aplikasi Reply, klik email, klik FAB "balas", lalu coba klik chip kontak penerima. Chip akan langsung menghilang dan kartu dengan alamat email untuk kontak tersebut akan muncul tanpa animasi.

Anda akan bekerja di ComposeFragment untuk langkah ini. Yang sudah ditambahkan dalam tata letak ComposeFragment adalah chip penerima (terlihat secara default) dan kartu penerima (tidak terlihat secara default). Chip penerima dan kartu ini adalah dua tampilan yang akan Anda gunakan untuk membuat transformasi penampung.

Untuk memulai, buka ComposeFragment dan temukan metode expandChip. Metode ini dipanggil saat chip yang disediakan diklik. Tambahkan cuplikan kode berikut di atas baris yang menukar visibilitas recipientCardView dan chip, yang akan memicu transformasi penampung yang terdaftar melalui beginDelayedTransition.

ComposeFragment.kt

val transform = MaterialContainerTransform().apply {
   startView = chip
   endView = binding.recipientCardView
   scrimColor = Color.TRANSPARENT
   endElevation = requireContext().resources.getDimension(
       R.dimen.email_recipient_card_popup_elevation_compat
   )
   addTarget(binding.recipientCardView)
}

TransitionManager.beginDelayedTransition(binding.composeConstraintLayout, transform)

Bagian penting dari konfigurasi transformasi di atas adalah panggilan ke addTarget. Secara default, TransitionManager akan menjalankan transisi yang disediakan di semua tampilan yang berubah. Menetapkan target akan memastikan transformasi penampung hanya berjalan pada satu tampilan target yang ditentukan.

Jika Anda menjalankan aplikasi sekarang, chip akan berubah menjadi kartu alamat email untuk penerima. Selanjutnya, mari kita konfigurasikan transisi kembali untuk menciutkan kartu kembali ke chip.

Pada metode collapseChip di ComposeFragment, tambahkan cuplikan kode di bawah untuk menciutkan kartu kembali ke dalam chip.

ComposeFragment.kt

val transform = MaterialContainerTransform().apply {
   startView = binding.recipientCardView
   endView = chip
   scrimColor = Color.TRANSPARENT
   startElevation = requireContext().resources.getDimension(
       R.dimen.email_recipient_card_popup_elevation_compat
   )
   addTarget(chip)
}

TransitionManager.beginDelayedTransition(binding.composeConstraintLayout, transform)

Jalankan kembali aplikasi. Mengklik chip akan memperluas chip menjadi kartu sementara mengklik kartu akan menciutkan kartu kembali ke chip. Bagus!

9. Selesai

Dengan menggunakan kurang dari 100 baris kode Kotlin dan beberapa markup XML dasar, library MDC-Android telah membantu Anda membuat transisi yang indah di aplikasi yang sudah ada yang mematuhi panduan Desain Material, dan juga terlihat serta berperilaku konsisten di semua perangkat Android.

Aplikasi sistem gerakan Material Reply yang sudah selesai tersedia dengan mendownload codelab yang sudah selesai, atau dengan melihat cabang complete dengan git: git checkout complete.

Untuk melihat semua perubahan kode dari codelab ini, perhatikan perbandingan diff untuk cabang complete.

Langkah berikutnya

Untuk informasi selengkapnya mengenai sistem gerakan Material, pastikan untuk memeriksa spek dan dokumentasi developer lengkap, dan coba tambahkan beberapa transisi Material ke aplikasi Anda.

Terima kasih telah mencoba gerakan Material. Kami harap Anda menikmati codelab ini.

Saya dapat menyelesaikan codelab ini dengan upaya dan dalam durasi waktu yang wajar

Sangat setuju Setuju Netral Tidak setuju Sangat tidak setuju

Saya ingin terus menggunakan sistem gerakan Material pada masa mendatang

Sangat setuju Setuju Netral Tidak setuju Sangat tidak setuju