Android Shared element Activity transition

Shared element transition is a nice way of adding animation between activity transition. As an example, lets take a movie list app with two screens. First screen contains a list of movies and when click one of those it will load the second screen.

When the second screen gets loaded it change the image of the movie to full width of screen screen and populate movie detail to another position with animation. This kind of animation can be done with a Shared element transition feature in android.

Why do we need shared element transition

The main reason for adding activity transition is give the user focus to more on content rather than the activity transition. Because if we see a normal activity transition it animate the activity when load the second screen. The the user focus will be lost. Because it hides the current activity content, then slide that activity and load the next one. But if we take shared element transition it will not hide and show valuable content when load next activity. It loads next activity seamless without loosing user focus.

Requirement

It required Api level 21 or above (android 5) to work. If your app run in lower version of the API the animation will not work. But app will work without any crash

Implementation

There are several steps which we need to follow when implementing a shared element transition.

  1. Content transition

We must enable android:windowContentTransitions in style.xml.

<item name="android:windowContentTransitions">true</item>

    2. Create an activity and add a Imageview. The key thing here is, we need to specify the attribute called “transitionName: for this imageview. “transitionName” used by android to identify which element needs to animate when load next activity.

<ImageView
android:id="@+id/imageM"
android:layout_width="100dp"
android:layout_height="70dp"
android:text="Hello World!"
android:transitionName="imageMain"
android:background="@drawable/youtube"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:onClick="loadNext"
app:layout_constraintTop_toTopOf="parent" />

   3.When User click imageview it trigger loadNext method. In there we need to specify the bundle. This is the code which you need to add inside loadNext method.

ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this,imageView,"imageMain");
Intent in = new Intent(this,DetailsActivity.class);
startActivity(in,activityOptionsCompat.toBundle());

   4. Next, create an Activity called DetailsActivity and add the following imageview. The “transitionName” of this image view must be same as the transitionName in the first activity.

 <ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="Hello World!"
android:transitionName="imageMain"
android:background="@drawable/youtube"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

Run Build and run the app to see the smooth animation.

Reference — https://developer.android.com/reference/android/transition/Transition

Leave a Reply