Locomotion with Motion Layout

dependencies {
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'
}
<ImageView
android:id="@+id/locomotion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/train" />

<ImageView
android:id="@+id/sun"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/sun" />
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<ConstraintSet android:id="@+id/start">

<Constraint
android:id="@+id/locomotion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/end">

<Constraint
android:id="@+id/locomotion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent" />
</ConstraintSet>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layoutDescription="@xml/motion_scene"
tools:context=".MainActivity"
tools:showPaths="true">
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"

motion:duration="5000">
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="5000">

<OnClick
motion:clickAction="toggle"
motion:targetId="@id/locomotion"
/>
<KeyPosition
motion:framePosition="25"
motion:keyPositionType="pathRelative"
motion:motionTarget="@id/locomotion"
motion:percentX="0.75"
motion:percentY="-0.3" />
<KeyFrameSet>
<!-- Let's do the locomotion -->
<KeyPosition
motion:framePosition="25"
motion:keyPositionType="pathRelative"
motion:motionTarget="@id/locomotion"
motion:percentX="0.75"
motion:percentY="-0.3" />
<KeyPosition
motion:framePosition="50"
motion:keyPositionType="pathRelative"
motion:motionTarget="@id/locomotion"
motion:percentY="-0.4" />
<KeyPosition
motion:framePosition="75"
motion:keyPositionType="pathRelative"
motion:motionTarget="@id/locomotion"
motion:percentX="0.25"
motion:percentY="-0.3" />
</KeyFrameSet>
<KeyFrameSet>
<KeyAttribute
android:rotation="-360"
motion:framePosition="50"
motion:motionTarget="@id/sun" />
<KeyAttribute
android:rotation="-720"
motion:framePosition="100"
motion:motionTarget="@id/sun" />
</KeyFrameSet>
<KeyFrameSet>
<KeyAttribute
motion:framePosition="0"
motion:motionTarget="@id/background">
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#d7f0f7" />

</KeyAttribute>
<KeyAttribute
motion:framePosition="50"
motion:motionTarget="@id/background">
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#5ad1f2" />

</KeyAttribute>

<KeyAttribute
motion:framePosition="75"
motion:motionTarget="@id/background">
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#064152" />

</KeyAttribute>
</KeyFrameSet>

--

--

--

Android enthusiast and keen tea drinker. I love to learn and to be funny, both for me are passions.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Swapping iterators to turn zip to zip_longest

VPC & Subnetting Concepts in AWS

5 Must-Learn Libraries for Python Programmers

The Developer Apprentice Journey (Week XVI)

TryHackMe: Linux Fundamentals — Part 2 — a Walkthrough

Why git with ssh-agent forwarding can paralyze your code deployments?

How to use Google cloud platform from scratch in tandem with Vscode [Step by Step 🤖]

How to Get JSON Data from PHP Script using jQuery Ajax

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ivana Tanova

Ivana Tanova

Android enthusiast and keen tea drinker. I love to learn and to be funny, both for me are passions.

More from Medium

Android Resource Naming Convention

Develop Apps for Foldable Devices- A Worthy Decision!

My project.first.kt #1

Everything You Need to Know About Instant Apps in Android