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:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="oval" >

    <gradient
        android:endColor="#66ff0000"
        android:gradientRadius="150"
        android:startColor="#ffffcc00"
        android:type="radial"
        android:useLevel="false" />

    <size
        android:height="100dp"
        android:width="100dp" />

</shape>

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:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="oval" >

    <gradient
        android:endColor="#66ffcc00"
        android:gradientRadius="150"
        android:startColor="#ff00ff00"
        android:type="radial"
        android:useLevel="false" />

    <size
        android:height="100dp"
        android:width="100dp" />

</shape>

Sekarang, tambahkan shape3.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="oval" >

    <gradient
        android:endColor="#6600ff00"
        android:gradientRadius="150"
        android:startColor="#ff0000ff"
        android:type="radial"
        android:useLevel="false" />

    <size
        android:height="100dp"
        android:width="100dp" />

</shape>

Terakhir, tambahkan shape4.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="oval" >

    <gradient
        android:endColor="#660000ff"
        android:gradientRadius="150"
        android:startColor="#ffff0000"
        android:type="radial"
        android:useLevel="false" />

    <size
        android:height="100dp"
        android:width="100dp" />

</shape>

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:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff000000"
    android:id="@+id/base"
    tools:context=".TransitionsActivity">

</RelativeLayout>

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:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn1"
    android:src="@drawable/shape1"
    android:background="#00000000"
    android:contentDescription="shape"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:onClick="changeScene"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn2"
    android:src="@drawable/shape2"
    android:background="#00000000"
    android:contentDescription="shape"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:onClick="changeScene"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn3"
    android:src="@drawable/shape3"
    android:background="#00000000"
    android:contentDescription="shape"
    android:layout_alignParentLeft="true"
    android:layout_alignParentBottom="true"
    android:onClick="changeScene"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn4"
    android:src="@drawable/shape4"
    android:background="#00000000"
    android:contentDescription="shape"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:onClick="changeScene"/>

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:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff000000"
    android:id="@+id/base"
    tools:context=".TransitionsActivity">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:src="@drawable/shape1"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:onClick="changeScene"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:src="@drawable/shape2"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:onClick="changeScene"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:src="@drawable/shape3"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:onClick="changeScene"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn4"
        android:src="@drawable/shape4"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:onClick="changeScene"/>

</RelativeLayout>

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:

import android.transition.AutoTransition;
import android.transition.Scene;
import android.transition.Transition;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.RelativeLayout;
import android.transition.TransitionManager;

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

//scenes to transition
private Scene scene1, scene2;
//transition to move between scenes
private Transition transition;
//flag to swap between scenes
private boolean start;

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:

//get the layout ID
RelativeLayout baseLayout = (RelativeLayout)findViewById(R.id.base);

//first scene
ViewGroup startViews = (ViewGroup)getLayoutInflater()
    .inflate(R.layout.start_layout, baseLayout, false);

//second scene
ViewGroup endViews = (ViewGroup)getLayoutInflater()
    .inflate(R.layout.end_layout, baseLayout, false);

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.

//create the two scenes
scene1 = new Scene(baseLayout, startViews);
scene2 = new Scene(baseLayout, endViews);

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:

//create transition, set properties
transition = new AutoTransition();
transition.setDuration(5000);
transition.setInterpolator(new AccelerateDecelerateInterpolator());

//initialize flag
start=true;

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:

public void changeScene(View v){

    //check flag
    if(start) {
        TransitionManager.go(scene2, transition);
        start=false;
    }
    else {
        TransitionManager.go(scene1, transition);
        start=true;
    }
}

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.