Android Shared Element Transition Animation With Examples

In this tutorial we’ll implement a different kind of animation transition namely Shared Element Transition between activities.

Android Shared Element Transition Animation

Android 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 ListView) consists of different row items. More often than not, clicking any row would show details of that respective row in the next screen. So to emphasise continuity between the two activities, we’ll show a circular reveal animation. This improves the user experience by drawing their focus towards 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: This type of transition works only for android SDK>21.

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.

Android Shared Element Transition Animation Project Structure

android-shared-element-transition-project

This project consists of 2 activities and a CustomAdapter for the ListView.

Android Transition Animation – Shared Element Transition Code

To enable this transitions add the following snippet inside the AppTheme tag in styles.xml.

For both the layouts with this transition we need to assign a android:transitionName attribute.

The activity_main.xml populates a ListView and the details_activity.xml is for the the details screen. Both are shown below.

As you can see a android:transitionName attribute is declared as a string in the root view of both the layouts.

We’ve created a custom ListView which populates its layout from a ArrayList of String arrays. The layout and adapter of the ListView are given below.

The MainActivity.java and DetailsActivity.java are given below.

When an activity is finished, instead of finish() we invoke ActivityCompat.finishAfterTransition(this); as shown in the code below.

The output of the application in action is given below.
android transition animation, shared element transition android

This brings an end to this tutorial. You can download the final Android Transition Animation – Shared Element Transition Project from the link below.

By admin

Leave a Reply