Motion Layout, Android

Motion layout is a layout that helps manage motion and widget animation in an android app.In this session, we'll look at how to leverage the capabilities of motion layout to create rich, interactive UI as well as design considerations while using motion layout.

Transcript

1. PRACTICAL MOTION LAYOUT @B__Kinya Android Engineer - Pula @ValentineRutto Android Engineer - D.light
2. Motion Layout - Layout type that helps you manage motion and widget animation in an android app. - Subclass of ConstraintLayout - Available in support library and is backward compatible to API level 14 - Capabilities available for direct children views and not nested views
3. Design Considerations - Motion in your app should not be gratuitous special effect in your app. - Use motion to enhance user experience in your app, i.e. help them understand what your app is doing. - Motion should be informative, focused and expressive.
4. Principles - Use motion to inform users by highlighting relationships between elements, availability of actions and action outcomes. Informative
5. Showing relationship between parent(inbox) and child(inbox message).
6. Showing relationship between parent(inbox) and child(inbox message).
7. Using motion to unite menu icon with opening action.
8. Principles cont’ Celebrates moments in user journey, add character to common interactions, can express a brand’s style. Expressive
9. Basil’s brand of stylized recipe content is communicated with customized transitions.
10. Principles cont’ Focuses user attention on what is important without creating unnecessary interruption. Focused
11. Incoming call.
12. - A separate XML layout that contain all motion description of a corresponding layout. - To keep layout information separate from motion description, each MotionLayout references a separate MotionScene. MotionScene
13. <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/rvBreed" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/rvBreed" /> </ConstraintSet> <Transition app:constraintSetEnd="@id/end" app:constraintSetStart="@+id/start" /> </MotionScene>
14. Motion tags: Constraint set - Defines the ‘resting’ state that the motion scene will take. - Define the constraints that define your motion. <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>
15. Motion tags: Transition - Contains base definition of motion - Defines how two constraint sets will be transformed <Transition motion:constraintSetEnd="@id/end" motion:duration="1000" motion:constraintSetStart="@+id/start" > <OnSwipe motion:touchAnchorId="@+id/iv_dog_image" motion:dragDirection="dragUp" motion:touchAnchorSide="bottom" /> </Transition>
16. Motion tags: Custom Attributes - To specify transition attributes that are not related to position and view attributes. - They include customColorValue, customIntegerValue, customFloatValue, customStringValue, customDimension, customBoolean.
17. <Constraint android:id="@+id/button" ...> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60"/> </Constraint>
18. Motion tags: KeyFrames - KeyFrames define intermediate state, i.e. specify a change at a point in time during transition. - For example intermediate positioning happening at 50% of total transition positioned 25% of the screen.
19. <Transition ...> <KeyFrameSet> <KeyPosition motion:keyPositionType="parentRelative" motion:percentY="0.25" motion:framePosition="50" motion:target="@+id/button"/> </KeyFrameSet> </Transition>
20. KeyFrame Interpolation <KeyFrameSet> <KeyAttribute android:scaleX="2" android:scaleY="2" android:rotation="-45" motion:framePosition="50" motion:target="@id/button" /> </KeyFrameSet>
21. Demo Github Demo Code: https://github.com/valentineRutto/RandomDogImages.git
22. Resources https://android-developers.googleblog.com/2021/02/mad-skills-motion-layout-wrap-up.html https://developer.android.com/training/constraint-layout/motionlayout/examples https://codelabs.developers.google.com/codelabs/material-motion-android#0 https://material.io/design/motion/understanding-motion.html
23. Thank You @B__Kinya Android Engineer - Pula @ValentineRutto Android Engineer - D.light