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

Introduction to Motion Layout

Saurabh
December 01, 2018

Introduction to Motion Layout

If you want to have a look at the animations, then the slides are also available at: http://bit.ly/2QtY3hr

MotionLayout is a new class available in the ConstraintLayout 2.0 library to help Android developers manage motion and widget animation in their application. In this talk, we’ll explore how you can very easily build complex layout animations and motion handling through simple XML code.

Github repository: https://github.com/saurabharora90/MotionLayout-Playground

Saurabh

December 01, 2018
Tweet

More Decks by Saurabh

Other Decks in Programming

Transcript

  1. Constraint Layout • Complex layouts with a flat hierarchy •

    Specifying constraints on views w.r.t other views • Helpers such as Barriers, Groups & Guidelines
  2. Constraint Set • Create another layout file with end state

    • Pick constraints from end state layout file • Apply constraints to constraint layout • Use transition manager for smooth transition
  3. private val start: ConstraintSet by lazy { val set =

    ConstraintSet() set.clone(this, R.layout.start) set }
  4. private val start: ConstraintSet by lazy { val set =

    ConstraintSet() set.clone(this, R.layout.start) set } private val end: ConstraintSet by lazy { val set = ConstraintSet() set.clone(this, R.layout.end) set }
  5. Motion Layout • Introduced in ConstraintLayout 2.0 • Subclass of

    ConstraintLayout • Works with touch system • Support for intermediate states (keyframes) • Fully declarative
  6. Attribute Constraint Layout Params Standard Attributes Visibility Alpha Custom Attributes

    Elevation Scale Rotation Translation • Reflection • String, color, float,int or boolean
  7. private val start: ConstraintSet by lazy { val set =

    ConstraintSet() set.clone(this, R.layout.start) set } private val end: ConstraintSet by lazy { val set = ConstraintSet() set.clone(this, R.layout.end) set } ....... TransitionManager.beginDelayedTransition(layoutRoot) end.applyTo(layoutRoot)
  8. <MotionScene ...> <Transition> ..... </Transition> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/ivSun" android:layout_width="80dp"

    android:layout_height="80dp" app:layout_constraintStart_toEndOf="parent"/> <Constraint android:id="@+id/ivMoon" android:layout_width="80dp" android:layout_height="80dp" app:layout_constraintEnd_toEndOf="parent" /> .... </ConstraintSet>
  9. Attribute Constraint Layout Params Standard Attributes Visibility Alpha Custom Attributes

    Elevation Scale Rotation Translation • Reflection • String, color, float,int or boolean
  10. Custom Attributes • Call "set"Name method via reflection • Case

    sensitive. • Supports color, string, int, float, boolean & dimension
  11. <Transition app:constraintSetStart="@+id/start" app:constraintSetEnd="@+id/end"> <OnSwipe app:dragDirection="dragRight" app:touchAnchorSide="left" app:touchAnchorId="@+id/ivSun"/> <KeyFrameSet> <KeyPosition app:target="@id/ivSun"

    app:framePosition="50" app:percentY="-0.25" app:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> <Constraint android:id="@+id/ivSun" .... />
  12. Recap • Part of constraint layout 2.0 - alpha release

    • Works with both position/layout and styling attributes • Interruptible and can set progress
  13. A mix between the property animation framework, layout transitions with

    TransitionManager, and CoordinatorLayout - Nicolas Roard
  14. Resources • Google IO'18 Talk • Introduction to Motion Layout

    by Nicolas Roard • Github : MotionLayout-Playground : https://github.com/saurabharora90/MotionLayout-Playground