[Android] Material Design — Activity Transition

Material Design is sexy and is required to make your App to be featured by Google Play Store. Unfortunately, many of them can’t be implemented easily.

Here is the today topic — Activity Transition

There are some good transitions suggested by Material Design at here:

Material motion - Motion - Material design guidelines

BUT! The motion (transition) is NOT provided by default. It may spend you a lot of time to implement exactly to the suggested one. Below is the tutorial to help you to make the App to become more “Material” with minimal effort.

In the example, we have two activity: MainActivity and DetailActivity

MainActivity contain a recycler view which display a list of album.

DetailActivity is used to show the detail information of the album.

Our goal is to connect the two activities by using the scene transition animation and common element: the thumbnail of the album.

Step 1 — Assign theme to your target activities

AndroidManifest.xml:
<activity
    android:name=".MainActivity"
    android:theme="@style/AppTheme.Main">
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>

        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>
<activity
    android:name=".DetailActivity"
    android:theme="@style/AppTheme.Detail">
</activity>
styles.xml:
<style name="AppTheme.Main">
    <item name="android:windowExitTransition">@transition/main_exit</item>
    <item name="android:windowReenterTransition">@transition/main_reenter</item>
</style>

<style name="AppTheme.Detail">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowAllowEnterTransitionOverlap">true</item>
    <item name="android:windowEnterTransition">@transition/detail_enter</item>
</style>

Step 2— Define the transition for different state (enter, exit and re-enter)

main_exit.xml:
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
               android:transitionOrdering="together">

    <explode xmlns:android="http://schemas.android.com/apk/res/android">
    </explode>
    <fade>
    </fade>

</transitionSet>
detail_enter.xml:
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
               android:transitionOrdering="together">

    <slide android:slideEdge="bottom">
    </slide>
    <fade>
    </fade>

</transitionSet>
main_reenter.xml:
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
               android:transitionOrdering="together">

    <fade>
    </fade>

</transitionSet>

Step 3— Define the common view (thumbnail in this example) to be animated

ActivityOptions options = null;
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
  options = ActivityOptions.makeSceneTransitionAnimation((Activity) mContext, holder.thumbnail, mContext.getString(R.string.picture_transition_name));
  Intent intent = DetailActivity.makeIntent(mContext, album);
  mContext.startActivity(intent, options.toBundle());
}

Step 4 — Define the target view in the layout of detail activity

The imageView (id = picture) contain the transition name which is used to define the landing area (view bounds) of the animated view (holder.thumbnail)

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    app:contentScrim="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed">

    <ImageView
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000"
        android:fitsSystemWindows="true"
        android:scaleType="fitCenter"
        android:transitionName="@string/picture_transition_name"
        app:layout_collapseMode="parallax"/>

...

</android.support.design.widget.CollapsingToolbarLayout>

That’s All! Here is the animation you will see when the album is clicked:

• MainActivity will exit with explode and fade animation
• DetailActivity will enter with slide up and fade animation
• The two animation set is run together bcoz of windowAllowEnterTransitionOverlap = true
• The view in the recycler view (holder.thumbnail) is scaled and translated to the bound of the target view in detail activity (by matching the transition name)

Keynotes:

• Support at Lollipop (5.0) only (≥21)
• Beware the scale type of the common view to be animated