We Are Mobile First
Whenever we start working on a new app, we are always thinking of the ways in which we could improve it visually with the most ease. There are a wealth of animations out there for making apps with visual impact, from reveal to fade and even transition animations between screens.
The Android Support Library supports developers in their quest for easy animations as it contains several library packages with tools that we can use to help animate our apps. Tools like the Android transition framework, for example, make a simple relation between the components on the view that we wish to animate, allowing us to animate between two activities or between two layouts on the same activity. The Support Library also includes animations for the ConstraintLayout component, albeit housed in a separate package to the aforementioned transition framework.
In this blog post, we’ll look at how to create easy animations for your Android app that will make your app stand out from the crowd. I’ll be focusing on the following two types of animations:
These kinds of animations are available from the Android 5.0 (API level 21). This won’t affect older Android versions, however, where everything reverts to a default transition when moving between screens.
We first need to check if we have the appcompat library added to the build.gradle file. It’s normally added by default when you create a new project:
<p> CODE: "https://gist.github.com/DavidFD005/01ef1201aabd285614d817d46ed550a9.js"></script>
Once we’ve ensured that it’s added, we can get started!
Create two activities. Let’s name them MainActivity and DetailActivity and their respective layout files can be named activity_main.xml and activity_detail.xml.
We need to add an ImageView, a Button and a TextView onto the layouts. See Github gist files below. Once we’ve achieved the aforementioned steps, we’ll begin to edit the layout files.
In order to make the elements ‘Shared Elements’, we need to set the XML tag to android:transitionName on every component (on both layouts) that we want to share between the screens.
As shown here:
<p> CODE: "https://gist.github.com/DavidFD005/d2793dc1f894e478ef012e4c4d42afe9.js"</p>
<p> CODE: "https://gist.github.com/DavidFD005/6926f04d89b6e4e1b6589a2106761188.js"</p>
As you can see, we have shared two elements between a button and an image. We now have to go back to the MainActivity in order to make it work.
Firstly, we need to import the android.util.Pair (another package from the Android Support Library) to use the transition framework with more than one element.
<p> CODE: "https://gist.github.com/DavidFD005/c29d46ad422ef911f72b90597642db12.js"</p>
To make the animation, we need to know the relation between the Shared Elements and make a transition scene animation using ActivityOptionsCompat.makeSceneTransitionAnimation() like this:
<p> CODE: "https://gist.github.com/DavidFD005/81643f5e70edf716ff1f27e5e86f805b.js"</p>
We then have to pass the scene transition, as an option of the Intent transition of the current activity, to the next activity (in our case the DetailActivity) and wrap it inside a function as shown below:
<p> CODE: "https://gist.github.com/DavidFD005/f7daab147c2c36337479c5a53a66bc85.js"</p>
Finally, we can call this function inside the click listener of the button…and voila! You can see the result below.
As you can see, when we press ‘back’ it makes the inverse animation automatically. Add onBackPressed() to your button inside the DetailActivity to achieve the same result.
I’m now going to show you how to create a simple animation with ConstraintLayout – the TransitionManager available on API 19+ or via the Support Library. I will show you the basics of the TransitionManager for ConstraintLayoutand then I’ll let it blow your mind!
In this example, I’m going to create a simple animation on a Splash and Login screen. Before we get started, we need to add the ConstraintLayout library to the build.gradle.
<p> CODE: "https://gist.github.com/DavidFD005/d2cf6965aa2d63749b602a3943beffed.js"</p>
We now need to design something that we want to animate. For example, let’s say I wanted my logo to be animated from the centre to the top of the screen.
I would first need to create a new Activity named SplashActivity with its respective layout in this case named activity_splash.xml.
The layout must start with a ConstraintLayout as a root view. We can identify it as rootLayout. We then need to add a horizontal guideline, with a guide percentage of 25% of the screen height, inside the ConstraintLayout.
<p> CODE: "https://gist.github.com/DavidFD005/116e8f7454629222800c86f74b8860c8.js"</p>
Once that’s done, we can add the logo image at the centre of the screen and a button to activate the animation. You would normally do it with a delay, or maybe waiting for an API response, but remember this is an animation showcase!
<p> CODE: "https://gist.github.com/DavidFD005/85cac1543f91c6d82543230fdb39c2ee.js</p>
Once we have centred the image on the screen with all of the constraints (top, bottom, start, end) anchored on the parent, we can go to the SplashActivity and start animating it!
Inside the SplashActivity, we’ll create two ConstraintSets – one to reset the initial state of the ConstraintLayout and another to make the constraint changes. The ConstraintSet allows us to set the constraints of the components inside a ConstraintLayout programmatically. Once we’ve achieved that, we need to clone the actual constraints of our ConstraintLayout into the ConstraintSet.
With regards to the ConstraintSet, we can change the actual constraints using the connect() function. We can then change the bottom constraint from the parent to the horizontal guideline that we created earlier on in the process.
<p> CODE: "https://gist.github.com/DavidFD005/b80aff448761b38d30038ca514502bd5.js"</p>
Try to run your app with this activity and see what happens…
Aha! It’s not animating!
We forgot to add the TransitionManager to the ConstraintSet changes. There’s no need to worry, however, as we can set a TransitionManager.beginDelayedTransition() to our ConstraintLayout that will animate the constraint change with ease.
Before adding it, however, we need to customize the transition between both constraints. In order to do this, we’ll use the ChangeBounds() transition class and we’ll add a custom duration of 1 second and an Interpolator object which, in this case, uses AnticipateOvershootInterpolator(). The default interpolator for the TransitionManager is linear.
<p> CODE: "https://gist.github.com/DavidFD005/7eb7366520dfee6a3caaa8472a01b646.js"</p>
It’s now time to test our animation!
Aaaand, there we have it!
I’ve made a continuation of this animation to illustrate the potential of these easy animations for Android apps. You can find the following example on my Github.
---
You should now be able to make your own flawless creations now that you know how to create easy animations for your Android app. If you give it a go, tweet us your efforts! We’d love to see them!
Make sure you’re following us on Twitter, Medium or LinkedIn to be notified of our future blog posts. We share weekly posts on everything from how to manage to your Android memory to how to use IDEs effectively.
(Hero image credit: Rawpixel via Unsplash)