[Android] Shared Element Activity Transition

patterns-gestures-gestures-long-press-drag_large_xhdpi

Well i’m still alive haha.. Invasi Java 8 ke Android cukup menyita waktu tidur so belum sempet nulis-nulis lagi *mencari alasan hohoho.

So kali ini mau share sedikit mengenai Transition, lebih tepatnya shared element activity transition. Seperti yang sudah kita tahu, transisi antara activity di Android selalu memberikan efek animasi untuk satu view hierarchy. Nah akan tetapi dengan shared element transition, kita bisa memberikan efek animasi hanya pada satu atau beberapa view yang kita inginkan saja. Tujuannya adalah agar aplikasi dapat memberikan efek continuity kepada user.

Nah untuk demo project’nya bisa di’clone / download di sini. Setelah itu kita akan coba membahas beberapa poin pentingnya :

Transition Name

<ImageView            
    android:id="@+id/iv_item"
    android:layout_width="75dp"
    android:layout_height="75dp"
    android:scaleType="centerCrop"
    android:src="@mipmap/ic_6"
    android:transitionName="@string/shared_view_transition" />

Untuk setiap view yang akan menggunakan shared element transition, kita harus memberikan atribut ‘transitionName’. Isi dari atribut ini adalah string yang kita bisa kita isi dengan apa saja. Hal yang menjadi catatan adalah string yang digunakan di view pada Activity A, harus sama nilainya dengan view yang digunakan pada Activity B.

ActivityOptionsCompat

Setelah itu kita cukup membuat objek Intent dan memanggil method ‘startActivity’ dengan objek ActivityOptionsCompat sebagai parameter kedua. ActivityOptionsCompat ini mempunyai static method ‘makeSceneTransitionAnimation’ yang menerima parameter : Context, View yang akan menggunakan sharedTransition, dan String sebagai transition name view tsb.. Nah method ini akan memberikan kita objek yang akan digunakan sebagai parameter kedua untuk method ‘startActivity’.

Intent intent = new Intent(this, DetailActivity.class);
intent.putExtra(KEY_INTENT_DETAIL, item);
ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.
    makeSceneTransitionAnimation(this, sharedView, 
    getString(R.string.shared_view_transition));
startActivity(intent, optionsCompat.toBundle());

Pretty straightforward right ? hehe.. Oh iya perlu diingat kalau shared element transition ini hanya bisa digunakan di versi Android Lollipop ke atas (SDK 21). Kita bisa saja menggunakan pengecekan ekstra untuk versi aplikasi, e.g :

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP {
    // buat objek options compat
    startActivity(intent, optionsCompat.toBundle());
} else {
    // buat intent seperti biasa
    startActivity(intent);
}

Akan tetapi jika kita tidak menggunakan pengecekan versi seperti contoh di atas pun, aplikasi akan berjalan dengan normal. Artinya jika aplikasi dijalankan di versi Android sebelum Lollipop, maka aplikasi akan menggunakan transisi default (transisi yang memberikan efek animasi untuk satu view hierarchy).

Oh iya satu lagi, kita juga bisa memberikan efek curved untuk shared element transition ini seperti halnya pada aplikasi Play Store. Kita cukup membuat satu file transition di folder /res/transition, dan men’define nya di file styles.xml.

res/transition/image_transform.xml

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400"
    android:interpolator="@android:interpolator/accelerate_decelerate">

    <changeBounds />
    <arcMotion
        android:maximumAngle="90"
        android:minimumHorizontalAngle="15"
        android:minimumVerticalAngle="0" />

res/values/styles.xml

<item name="android:windowSharedElementEnterTransition">@transition/image_transform
<item name="android:windowSharedElementExitTransition">@transition/image_transform

And that’s it ! It’s so simple hehe.

Thanks for reading 🙂

References : Android Developer

Images : Material Design