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
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

4. Principles
   - Use motion to inform users by
   highlighting relationships
   between elements, availability
   of actions and action
   outcomes.
   Informative
   

   View Slide

5. Showing relationship between parent(inbox) and child(inbox message).
   

   View Slide

6. Showing relationship between parent(inbox) and child(inbox message).
   

   View Slide

7. Using motion to unite menu icon with opening action.
   

   View Slide

8. Principles cont’ Celebrates moments in user
   journey, add character to common
   interactions, can express a brand’s
   style.
   Expressive
   

   View Slide

9. Basil’s brand of stylized recipe content is communicated with customized transitions.
   

   View Slide

10. Principles cont’ Focuses user attention on what is
    important without creating
    unnecessary interruption.
    Focused
    

    View Slide

11. Incoming call.
    

    View Slide

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
    

    View Slide

13. xmlns:app="http://schemas.android.com/apk/res-auto">
    
    
    
    
    
    
    app:constraintSetEnd="@id/end"
    app:constraintSetStart="@+id/start" />
    
    

    View Slide

14. Motion tags: Constraint set
    - Defines the ‘resting’ state that the motion scene will take.
    - Define the constraints that define your motion.
    
    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"/>
    
    

    View Slide

15. Motion tags: Transition
    - Contains base definition of motion
    - Defines how two constraint sets will be transformed
    motion:constraintSetEnd="@id/end"
    motion:duration="1000"
    motion:constraintSetStart="@+id/start" >
    motion:touchAnchorId="@+id/iv_dog_image"
    motion:dragDirection="dragUp"
    motion:touchAnchorSide="bottom"
    />
    
    

    View Slide

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.
    

    View Slide

17. android:id="@+id/button" ...>
    motion:attributeName="backgroundColor"
    motion:customColorValue="#D81B60"/>
    
    

    View Slide

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.
    

    View Slide

19. 
    
    motion:keyPositionType="parentRelative"
    motion:percentY="0.25"
    motion:framePosition="50"
    motion:target="@+id/button"/>
    
    
    

    View Slide

20. KeyFrame Interpolation
    
    android:scaleX="2"
    android:scaleY="2"
    android:rotation="-45"
    motion:framePosition="50"
    motion:target="@id/button" />
    
    

    View Slide

21. Demo
    Github Demo Code: https://github.com/valentineRutto/RandomDogImages.git
    

    View Slide

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
    

    View Slide

23. Thank You
    @B__Kinya Android Engineer - Pula
    @ValentineRutto Android Engineer - D.light
    

    View Slide