Home   Courses   Blog   About

MotionLayout for Android Beginners

I’m always disappointed when working with UI transitions and animations for Android, it just looks like we were left behind. My colleagues on iOS play with effects all the time. That is why I was so excited when I heard about MotionLayout, it just looks like there is a little helper out there to make our lives a little bit easier. Don’t get me wrong we have a few possibilities in Android already, but none of them get me excited. What is great about MotionLayout is that it is fully declarative , this means that you can fully describe everything in XML, no code is needed. Also, MotionLayout is a ConstraintLayout, so you can transform one to the other with ease. This means that MotionLayout works like ConstraintLayout.

This blog is about making your first step into using MotionLayout, it is the simplest example that we can show you with enough effect to be fun as well. For more examples read the next part as well.

 

Let’s take a look of  the simplest example

1. First I just want to show you the basic steps to make it work. So start a new project (check our blow on How to create a new project).

2. Add the constraint layout library (with MotionLayout included) (you add this into your app gradle)

  • implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'


3. We will show you how to make it, the way we see it most appropriate. This means that you will have only one Layout and one MotionScene. So go to activity_main.xml layout and add a square (made from ImageView with dark_transparent background) on it. Make the constraint so that you align the square to the top left corner. 

In the end your layout should look something like this.

 

4. But since we want to make a MotionLayout you will have to change the ConstraintLayout to MotionLayout.

  


5. For the last change we will be adding a layoutDescription attribute. This is the main part of MotionLayout as it will link the MotionScene and layout (we will add MotionScene later).


In the end our layout will look something like this.

  

And this is is for the layout. Now we go to the fun part, making a MotionScene.



MotionScene XML

1. Now we need a MotionScene, sadly this is a file we must create ourself, but it is not that hard to do. Start with creating a new resource (right click on res folder).

  


2. Name your file scene_01 and put it into the XML folder of your resources.

 


3. Now we will change the content of the file to contain the code you see below.

 

4. This is a start of your MotionScene. Now we will describe a transition.

You can see, that we have specified a starting and ending constraintSet, the name we put there is something we think off, it can be anything, but “end” and start just make sense.

Next we have to decide on what kind of reaction/input our MotionLayout will work for. This time we will go with OnSwipe, but you can choose OnClick as well. In Onwipe tag you have attributes dragDirection and anchor details. Since we put our square on the left top part of the screen. We will choose direction dragRight and touchAnchorSide can also be the “right” border. What is touchAnchorId, this is an id of an element on the screen we will work with.


5. Now we need to add our ConstraintSets. At this point we need to mention, that currently MotionLayout will work only with direct children, this is not important for our example, but we just know, that you will play around and this is a fact you will have to work with.

 

You can see that ConstraintSet is very similar to layout. MotionScene will replace constraints with ConstraintSet, so the starting point should be the same as in the layout. But we can keep details to a minimum, so we need the width and height, margins and constraints.


6. The next constraint set will be for the result, meaning the “end” constraint set.

 



The final scene will look something like this. 

 

Now we are ready to run the app. 

And now, if everything is as it should be, you are ready to interact with the square. Just drag it to the right border. You can also see, that if you lift your finger just before right border the square will move to the end by itself.



We want to change rotation and alpha as well

We want to show you a more dynamic example as well. It will be a small change to the code, but with big impact. 

MotionLayout offers some transitions straight out of the box:

  • alpha
  • visibility
  • elevation
  • rotation, rotation[X/Y]
  • translation[X/Y/Z]
  • scaleX/Y

We already used translation, but now we will add rotation and alpha. We just need to change the “end” ConstraintSet

Only add two lines, one for alpha, and one for rotation. And this will make all the difference for us. The end result will look like this:

 

Well we said the simplest example and this is it. But we know that you will be able to play around with some properties.


We will be adding the second new part next week, where we will animate the header on a scrollable screen, a form for entering data about a user. In that example we will show, how you can link all the things and make more room for your inputs on the screen.