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

Identifying and fixing humongous allocations in cassandra

5 REASONS TO BECOME A WEB DEVELOPER

Java IO - Part 2: File IO - 1

Milky Way

A journey to AWS Lambda integration testing with Python, Localstack and Terraform

Introduction to AWS CloudWatch

Tame Database Complexity With SqlDBM and dbt

READ/DOWNLOAD*> Requirements Engineering Fundament

SQL Server Output variable

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

How to record a script for a mobile app for JMeter

Firebase push notifications in ionic capacitor app (Android)

Create Puskesmas Searching Application using HMS Location Kit

The Difference Between Designing Apps for iOS and Android