AndroIdiots Podcast 9 : Motion Layout
Creating animations has always been fun yet tricky. With so many animation api available it can take some time to master the art of creating good, smooth animations, but not anymore, android has come up with Motion Layout which tries to solve all the worries, In this episode we dissect the Api with himanshu saluja from UrbanClap and discover what the api has to offer for the devs.
Show Notes :
Scene :
A Scene stores the state of a view hierarchy, including all its views and their property values. The transitions framework can run animations between a starting and an ending scene.
Manages set of transition when there is a change of Scene.
<transitionManager xmlns:android="http://schemas.android.com/apk/res/android">
<transition
android:fromScene="@layout/transition_scene1"
android:toScene="@layout/transition_scene2"
android:transition="@transition/changebounds"/><transition android:fromScene="@layout/transition_scene2"
android:toScene="@layout/transition_scene1"
android:transition="@transition/changebounds"/></transitionManager>
Announced in Google I/O 2018, is subclass of Coordinator Layout , its fully declarative and is an attempt to make creating complex animation involving user interaction breeze for android developers.
And in google’s own words, its :
A mix between the property animation framework, layout transitions with TransitionManager, and CoordinatorLayout
It contains only the view and its properties, its position and attributes are separately defined in Motion scene. Its limitation being it can work with direct child views only compared to Transition Manager we are use to, which can play along with nested hierarchies and activity transitions.
While development use
app:showPaths=”boolean”to display the motion paths
app:progress=”float” to specify the transition progress from 0 to 1
app:currentState=”reference” to use a specific ConstraintSet
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/androidiots_motionLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/androidiots_scene_01"
tools:showPaths="true">
<android.support.constraint.utils.ImageFilterView
android:id="@+id/androidiots_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/androidiots"
app:altSrc="@drawable/androidiots2"
/>
</android.support.constraint.motion.MotionLayout>Motion Scene :
Only view definition resides in Motion layout. Declaration of the transitions, user action listeners, attribute values, constraint sets, key frame sets goes inside the motion scene file which the motion layout references.
Constrains you define in the motion scene and refer in motion layout will override existing constriant if any on the motion layout file.
<?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">
<Transition
motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end"
motion:duration="1000">
<OnSwipe
motion:dragDirection="dragRight"
motion:touchAnchorId="@id/androidiots_image"
motion:touchAnchorSide="right" />
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/androidiots_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="16dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="Crossfade"
motion:customFloatValue="0" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/androidiots_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginEnd="16dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="Crossfade"
motion:customFloatValue="1" />
</Constraint>
</ConstraintSet>
</MotionScene>Custom Attributes :
Declared under motion scene, attributes are used to add various properties to the motion layout which can change either based on animation state or user interaction.
Motion Scene comes loaded with a lot of custom attributes like BackgroundColor, Crossfade ,Saturation, contrast, warmth etc.
<CustomAttribute
motion:attributeName="Crossfade"
motion:customFloatValue="0" />
<CustomAttribute
motion:attributeName="BackgroundColor"
motion:customColorValue="#D81B60"/>KeyFrame :
Lets you define and play with intermediary states in a motion layout transition,
You can define KeyPosition to control the intermediary state position, and type namely pathRelative, deltaRelative, parentRelative
And KeyAttribute to change scale, rotation, frameposition you can also add custom attributes to it.
<KeyFrameSet>
<KeyAttribute
android:scaleX="2"
android:scaleY="2"
android:rotation="-45"
motion:framePosition="50"
motion:target="@id/image" />
<KeyPosition
motion:keyPositionType="pathRelative"
motion:percentY="-0.3"
motion:framePosition="50"
motion:target="@id/image"/>
</KeyFrameSet>Other Resources :
That’s it folks. In this episode, we tried to understand basics of Motion layout . Hope you enjoyed it.Play around with the api and share your animations with us.
You may follow our Subject Matter Experts on these platforms:
Himanshu Saluja : LinkedIn , Twitter
Follow us on twitter for regular udpates and feel free to DM the hosts (Anupam & Tushar) for any queries.
