How many times have you seen an animated profile header in an app and wished it was something that you were able to achieve? In this post, I’ll be sharing advice on how to create animated headers for Android with MotionLayout so that you too can make your very own.

They look impressive and are, surprisingly, much easier to craft than you might first think.

How to create animated headers for Android with MotionLayout

1. Master the MotionLayout basics

Before we get started, I recommend that you read my previous post on how to create animations for Android using MotionLayout. It not only explores the basics of MotionLayout but also goes some way to explore the power it holds too.

Whilst you’re there, you might as well read the first post in my animations series which was all about how to create easy animations for your Android app using Shared Elements and ConstraintLayout.

Read them? Good. A quick reminder before we get started: We’ll need the ConstraintLayout support added inside app/build.gradle in order to make this all work.

CODE: "https://gist.github.com/DavidFD005/4443114ad35d5d5ea31c4f2c74f68c39.js"

2. Create the Activity with its layout

If you are an Android developer, you’ll know how to create an Activity but for this particular layout to work we will need to add the MotionLayout as a parent.

Remember that MotionLayout is essentially a ConstraintLayout with superpowers!

CODE: "https://gist.github.com/DavidFD005/38d117eb2a108ad06ff01e5841c513e2.js"

Added it as a parent? Let’s get started!

3. Write your scrollable content and add it to the view

We now come to the easiest part of this tutorial.

Create a NestedScrollView with a Textview inside. You could alternatively use a Recyclerview.

The text inside the Textview is entirely up to you but make it relatively lengthy to ensure that it’s scrollable. Put it in a separate file to make it cleaner.

Once you’ve written the scrollable content, add it inside your Activity’s layout and anchor it to the parent view. We’ll come back to this later when we anchor it to a different view that we’ve yet to make.

CODE: "https://gist.github.com/DavidFD005/0905751d97cd05ed803cceb93c34e346.js"

4. Start motion scene

Once we have the scrollable content, we can add some joy to our layout.

I have decided to simulate a sunny sky with clouds but you can use whatever images/icons that you want. Get creative and engage your imagination!

You can find these particular drawable resources on my Github repository:

CODE: "https://gist.github.com/DavidFD005/abcb715b1a2cecd04c673c074abaf665.js"

My motion scene, so far, looks something like this…

5. End motion scene

Now that we’ve mastered our start scene, we need to work on our end scene.

Copy and paste the profile_motion_layout.xml to a new layout file. Let’s name it profile_motion_layout_end.xml.

Once we’ve done that, we can modify the constraints of some views with the end state that we desire.

CODE: "https://gist.github.com/DavidFD005/09431d9d8d3a0af1e0ecd89a1bd5ac6e.js"</pt>

The result should look something like this…

Our next task is to animate the transition from the start scene to the end scene.

6. Making the scene transition

We need to use a MotionScene wrapper to handle the scene transition.

All we need to do is create a new MotionScene inside …/res/xml with a Transition object and an OnSwipe event.

The OnSwipe event will handle the scrollable content we wrote earlier on in the tutorial and the Transition object will tackle the start and end scene.

Let’s take a look…

CODE: "https://gist.github.com/DavidFD005/056401c84f5819fb1836e2d881ef3e51.js"

We also need to set the reference of the MotionScene inside the scenes with the following tag: ‘app:layoutDescription=”@xml/motion_layout_profile_scene’.

CODE: "https://gist.github.com/DavidFD005/bf24615f74169edb4e7379b987576711.js"

7. Test your animation

Let’s test it to see if our animations work and assess whether or not we’re happy with the overall appearance of the animation.

Easy, right?! I could leave it like this but I want to make some further changes to really make the animations pop! You might be thinking, ‘but you’ve already animated it enough!’.

A valid point but I want to animate the profile icon, the text and apply a circular movement to the sun.

‍

8. Make desired revisions

If you followed my earlier orders and read my previous post about MotionLayout, you will know that you’re able to add modifications to the animations at any point you choose.

These modifications can be added with KeyFrameSet, KeyPositions and KeyAttributes.

Let’s add some now…

CODE: "https://gist.github.com/DavidFD005/d6344cd89aea560431b595803353d910.js"

Let’s see the animations in action…

9. Marvel at the finished result

Doesn’t that look even more impressive?!

It’s so easy to achieve too, especially as the source code can be found on my Github.

10. Share your efforts

Lastly, once you’ve created your header animation, get some feedback from your colleagues and peers. What do they think? Could it be improved?

You don’t necessarily have work on your animation alone either. Nominate some pals, send them this article and turn it into a competition to see who can create the best animation.

If you do end up using this tutorial, don’t forget to tweet us the results as we’d love to see them.

---

There you have it. Easy-to-follow advice on how to create animated headers for Android using MotionLayout. Will you be giving it a go? What are your top tips for working with MotionLayout? Tweet us and we’ll be sure to retweet your response.

We Are Mobile First is a digital product agency based in Barcelona. Follow us on Twitter, LinkedIn and Medium to be notified of our future posts and stay up-to-date with our company news. We share weekly content on everything from Android Studio tips and tricks to how to automate the Android code review process using Danger.

Animated Headers for Android with MotionLayout