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 serangkaian pola transisi dalam library MDC-Android yang dapat membantu pengguna memahami dan menjelajahi aplikasi, sebagaimana 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 di atas library AndroidX Transition (androidx.transition) dan Android Transition Framework (android.transition):

AndroidX

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

Framework

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

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 mem-build beberapa transisi menjadi aplikasi email Android contoh yang disebut Reply, menggunakan Kotlin, untuk mendemonstrasikan cara Anda 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 terkait sistem komponen dan pemberian 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 membuat 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 permintaan 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 perangkat Android sudah tercantum di perangkat Anda yang tersedia, lewati 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 perangkat Android 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 mem-build, coba lakukan ‘Build' -> ‘Clean Project' di Android Studio.

Jika Anda gagal menambahkan dependensi atau menjalankan aplikasi, 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 Shell ADB

Untuk memperlambat animasi perangkat sebesar 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 kembali ke 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 terlebih dahulu Setelan Developer di perangkat Anda jika Anda belum melakukannya sebelumnya:

1. Buka aplikasi "Setelan" di perangkat
2. Scroll ke bawah hingga ke bagian bawah, lalu klik "Tentang perangkat yang diemulasi"
3. Scroll ke bawah dan klik "Nomor pembuatan" 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 "Kartu developer setelan cepat"
4. Klik tombol "Skala animasi jendela"

Terakhir, selama codelab, tarik menu notifikasi sistem dari bagian atas layar dan gunakan ikon untuk beralih antara animasi kecepatan lambat dan normal.

Petunjuk di atas 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 Jetpack Navigation untuk berpindah antar-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:

• Mulai menggunakan Komponen Material untuk Android
• Android Lanjutan 01.1: Fragmen
• Dasar-Dasar Android Kotlin 03.2: Menentukan jalur navigasi
• Dasar-Dasar Android Kotlin 02.4: Dasar-dasar pengikatan data

navigation_graph.xml

Pertama, untuk memahami cara penyiapan 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 yang ditetapkan ke HomeFragment melalui app:startDestination="@id/homeFragment". Definisi XML grafik tujuan fragmen ini, serta tindakan, memberi tahu 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 yang ditambatkan, juga di activity_main.xml, ditata di atas fragmen saat ini yang ditampilkan oleh NavHostFragment, dan oleh karena itu akan ditampilkan atau disembunyikan bergantung pada tujuan fragmen oleh kode aplikasi contoh yang disediakan.

Selain itu, BottomNavDrawerFragment di activity_main.xml adalah panel bawah yang berisi menu untuk berpindah antar-kotak surat email yang berbeda, yang ditampilkan secara bersyarat melalui tombol logo Balas 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. Temukan 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 menuju halaman tampilan penelusuran, tanpa transisi kustom apa pun. Selama codelab ini, Anda akan mempelajari MainActivity dan empat fragmen utama Reply untuk menyiapkan transisi Material yang berfungsi bersama-sama 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.

Mulai 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 setiap email untuk memastikan setiap transitionName dalam EmailFragment kami unik.

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

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

fragment_email.xml

android:transitionName="@string/email_card_detail_transition_name"

Menetapkan nama transisi tampilan "start" (MaterialCardView di email_item_layout.xml) dan tampilan "end" (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). Dengan demikian, sistem mengetahui tampilan mana yang akan ditemukan dan diberikan ke instance MaterialContainerTransform sebagai tampilan "awal" dan "akhir" untuk ditransformasikan.

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 yang terjadi di sini yang patut diperhatikan:

• Untuk mempermudah, hanya sharedElementEnterTransition yang ditetapkan, bukan sharedElementReturnTransition. Secara default, sistem Transisi Android akan otomatis membalikkan transisi masuk saat kembali, jika tidak ada transisi kembali yang ditetapkan.
• drawingViewId mengontrol tempat penampung animasi akan ditempatkan dalam hierarki tampilan. Dengan demikian, Anda dapat menampilkan transisi di bawah atau di atas elemen lain di UI. Dalam kasus Reply, Anda menjalankan transformasi penampung pada tingkat yang sama dengan penampung fragmen untuk memastikan penampung tersebut digambar di bawah Tombol Tindakan Mengambang dan Panel Aplikasi Bawah.
• scrimColor adalah properti di MaterialContainerTransform yang mengontrol warna bayangan tembus pandang yang digambar di belakang penampung animasi. Secara default, nilai ini ditetapkan ke 32% hitam. Di sini, setel ke transparan, yang berarti tidak ada scrim yang akan digambar. Hal ini karena pada langkah selanjutnya Anda akan menambahkan transisi keluar ke daftar email yang cocok dengan transformasi container.
• Terakhir, kita menetapkan warna penampung MaterialContainerTransform ke colorSurface. Saat MaterialContainerTransform menganimasikan 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 pengisi dan disetel ke transparan secara default. Menetapkan warna pengisi latar belakang ini dapat berguna jika tampilan awal atau akhir Anda sendiri 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 helper setAllContainerColors untuk memastikan kita tidak mengalami masalah visual.

Sekarang, coba jalankan ulang aplikasinya.

Transisinya mulai terlihat baik. Saat Anda mengklik email dalam daftar email, transformasi container akan meluaskan item daftar menjadi halaman detail layar penuh. Namun, perhatikan bagaimana menekan tombol kembali tidak akan menutup email kembali ke daftar. Selain itu, daftar email langsung menghilang di awal transisi, menampilkan latar belakang jendela berwarna abu-abu. Kita belum selesai.

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

Sistem Transisi Android menyediakan metode untuk melakukan hal tersebut - postponeEnterTransition dan startPostponedEnterTransition. Jika postponeEnterTransition dipanggil, transisi masuk yang akan dijalankan akan ditahan hingga panggilan penutup ke startPostponedEnterTransition dipanggil. Hal ini memberi kita kesempatan untuk "menjadwalkan" transisi hingga setelah RecyclerView diisi dengan email dan transisi dapat menemukan pemetaan yang Anda konfigurasi.

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 menutup email kembali ke daftar. Bagus! Mari kita terus tingkatkan kualitas animasi.

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

MDC-Android menyediakan dua transisi untuk melakukannya bagi Anda - Hold dan MaterialElevationScale. Transisi Hold hanya mempertahankan targetnya di posisi 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 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 transisi MaterialElevationScale diterapkan ke layar utama secara keseluruhan, bukan ke setiap tampilan individual 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 level API 21. Jika aplikasi Anda mendukung level API di bawah 21, gunakan metode ViewGroupCompat#setTransitionGroup saat menyetel 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 potongan cepat di atas, pastikan Anda mengklik FAB sambil melihat daftar email, setelah peluncuran baru aplikasi. Jika sebelumnya Anda telah membuka email selama menjalankan aplikasi saat ini, Anda mungkin melihat efek transisi sebagian karena transisi keluar atau masuk kembali yang tidak aktif. Hal ini terutama mungkin terjadi jika Anda telah 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 kita berada di MainActivity dan ComposeFragment ditempatkan di dalam penampung host navigasi MainActivity.

Di ComposeFragment.kt, tambahkan cuplikan berikut ke metode onViewCreated. Proses ini memastikan versi androidx.transition dari Slide diimpor.

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 sebelumnya, startView dan endView ditetapkan secara manual di sini. Daripada menggunakan atribut transitionName untuk memberi tahu sistem Transisi Android tampilan mana yang harus diubah, Anda dapat menentukannya secara manual jika perlu.

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

Mirip 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 kita sama dengan durasi MaterialContainerTransform. Hal ini memastikan HomeFragment ditahan selama waktu yang sama dengan yang diperlukan untuk menjalankan transformasi penampung dan akan menghilang 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, lalu tambahkan cuplikan kode berikut sebelum panggilan metode NavController navigate untuk menyiapkan transisi keluar dan masuk kembali Sumbu Z MaterialSharedAxis 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 keluarnya.

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, terkait dengan parameter konstruktor boolean MaterialSharedAxis forward. Saat fragmen saat ini MainActivity keluar, SearchFragment akan masuk. Itulah sebabnya, dalam fragmen saat ini MainActivity, transisi keluar adalah maju dan dalam SearchFragment transisi masuk juga maju. Hal ini akan memastikan bahwa kedua fragmen bergerak ke arah yang sama saat pasangan transisi ini berjalan.

Hal yang berlawanan berlaku dalam arah mundur. Saat SearchFragment keluar, fragmen saat ini MainActivity akan masuk. Oleh karena itu, SearchFragment dikonfigurasi untuk kembali ke arah belakang dan fragmen saat ini MainActivity dikonfigurasi untuk masuk kembali ke arah belakang.

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

fragment_search.xml

android:transitionGroup="true"

Level SDK minimum Reply adalah 24, yang berarti kita dapat langsung menggunakan atribut android:transitionGroup yang diperkenalkan di level API 21. Jika aplikasi Anda mendukung level API di bawah 21, gunakan metode ViewGroupCompat#setTransitionGroup saat menyetel 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, lalu tambahkan cuplikan kode berikut sebelum panggilan metode NavController navigate untuk menyiapkan transisi keluar MaterialFadeThrough 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, tetapkan enterTransition fragmen ke instance MaterialFadeThrough baru.

HomeFragment.kt

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

Penyiapan di atas sedikit berbeda dari 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 itu, karena HomeFragment ditetapkan ke singleTop=true dalam grafik navigasi, Anda akan selalu menavigasi maju ke kotak surat baru dan tidak perlu menangani transisi kembali atau masuk kembali (transisi yang berjalan saat fragmen dikeluarkan). Oleh karena itu, Anda hanya perlu mengkhawatirkan penyetelan transisi masuk dan keluar HomeFragment.

Ini adalah contoh skenario arsitektur yang memengaruhi cara transisi dikonfigurasi. Anda harus membuat 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

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

Sebelum menambahkan kode, 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. Chip penerima (terlihat secara default) dan kartu penerima (tidak terlihat secara default) sudah ditambahkan dalam tata letak ComposeFragment. Chip penerima dan kartu ini adalah dua tampilan yang akan Anda buat transformasi container di antaranya.

Untuk memulai, buka ComposeFragment dan temukan metode expandChip. Metode ini dipanggil saat chip yang diberikan diklik. Tambahkan cuplikan kode berikut di atas baris yang menukar visibilitas recipientCardView dan chip, yang akan memicu transformasi penampung yang didaftarkan 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 diberikan pada semua tampilan yang berubah. Menetapkan target akan memastikan transformasi penampung hanya berjalan pada tampilan target tunggal yang ditentukan.

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

Di metode collapseChip dalam ComposeFragment, tambahkan cuplikan kode di bawah untuk menciutkan kartu kembali ke 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 meluaskan chip menjadi kartu, sedangkan mengklik kartu akan menciutkan kartu kembali menjadi 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 pedoman Desain Material, dan juga terlihat serta berfungsi secara konsisten di seluruh 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