Preparations

Did you read the first part? No, I thought so. Well, you didn’t miss anything necessary for creating this awesome transition effect that was introduced in Android 5.0.

First things first. You will only see this effect when running your app with a phone running Lollipop or later (SDK 21).

Make sure that you have created two activities as well!

Shared Element Transition

Shared Element Transition can be described liked this: Having a view that moves from one activity to another in a smooth motion. Doing this in Android 4.4 and below was a pain in the ass to be fair. But this all changed when Google released Android 5.0, more animations to the people!

This video shows what we want to create. When the user clicks on the card, he/she gets taken to the next activity with a nice animation. The card expands smoothly into a blue background. When the user navigates back, the background shrinks back into a card.

Let’s code!

OK, so now for the coding part.

Start of by enabling windowContentTranistion to your theme in styles.xml. This will only work for >SDK 21 so consider making a styles-v21.xml that will enable this for every device running Android 5.0 or higher.

<!-- styles.xml --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Add this line -->

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



</style>

After that, create a string in strings.xml that is uniqe.

<!-- strings.xml --> <string name="transition_string">hello</string>

Go to the views that you want to animate and set the transitionName to the string that you previously created. In my example, I have a CardView that is animated into a RelativeLayout but you can do this with ImageView, TextView, you name it!

I also have an onClick on the CardView.

<!-- This is the first view in the first activity --> <android.support.v7.widget.CardView



xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:card_view="http://schemas.android.com/apk/res-auto"

android:id="@+id/card_view"

card_view:cardBackgroundColor="#084072" android:clickable="true"

android:onClick="animateIntent" android:transitionName="@string/transition_string" android:layout_width="match_parent"

android:layout_height="wrap_content" >

Next activity:

<!-- This is the second view in the second activity --> <RelativeLayout



xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"



android:transitionName="@string/transition_string" tools:context="com.fredrikaldgard.folded.NewsActivity"

android:background="#084072"> </RelativeLayout>

Now for the Java part. We will create a new method that will run when you click on the CardView.

You only need to write code in the first activity, so in this case the MainActivity. Android handles the transition all by itself. And best of all? You don’t have to write a single line of code to deal with backwards compatibility, Android will just ignore the animation part on devices running a lower Android version than 5.0 (Lollipop) and handle it just like an ordinary Intent.