Shared Element Transition in Android with Example

Implement Shared Element Transitions in Android

A shared element transition determines how shared element views are animated from one Activity/Fragment to another during a scene transition.

In pre-Lollipop devices, Android used to support transitions between Activities and Fragments that involved transitions of the entire view hierarchies. However, there are many cases when a view (let’s say RecyclerView) consists of different row items. More often than not, clicking any row would show details of that respective row on the next screen. 

So, to emphasize the continuity between the two activities, we’ll show a circular reveal animation. This improves the user experience by drawing their focus toward the relationship between the new screen and the previous screen. A Shared Element Transition like this is more commonly seen in music playlist apps.

Note that the shared element transitions require Android 5.0 (API level 21) and above and will be ignored for any lower API versions. Be sure to check the version at runtime before using API-21 specific features.

Let’s begin the implementation of the app. In this tutorial, we’ll implement custom ListView rows and show the desired transition for each of them.

Step 1: Enable Window Content Transitions

Enable Window Content Transitions in your styles.xml file:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="android:windowContentTransitions">true</item>
    ...
</style>

Step 2: Assign a Common Transition Name

Assign a common transition name to the shared elements in both layouts. Use the android:transitionName attribute.

Let's define a common transition name between both activity layouts. Here we are using the user_image name as a common transition name in activity_one.xml.

<!-- activity_one.xml. -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/img_userImage"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_margin="2dp"
            android:adjustViewBounds="true"
            android:src="@drawable/random_user_01"
            android:transitionName="user_image" />

</LinearLayout>

Use the same transition name for the second activity layout. 

<!-- activity_two.xml. -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/img_userImage2"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_margin="2dp"
            android:adjustViewBounds="true"
            android:src="@drawable/random_user_01"
            android:transitionName="user_image" />

</LinearLayout>

Step 3: Start the Activity using makeSceneTransitionAnimation

Let's move to the next step. Now we will start an activity using shared element transitions. Here we will use makeSceneTransitionAnimation a method of ActivityOptionsCompat. So we can allow screens to transact between activities.

Start the target activity by specifying a bundle of those shared elements and views from the source.

Refer below code as an example.

Intent intent = new Intent(getApplicationContext(), SecondActivity.class);
// Pass data object in the bundle and populate details activity.
intent.putExtra("image_name", 1);

ActivityOptionsCompat options = ActivityOptionsCompat
    .makeSceneTransitionAnimation(this, (View) img1, "user_image");
startActivity(intent, options.toBundle());
  

Thats it! Specifying the source view along with the transition name ensures that even if you have multiple views with the same transition name in the source hierarchy, it will essentially be able to pick the right view to start the animation from.

Thanks for reading this article. Hope you would have liked it!. Please share and subscribe to my blog to support.