Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Perkenalan dengan Android Transitions

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Amri Shodiq (you can also view the original English article)

Perkenalan

Framework Android Transitions membantu kita mengatur pergantian penampakan di antar muka aplikasi Anda. Anda bisa menganimasikan perubahan sebuah layar aplikasi, menentukan setiap fase sebagai scene dan mengatur perubahan pada tampilan aplikasi dari satu scene ke schene lainnya.

Dalam tutorial ini, kita akan membangun aplikasi sederhana dengan transisi beranimasi. Termasuk mempersiapkan file-file XML layout dan drawable, kemudian mengkonfigurasi dan mengimplementasikan transisi tersebut dengan bahasa Java. Kita akan membuat dua layar di mana item-item view yang sama diatur secara berbeda. Ketika kita menggunakan transition, Android otomatis akan menganimasikan perubahan dari satu layar ke layar lainnya.

1. Membuat Aplikasi

Langkah 1

Mulai dengan membuat aplikasi baru dengan IDE pilihan Anda. Anda membutuhkan minimum SDK 19 untuk menggunakan class-class transisi, dengan demikian Anda akan membutuhkan langkah-langkah tambahan jika Anda berrencana untuk mensupport Android versi-versi lama.

Buat sebuah Activity utama dan file layoutnya, gunakan nama start_layout.xml untuk layoutnya. Kita akan menambahkan layout lainnya nanti, menggunakan transisi untuk pindah dari satu layout ke layout lainnya. Gambar-gambar berikut menunjukkan prosesnya di Android Studio.

Langkah 2

Mari kita siapkan beberapa drawable shape (drawable shape adalah objek Shape yang dibuat dalam file XML) untuk digunakan di transisi kita. Kita akan gunakan 4 circle shape dengan masing-masing diisi dengan warna gradien yang berbeda-beda. Di direktori resource drawable aplikasi Anda, buatlah file baru dengan nama shape1.xml. Masukkan kode untuk Shape seperti berikut:

Shape ini adalah sebuah lingkaran dengan isi berupa gradien radial. Keempat shape sama, kecuali warna yang digunakan. Anda mungkin perlu membuat versi berbeda drawable-drawable di atas untuk densiti perangkat yang berbeda-beda. Berikutnya, tambahkan shape2.xml:

Sekarang, tambahkan shape3.xml:

Terakhir, tambahkan shape4.xml:

Kita akan gunakan shape-shape tadi sebagai ImageButtons di dua layout.

2. Buat Layout

Langkah 1

Mari kita buat dua layar yang akan kita atur transisinya dalam bentuk layout XML. Mulai dari file layout utama yang tadi kita tambahkan ketika membuat aplikasi, start_layout.xml. Buka file tersebut, kemudian pindah ke tab XML. Gunakan RelativeLayout seperti contoh di bawah ini:

Kita tambahkan property warna background dan ID untuk layout tersebut. ID ini sangat penting untuk memastikan transisi antar layar, kita akan menggunakan ID yang sama di layar kedua. Ketika Anda mengimplementasikan transisi di antara dua layar, Android akan menganimasikan pergantiannya asalkan tiap view memiliki ID yang sama di kedua layar tersebut, jika tidak view tersebut akan dianggap berbeda dan akan diberikan efek fade in atau fade out pada saat transisi tersebut.

Di dalam RelativeLayout, tambahkan sebuah ImageButton untuk setiap shape yang sudah kita buat:

Perhatikan bahwa setiap shape button memiliki sebuah ID, yang sama dengan di layout kedua, and sebuah atribut onClick. Kita akan masukkan method ini ke Activity utama kita nanti dan akan mulai transisinya ketika user mengklik shape manapun.

Anda juga akan melihat preview layout-nya di IDE, meskipun pada beberapa kasus, gradien atau transparansi tidak terlihat tanpa menjalankan aplikasi Anda di perangkat atau emulator. Shape-shape yang telah kita buat ditempatkan pada setiap sudut layar seperti gambar di bawah.

Langkah 2

Layout yang pertama kita buat akan merepresentasikan tahap awal transisi. Sekarang, mari kita buat file layout yang kedua untuk transisinya. Tambahkan file baru di dalam direktori resource layout aplikasi Anda, dan namakan end_layout.xml. Pindah ke mode edit text kemudian masukkan kode berikut:

Perhatikan kode layoutnya barang sebentar. Layout ini identik dengan layout pertama, kecuali posisi masing-masing shape button. Setiap shape berada pada posisi sudut yang berseberangan dengan posisi nya di layout pertama. Maka transisinya akan menukar shape-shape, memindahkan posisi mereka secara diagonal melintasi layar.

3. Transisi Antar Layar

Langkah 1

Kita sudah menentukan dua layout, sekarang mari kita gunakan transisi untuk menggerakkan kedua layout tersebut. Buka class Activity utama aplikasi Anda. Anda akan membutuhkan statement-statement import berikut:

Di dalam deklarasi class Activity, sebelum method onCreate, tambahkah instance variabel-variabel berikut yang akan kita gunakan untuk mengaplikasikan transisi:

Langkah 2

Sekarang, mari persiapkan transisinya, yang akan dimulai ketika user menekan salah satu shape. Di onCreate, setelah kode yang dituliskan oleh IDE, tambahkan baris berikut:

Pertama, kita tentukan layar awalnya, yaitu ID yang kita masukkan di dalam kedua file layout layar. Berikutnya, kita tentukan dua layar yang akan kita transisikan, sebutkan nama file layout mereka dan layar base nya. Ini akan memberi tahu Android bahwa kita ingin men-transisi-kan view-view di dalam kedua layar, memperlakukan semua view yang memiliki ID yang sama sebagai objek yang sama, sehingga ini akan menganimasikan perubahan dari satu layar ke layar berikutnya.

Berikutnya, kita tentukan dua layar yang ingin kita transisikan, masih di onCreate.

Kita berikan base layout dan layout layar yang sesuai ke setiap constructor. Sekarang, kita bisa mengacu kepada kedua layar ketika mendefinisikan transisinya.

Langkah 3

Mari kita pastikan transisinya siap, masih di onCreate:

Android menyediakan berbagai jenis transisi, tergantung bagaimana animasi perubahan layar yang inginkan. Dalam kasus ini, kita memilih AutoTransition, sehingga Android akan menghitung bagaimana membuat peralihan berdasarkan properti-properti di antara kedua layar. Lihat referensi Transitions untuk melihat pilihan lain.

Kita atur durasi dan interpolasi untuk transisinya. Anda juga bisa menentukan delay sebelum dimulainya perubahan. Akhirnya, kita inisiasi flag boolean ke true. Untuk mudahnya, kita akan gunakan ini untuk bertukan antara dua layar kapanpun user mengklik salah satu shape, tapi ingat, ini hanya untuk menunjukkan fungsi yang dilibatkan.

Langkah 4

Ingat bahwa kita telah menambahkan atribut onClick ke shape button ketika kita membuat XML untuk layoutnya. Ayo sekarang kita tambahkan method tersebut ke Activity:

Kita gunakan TransitionManager untuk transisi dari layar saat ini, ke layar lain, dengan flag boolean untuk memudahkan kita mengetahui dengan berada pada layout yang mana. Kita tentukan objek Transition yang kita buat untuk menyesuaikan bagaimana perubahannya.

Sekarang Anda mestinya sudah bisa menjalankan aplikasi Anda dan melihat transisinya kapanpun Anda klik pada shape. Setiap Anda klik, transisi seharusnya memindahkan shape-shape secara perlahan ke sudut seberangnya, kemudian mengembalikannya ketika Anda menekannya kembali.

Kesimpulan

Dalam tutorial ini kita benar-benar telah memulai eksplorasi apa yang bisa kita lakukan dengan framework transisi di Android. Untuk mengembangkan transisi Anda lebih jauh, cek juga method-method lainnya di class TransitionManager, misalnya beginDelayedTransition dan transitionTo. Anda juga bisa gunakan TransitionSet untuk menggabungkan beberapa transisi, contohnya dengan mengkonfigurasikan efek fading dan moving. Tergantung pada kompleksitas transisi Anda, Anda mungkin bisa memanfaatkan class TransitionValues, yang menyediakan referensi ke nilai data yang relevan kepada transisinya. Untuk informasi lebih banyak tentang apa yang bisa Anda lakukan dengan scene, lihat juga class Scene.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.