Tinder MotionLayout
How create a similar gestures to Tinder App with Motion Layout version beta6.
As an Android Developer for 3 years I have been using ConstraintLayout and all its benefits. Since Google I/O 2019 I have been playing with its evolution called Motion Layout by Nicolas Roard and John Hoford.
MotionLayout is a subclass of ConstraintLayout with a lot of Nitro 🚀 to make really incredible animations in a very simple way.
In this post we will be putting together an animation similar to that of the Tinder App, where you can play with a swipe to the right or left according to your taste.
First of all, definitions from Nicolas Roard:
You can think of it in terms of capabilities as a mix between the property animation framework, TransitionManager, and CoordinatorLayout.
And… other interesting definition of MotionLayout:
MotionLayout is fully declarative.
I suggest reading these articles by Nicolas Roard that explain the key concepts of Motion Layout.
Let’s start, this is the animation that we will build together step by step:
Show Cards
Showing first card
First we simply added a card in the center of the Motion Layout in our layout directory.
Pay attention to the following line: app:showPaths=”SHOW_ALL”
It allows us to draw the paths of the motions. It comes in really handy when debugging, but don’t forget to remove it before it hits production.
Now let’s start defining the initial and final states of our cards.
We write the initial state, start state which consists of a single card in the middle of the screen with added margins on the parent.
Let’s add the unlike Constraint Set.They will represent the state of the top card when fully swiped to the left.
To do so, we add transitions to our Motion Scene, to swipe left.
Some arguments that make our animations react nicely:
- touchRegionId: since we are adding margin on the side of our card, we only want the top card area to intercept touch and not the whole Motion Layout.
- onTouchUp: with this property we want the card to either continue animating or settle back, so we use autoComplete.
Let’s see how this goes:
Curve the card path
We define a KeyPosition in our motion so as to ‘bend’ the path of the card into an arc shape.
By adding it to our motion scene:
We remove the card from the screen
To do this, we will add a transition that will be executed after unlike ends.
Define a new transition:
And new ConstraintSet offScreenUnlike:
Let’s look at the deriveFrom tag deriveConstraintsFrom, here we indicate that after the unlike transition ends, it will take the state of that transition and execute offScreenUnlike .
Let’s see how this goes:
Well, so far we have our first animation.
Where a card can swipe left, and is removed from the screen.
We will make the same animation, but to the right, we will summarize this work.
Swipe Right + Position for curve + Remove card to end swipe
We define a new transition with KeyPosition:
and define the ConstraintSet for like :
now we are going to remove the card to the right, as we did before, with a transition that will be executed after the transition likeends.
transition and ConstraintSet to remove card:
Let’s see how this goes:
Animated the bottom card
We are going to create a card to simulate infinite animation.
Define another card in our layout, similarly to the card one:
Now, we write the initial state for cardTwo. For this we will change the size of our card, changing the properties of scaleX and scaleY with the tag Transform.
and define the ConstraintSet for like and unLike:
Let’s see how this goes:
Detail of the Card
Let’s continue working, we will add a button to see the full detail of the card.
For this, we will add a TextView at the bottom of our cardOne.
We will add a new transition, but this is will execute with a Click in the TextView
And ConstraintSet start for this view.
Now we will create ConstraintSet detail and the status for views in this scene.
Let’s see how this goes:
How ugly those card corners look in full detail, we can fix that .. how? with the fantastic CustomAttribute
Let’s see how this goes:
Depth between cards
Last transition, we put together a depth effect between both cards.
First, we will define the transition.
And, ConstraintSet for collapseCards
The depth is given by the movement we make on the transitionY of our cardOne , and rotationX of our two cards.
Let’s see how this goes:
Run animation from code
For this, add two buttons on the layout and just configure a click as below.
Let’s see how this goes:
Ending notes
We have reached the end of making the effect of an infinite animation and with a viewModel and very simple logic we can achieve such an effect. To see more detail about this, I direct you to my GitHub repository.
Bear in mind that the library is still in beta. I’m looking forward to the stable version and to what promises to be a bright future for MotionLayout.
Talk about of Motion Layout
Below you can see my first talk about Motion Layout where I explain how to make this animation step by step.
and… a extra from Nicolas Roard and John Hoford from this talk.
Twitter @RodrigoMartinD
