MotionLayout — Basic Setup

Ahmed Rizwan
AndroidPub
Published in
3 min readNov 25, 2018

--

A quick intro to MotionLayouts and it’s setup.

MotionLayout is the new layout in Android, for creating amazing interactive animations in android. It’s a part of ConstraintLayout 2.0 library.

To have MotionLayout up and running in your project, and to get a feel of how it works, you’ll need

  • A starting layout
  • An ending layout that has the ending constraints
  • And a motion scene (which defines our animation)

And finally we connect our starting layout to the motion scene — and bamm!

First thing, add ConstraintLayout 2.0 to your build.gradle dependencies

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

Starting Layout

This can be our activity_main.xml

Just three views, with constraints all set! Two of these we’ll animate, and the third will stay static.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/motion_scene"
tools:context=".MainActivity">

<TextView
android:id="@+id/movingTextView"
android:text="Moving Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>

<Button
android:id="@+id/button"
android:text="Slide Up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>

<TextView
android:id="@+id/staticTextView"
android:text="Static Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>

</android.support.constraint.motion.MotionLayout>

Ending Layout

We then create an ending layout, called activity_main_end.xml

Note: It only has the two views we intend to animate! (and their final constraints)

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/movingTextView"
android:text="Moving Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>

<Button
android:id="@+id/button"
android:text="Slide Up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.motion.MotionLayout>

Motion Scene

This is the file that defines the type of motion/animation we want and what the starting/ending constraints are.

Let’s call it motion_scene.xml (placed in res/xml/motion_scene.xml)

<?xml version="1.0" encoding="utf-8"?>
<MotionScene
xmlns:motion="http://schemas.android.com/apk/res-auto">

<Transition
motion:constraintSetStart="@layout/activity_main"
motion:constraintSetEnd="@layout/activity_main_end"
motion:duration="1000">

<OnSwipe
motion:touchAnchorId="@id/button"
motion:touchAnchorSide="top"
motion:dragDirection="dragUp"/>

</Transition>

</MotionScene>

Here we defined a Transition (the animation) with a duration & a start/end pointing to the layouts. And also a swipe Trigger on button (with up direction)which adds interactivity.

Also make sure to add a reference to this motion_scene file in activity_main using

app:layoutDescription="@xml/motion_scene"

And thats it! A simple motion layout animation is now added to the project.

Here I drag/swipe the button up & down to trigger this animation!

--

--

AndroidPub
AndroidPub

Published in AndroidPub

The (retired) Pub(lication) for Android & Tech, focused on Development

Ahmed Rizwan
Ahmed Rizwan

Written by Ahmed Rizwan

Web | Android | Senior Software Engineer @QuixelTools

Responses (1)