Pages

Saturday, March 28, 2015

Android Programming - Contoh Fragment dan Animasi

Penggunaan animasi pada sebuah aplikasi tentu akan membuat tampilan aplikasi tersebut menjadi lebih menarik dan tidak monoton, penggunaan animasi yang tepat dapat membuat pengguna merasa nyaman dalam menggunakan sebuah aplikasi. Pada postingan kali ini saya akan share tentang cara membuat efek animasi pada fragment, cara ini saya temukan di salah satu thread stackoverflow, animasi akan dijalankan pada saat transisi/ perpindahan antara fragment. Misal terdapat 2 fragment, fragment A dan fragment B. Pada saat fragment B dipanggil dari fragment A, maka fragment B akan muncul dengan efek bergeser dari kanan ke kiri menggantikan tempat dari fragment A. Dan pada saat tombol back di tekan, fragment A akan muncul dari kiri ke kanan menggantikan fragment B. Cara ini dapat bekerja dengan Android Support Library, berikut contohnya.

FragmentManager fragmentManager = getSupportFragmentManager();

FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.setCustomAnimations(R.anim.enter, R.anim.exit, R.anim.pop_enter, R.anim.pop_exit);

CustomFragment newCustomFragment = CustomFragment.newInstance();
transaction.replace(R.id.fragment_container, newCustomFragment );
transaction.addToBackStack(null);
transaction.commit();

Perhatikan kode diatas. Urutan sangat penting, Anda harus memanggil setCustomAnimations() sebelum replace().

Selanjutnya, semua file di bawah ini harus disimpan dalam folder res/anim.

enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
               android:fromXDelta="100%"
               android:toXDelta="0"
               android:interpolator="@android:anim/decelerate_interpolator"
               android:duration="@android:integer/config_mediumAnimTime"/>
</set>

exit.xml
<set>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
               android:fromXDelta="0"
               android:toXDelta="-100%"
               android:interpolator="@android:anim/accelerate_interpolator"
               android:duration="@android:integer/config_mediumAnimTime"/>
</set>

pop_enter.xml
<set>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
               android:fromXDelta="-100%"
               android:toXDelta="0"
               android:interpolator="@android:anim/decelerate_interpolator"
               android:duration="@android:integer/config_mediumAnimTime"/>
</set>

pop_exit.xml
<?xml version="1.0" encoding="utf-8"?>
<set>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
               android:fromXDelta="0"
               android:toXDelta="100%"
               android:interpolator="@android:anim/accelerate_interpolator"
               android:duration="@android:integer/config_mediumAnimTime"/>
</set>

Durasi animasi dapat di ubah ke nilai standar lainnya seperti,
@android:integer/config_shortAnimTime.

Catatan: Jika pada saat transisi/ pergantian fragment terjadi perubahan konsfigurasi (misal rotasi dari potrait ke landscape atau sebaliknya), efek animasi untuk tombol back akan hilang. Ini adalah bug terdokumentasi yang masih ada pada Android Support Library. 

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...