ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Move Into Motion Layout

•
•
M
Mike Wolfson

The document discusses MotionLayout, a type of ConstraintLayout that allows animating layouts between states in Android. MotionLayout can be used to animate UI elements that users interact with through declarative XML. It allows defining ConstraintSets to encapsulate layout positioning rules and animate between them. Keyframes can also be defined to create intermediate animation states. The document provides code examples and resources for using MotionLayout.

1 of 22
Download to read offline
MOVE INTO MOTION LAYOUT
WHAT IS MOTION LAYOUT? A type of ConstraintLayout that allows you to animate layouts between states SupportLib starting with API 18 https://developer.android.com/reference/android/support/ constraint/motion/MotionLayout
WHY NOT USE ANY OF THE OTHER ANIMATION FRAMEWORKS? â–¸ Animated Vector Drawable â–¸ Property Animation Framework â–¸ LayoutTransition Animations â–¸ Coordinator Layout
WHY? MotionLayout is another way to do complex motion handling Like a mix between the property animation framework, TransitionManager, and CoordinatorLayout.
XML FTW! Declarative (only XML) Tooling (Soon â„¢)
LIMITATION Can only animate direct children vs Transition Manager & Activity Transitions which can animate nested layout hierarchies
WHEN? Use this to animate UI elements that the user interacts with, especially great for seekable transitions.
MATERIAL MOTION â–¸ "User is the prime mover" â–¸ "Motion focuses the user" â–¸ More: https://material.io/design/motion/understanding- motion.html
DEPENDENCY Shipping in Maven implementation "androidx.percentlayout:percentlayout:$jetpackVersion" Not on same versioning as Jetpack! implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha2'
START USING MOTION LAYOUT Change: <androidx.constraintlayout.widget.ConstraintLayout -to- <androidx.constraintlayout.motion.widget.MotionLayout
CONSTRAINTSET â–¸ Encapsulate positioning rules for a layout â–¸ Change between multiple Constraint sets â–¸ Animations will be calculated â–¸ Won't re-create your views â–¸ Reuses colors and other attributes
Move Into Motion Layout
MOTIONSCENE Seperate XML file that builds on concept of ConstraintSet ▸ Description of what MotionLayout will do ▸ XML file seperate from Layout ▸ layout file contains only Views and their properties  — not their positioning or movement.
Move Into Motion Layout
Move Into Motion Layout
DEMO & CODE #1
CUSTOM ATTRIBUTES Allows us to animate other things then layout rules, like color, size, and other intrinsic attributes
CUSTOM ATTRIBUTES - CODE <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" ... <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet>
KEYFRAMES Defines a intermediate state — a state to go through, but not a state to stay in. This can be more effective then creating multiple ConstraintSets (or a unique ConstraintSet for the middle state)
KEYFRAMES - CODE <Transition ...> <OnSwipe ... /> <KeyFrameSet> <KeyAttribute android:scaleX="2" android:scaleY="2" android:rotation="-45" motion:framePosition="50" motion:target="@id/text_the" /> <KeyPosition motion:keyPositionType="parentRelative" motion:percentX="0.25" android:rotation="45" motion:framePosition="50" motion:target="@+id/text_the"/> </KeyFrameSet> </Transition>
DEMO & CODE #2
RESOURCES Medium Article - https://medium.com/google-developers/ introduction-to-motionlayout-part-i-29208674b10d Google IO Video - https://youtu.be/ytZteMo4ETk Documentation - https://developer.android.com/reference/android/ support/constraint/motion/MotionLayout Github: https://github.com/googlesamples/android-

More Related Content

Move Into Motion Layout

  • 2. WHAT IS MOTION LAYOUT? A type of ConstraintLayout that allows you to animate layouts between states SupportLib starting with API 18 https://developer.android.com/reference/android/support/ constraint/motion/MotionLayout
  • 3. WHY NOT USE ANY OF THE OTHER ANIMATION FRAMEWORKS? â–¸ Animated Vector Drawable â–¸ Property Animation Framework â–¸ LayoutTransition Animations â–¸ Coordinator Layout
  • 4. WHY? MotionLayout is another way to do complex motion handling Like a mix between the property animation framework, TransitionManager, and CoordinatorLayout.
  • 5. XML FTW! Declarative (only XML) Tooling (Soon â„¢)
  • 6. LIMITATION Can only animate direct children vs Transition Manager & Activity Transitions which can animate nested layout hierarchies
  • 7. WHEN? Use this to animate UI elements that the user interacts with, especially great for seekable transitions.
  • 8. MATERIAL MOTION â–¸ "User is the prime mover" â–¸ "Motion focuses the user" â–¸ More: https://material.io/design/motion/understanding- motion.html
  • 9. DEPENDENCY Shipping in Maven implementation "androidx.percentlayout:percentlayout:$jetpackVersion" Not on same versioning as Jetpack! implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha2'
  • 10. START USING MOTION LAYOUT Change: <androidx.constraintlayout.widget.ConstraintLayout -to- <androidx.constraintlayout.motion.widget.MotionLayout
  • 11. CONSTRAINTSET â–¸ Encapsulate positioning rules for a layout â–¸ Change between multiple Constraint sets â–¸ Animations will be calculated â–¸ Won't re-create your views â–¸ Reuses colors and other attributes
  • 13. MOTIONSCENE Seperate XML file that builds on concept of ConstraintSet â–¸ Description of what MotionLayout will do â–¸ XML file seperate from Layout â–¸ layout file contains only Views and their properties  — not their positioning or movement.
  • 17. CUSTOM ATTRIBUTES Allows us to animate other things then layout rules, like color, size, and other intrinsic attributes
  • 18. CUSTOM ATTRIBUTES - CODE <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" ... <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet>
  • 19. KEYFRAMES Defines a intermediate state — a state to go through, but not a state to stay in. This can be more effective then creating multiple ConstraintSets (or a unique ConstraintSet for the middle state)
  • 20. KEYFRAMES - CODE <Transition ...> <OnSwipe ... /> <KeyFrameSet> <KeyAttribute android:scaleX="2" android:scaleY="2" android:rotation="-45" motion:framePosition="50" motion:target="@id/text_the" /> <KeyPosition motion:keyPositionType="parentRelative" motion:percentX="0.25" android:rotation="45" motion:framePosition="50" motion:target="@+id/text_the"/> </KeyFrameSet> </Transition>
  • 22. RESOURCES Medium Article - https://medium.com/google-developers/ introduction-to-motionlayout-part-i-29208674b10d Google IO Video - https://youtu.be/ytZteMo4ETk Documentation - https://developer.android.com/reference/android/ support/constraint/motion/MotionLayout Github: https://github.com/googlesamples/android-