Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Motion Layout, Android

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.

Beatrice Kinya

February 13, 2023

More Decks by Beatrice Kinya

Other Decks in Technology


  1. 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
  2. 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.
  3. Principles - Use motion to inform users by highlighting relationships

    between elements, availability of actions and action outcomes. Informative
  4. Principles cont’ Celebrates moments in user journey, add character to

    common interactions, can express a brand’s style. Expressive
  5. - 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
  6. <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>
  7. 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>
  8. 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>
  9. 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.
  10. 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.