Complex ui animation with Motion layout

Sample code for Complex UI/Animations with Motion Layout talk given at the IWDEastAfricaSummit2021

Transcript

1. @ValentineRutto, Android Engineer Complex UI/Animations with Motion layout.
2. ValentineRutto Android Engineer-@Dlight Twitter | Linkedin | Medium | Github | Instagram @valentinerutto
3. • A layout type that helps you manage motion and widget animation in your app. • Subclass of ConstraintLayout and builds upon its rich layout capabilities. • Available as a support library and is backwards-compatible to API level 14. What is Motion Layout?
4. • Fully declarative; you can describe your animations in xml • Lets you describe the transition between layouts & can animate properties Why Motion Layout?
5. • When moving, resizing and animating UI components the user will interact with Limitation Motion Layout • Capabilities available for direct children views When Motion Layout?
6. • Add Constraint layout gradle dependency implementation 'androidx.constraintlayout:constraintlayout:2.0.4' • Convert xml layout to motion layout <androidx.constraintlayout.motion.widget.MotionLayout/> • Link layout to motion scene file <androidx.constraintlayout.motion.widget.MotionLayout . app:layoutDescription="@xml/activity_main_scene" > Getting started:
7. MotionScene An XML resource file that contains all of the motion descriptions for the corresponding layout.
8. Motion Scene File <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000"> <KeyFrameSet> </KeyFrameSet> </Transition> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
9. Motion Tags 1. ConstraintSet 2. Transition 3. KeyFrameSet <MotionScene..> <Transition> <KeyFrameSet> <keyAttributes/> </KeyFrameSet> <Onclick/> <OnSwipe/> </Transition> <ConstraintSet..></ConstraintSet..> </MotionScene>
10. Motion Tags : Constraint Set • Defines the ‘resting’ state that the motion scene will take. • Define the constraints that define your motion. <MotionScene..> <ConstraintSet android:id="@+id/start"> <Constraint android:layout_height="wrap_content" motion:layout_constraintTop_toTopOf="parent" motion:layout_constraintLeft_toLeftOf="parent" motion:layout_constraintRight_toRightOf="parent" android:layout_width="wrap_content" android:id="@+id/textView"/> </ConstraintSet> </MotionScene>
11. Motion Tags : Transition • Defines how 2 constraint sets will be transformed <MotionScene..> <Transition motion:constraintSetEnd="@+id/end" motion:motionInterpolator="linear" motion:constraintSetStart="@id/start" motion:duration="1000"/> </MotionScene>
12. Motion Tags : KeyFrames • Specifies key points in the transition where we can change any attribute. • Helps one modify the path the view takes during animations <MotionScene..> <KeyFrameSet> <KeyAttribute motion:motionTarget="@+id/textView" motion:framePosition="50" android:scaleX="2.0" /> <KeyAttribute motion:motionTarget="@+id/textView" motion:framePosition="50" android:scaleY="2.0" /> </KeyFrameSet> </MotionScene>
13. Resources 1. Motion Layout examples by developer.android.com 2. Motion Layout #MADSkills 3. Motion Layout Codelab
14. Demo Github Code https://github.com/valentineRutto/IWD2021MotionLayout
15. Thank You Twitter | Linkedin | Medium | Github @valentinerutto