Bedah Kode: Transisi Dasar pada Android — Kotlin

Azis Naufal
UNIKOM Codelabs
Published in
3 min readMay 28, 2020
Photo by Damon Hall on Unsplash

Helo!

Pada cerita kali ini, ringan saja…
Jadi, beberapa waktu lalu saya sempat keliling-keliling untuk mencari tahu tentang animasi di android. Mulai dari googlesamples, dokumentasi android, hingga artikel medium orang lain. Sampai saya agak memaksa mencari dengan keyword site:github.com yang dikhususkan hasil pencariannya hanya dari github saja. Dapatlah suatu link yang terliat indah, karena username nya android.

Sepertinya itu memang contoh code untuk kumpulan penerapan animasi di android.

Oke, kali ini langsung saja. Di dalam repo tersebut ada repo tentang BasicTransition. Repo ini memberikan contoh untuk memberikan efek transisi dari banyak scene yang tersedia. Ini preview nya:

Nah kali ini, saya sudah porting repo tersebut ke bahasa kotlin agar dapat memberikan kemudahan. Dan tentunya saya jadi lebih mudah untuk menjelaskan. 😁

Langsung saja mulai pembahasannya.

  1. AndroidManifest.xml

Di sini tampak biasa saja, terdapat sebuah activity launcher yang dapat dijalankan dari launcher android kita.

2. MainActivity.kt

Di sini, pada onCreate dijalankan. Akan menginisiasikan fragment BasicTransitionFragment.kt ke dalam R.id.sample_content_fragment.

3. BasicTransitionFragment.kt

Pada onCreateView, yang dilakukan adalah menginflate layout R.layout.fragment_basic_transition

Lanjut ke onViewCreated,
mScene1, di inisialisasikan pertama dari scene1.xml. Karena saat layout di inflate pertama kali, scene1.xml lah yang pertama ditampilkan.
Sayangnya sudah constructor yang digunakan sudah deprecated, karena pada parameter kedua, yang dimasukan adalah ViewGroup (RelativeLayout) bukan View.

mScene2 dan mScene3 diinisialisasikan dengan menghubungkan Scene yang sudah terhubung pada ViewGroup scene_root.
Lalu, mTransitionManagerForScene3 di inisialisasikan dengan Transitioin Inflater dari R.transition.scene3_transition_manager.

Pada changebounds_fadein_together.xml berisikan transitionSet yang berisikan animasi fade bermode fade_in, targetnya ada pada view dengan id transition_tittle.
Lalu scene3_transition_manager akan mengatur kapan animasi changebounds_fadein_together dilakukan, yaitu pada saat masuk ke scene3.

Kembali lagi ke BasicTransitionFragment.

select_scene.setOnCheckedChangeListener(this)
merupakan perintah untuk menginisiasikan RadioGroup jika terjadi perubahan nilai yang di checklist pada RadioButton. This merujuk pada kelas BasicTransitionFragment yang megimplementasikan interface RadioGroup.OnCheckedChangeListener.

Pada fungsi onCheckedChanged, akan dijalankan ketika RadioButton yang dipilih berpindah.

Jika pilihan 1, maka akan berpindah ke mScene1.
Jika pilihan 2, maka akan berpindah ke mScene2.
Jika pilihan 3, maka akan berpindah ke mScene3. Penggunaannya berbeda karena terdapat transisi yang dibuat sendiri (xml).
Jika pilihan 4, maka akan mengubah ukuran kotak merah.

Oke, segitu pembahasan bedah kode kali ini. Jika diperhatikan lagi pada scene1.xml atau scene2.xml atau scene3.xml semuanya hanyalah view group yang berisikan view child biasa. Teman-teman juga dapat merubahnya menggunakan ConstraintLayout agar lebih mudah lagi dalam menyesuaikan posisi view.

--

--

Azis Naufal
UNIKOM Codelabs

Mobile Engineer — Android , Backend Engineer — Laravel/Lumen