App Development

Material World - Animating Lollipop: Shared View Activity Animations

WillowTree default article featured image

Animating Views and Fragments has been a staple of developing beautiful, immersive Android apps since the start. With each new version, Google has added a variety of improvements to the animation framework to make adding thoughtful animations more straight forward.

Animating views, animating scenes of multiple views, and animating properties of views is much easier than it used to be. In the past, a major pain point of animating Android apps was always Activity transitions. We could animate the entire activity transition and views in each Activity, but it was another story to animate shared UI components between Activities. Now, Android 5.0 Lollipop has solutions for just that, with the Activity Transition API.

With Lollipop, animating views between Activities has been simplified immensely. What used to be a tangle of custom one off animations and complex shuffling of view transparency has been boiled down to a couple lines of java and some xml attributes. We’ll run through a simple Activity Transition that uses shared views to foster a UX that makes it easy for users to answer the questions of how they got to where they are, and why they are there.

First, there are a few lines that need to be added to your Theme xml to make sure Activity Transitions work:

https://gist.github.com/Richie97/1a12de46868e3d74a910

<resources>
 
 
    <style name="AppTheme" parent="android:Theme.Material.Light">
        <!-- enable window content transitions -->
        <item name="android:windowContentTransitions">true</item>
        
        
        <!-- enable overlapping of exiting and entering activities-->
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
    </style>
</resources>

After you have Transitions enabled, you’ll need to configure which view in your child activity will be the view getting animated to during the Transition. In order to specify this, you’ll need to give it a name. Setting the name can be done either in the layout xml, or programmatically:

https://gist.github.com/Richie97/59c1d5536f54fdfd1c1b

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/cardImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:transitionName="cardImage"
        android:src="@drawable/smiley"/>
</RelativeLayout>



//Or if creating view programmatically
 
 
View cardImage = (ImageView) findViewById(R.id.cardImage);
cardImage.setTransitionName("cardImage");

So now the basic framework is in place to start animating between activities. In order to actually start the animations, it is a simple <code>ActivityOptions.makeSceneTransitionAnimation()</code> call and passing in the context along with the view you’ll be animating, as well as the name of the view you’ll be animating to during the Transition:

https://gist.github.com/Richie97/b37b84b9cf4e90249471

ImageView cardImage = (ImageView) findViewById(R.id.cardImage);
cardImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //This is where the magic happens. makeSceneTransitionAnimation takes a context, view, a name for the target view.
                ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(MaterialActivity.this, cardImage, "cardImage");
                Intent intent = new Intent(MaterialActivity.this, DetailActivity.class);
                startActivity(intent, options.toBundle());
            }
        });

So now that all of the parts are in place, you should have an animation similar to this:http://bit.ly/1DRTWjm

material-girl1-196x350

If you want to get even more fancy, you can pass in multiple pairs to animate multiple shared views, like so: https://gist.github.com/Richie97/eaef058e886ccd6a9b42

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "nameOfFirstView"),
        Pair.create(view2, "nameOfSecondView"));

As you can see, supporting Transition animations for Activities is simple to pull off in the new version of Android. It’s easier than ever to create beautiful and immersive Android apps with animations that not only delight users, but also help them understand how they got to where they are in the app. For more information and source code, feel free to browse over to https://github.com/willowtreeapps/MaterialGirl which will be the repo we use for our Android L examples.

Quickstart-Guide-to-Kotlin-Multiplatform

A Quick Start Guide to Kotlin Multiplatform

Kotlin Multiplatform, though still experimental, is a great up-and-coming solution...

Read the article