Swipe right on Motion Layout

How to get into the swiping game with the beta version of Motion Layout

Google I/O 2019 finished recently and we got our updates on the latest improvement of our favorite SDK. What particularly piqued my interest was the presentation by Nicolas Roard and John Hoford on upcoming functionalities of Constraint Layout, and more precisely, its offspring, MotionLayout. By announcing the release of the beta version was all the motivation I needed to set about making our swiping game using a Motion Layout.

First of all, some definitions:

“A MotionLayout is a ConstraintLayout which allows you to animate layouts between various states.” — Developer Documentation

I strongly suggest to anyone who hasn’t seen it yet to read this series of articles by Nicolas Roard that explains the key concepts of Motion Layout.

With the introduction out of the way, let’s see what we are going to achieve:

Stack of cards

Showing a swipeable card

We will start by defining a Motion Layout in our layout directory containing the single top card for now.

Pay attention to the following line: app:motionDebug=”SHOW_ALL”

It allows us to draw debug information on the screen along with the paths of the motions, the state containing our current start and end animation, and our progress. It comes in really handy when debugging, but don’t forget to remove it before it hits production as there is no reminder to do so.

You can see that we don’t define any constraint on the views in this layout. They will be taken from the layout scene which we will be now defining.

We will start by defining our initial, rested state which consists of a single…