Easy Android: Shared Element Transition

Developing apps for Android can be frustrating, hard and will sometimes drive you mad. Learning new things within Android development can also be difficult. Sure, Stackoverflow is an awesome source when it comes to learning code and Google is also covering a lot of things, but sometimes you just want a simple tutorial with as less code as possible and that is why I created Easy Android. This series will cover everything from animations to Snackbars, just like any other tutorial site, but way more understandable. I will cover you with the code necessary to succeed and some explanations (but I won’t get too technical here, this is supposed to be easy).

So who am I? Well, my name is Fredrik and I am an amateur Android developer. I mainly do icon packs when developing by myself. Together with two of my friends, we have created “company” called HeavyFork. With HeavyFork, I have developed a quite successful icon pack and a colour app. We are also working on a small little game that will be released soon.

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.

// MainActivity
public void animateIntent(View view) {

    // Ordinary Intent for launching a new activity
    Intent intent = new Intent(this, YourSecondActivity.class);

    // Get the transition name from the string
    String transitionName = getString(R.string.transition_string);

    // Define the view that the animation will start from
    View viewStart = findViewById(R.id.card_view);

    ActivityOptionsCompat options =
           
    ActivityOptionsCompat.makeSceneTransitionAnimation(this,
                    viewStart,   // Starting view
                    transitionName    // The String
            );
    //Start the Intent
    ActivityCompat.startActivity(this, intent, options.toBundle());

}

That’s it!

Now launch your application and look at that beautiful animation that you’ve just created. That wasn’t hard was it? This transition effect doesn’t require many lines of code and you applications will look so much better.

If you have any questions just submit a comment and I will try my best to answer it!