Android MotionLayout: Creating the Twitter Splash Screen (Part II)

I didn’t plan to write this at first since my last tutorial covers pretty much everything about MotionLayout I intended to write about.

But..

I received questions on social media about this one action several times, which is about how to move to next screen after our animation is complete. I thought it’d be easy to figure out on your own but when I looked around, I figured that there aren’t very many resources for MotionLayout yet.

Also, my last tutorial is a bit long to follow for beginners (I tend to keep beginners in mind when writing blog posts and make it as detailed as possible for them to understand since I’ve noted that experienced developers tend to skim through a tutorial to find the information they’re looking for anyway. So it’s a win-win) ;)

So without further ado, let’s jump right in.

Recap

If you’ve followed my last tutorial (which is the main tutorial on how MotionLayout works), you’d have a screen looking like this: 👇

Previous Post

Android MotionLayout: Creating the Twitter splash screen in the simplest way possible

The animation currently does not have an end and it loops back and forth through the animation. But for moving to the next screen, we need to have an end to our transition.

Disable Animation Loop 🔁

In order to move to the next activity, we need to make one tiny change to our motion; that is to stop the reverse loop and make it animate only once, to do so:

1. Open activity_main_scene.xml
2. Add the following property in your OnClick tag: