Do the Loco-MotionLayout: Building animations with MotionLayout

@mikescamell
Do the Loco-MotionLayout
@mikescamell
HERE!!!

@mikescamell
by Nikita Duhovny

– Nicolas Roard
“A mix between the property animation framework, layout transitions
with TransitionManager, and CoordinatorLayout”
MotionLayout

@mikescamellScene 1 - Part 1
<ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/bookCover"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:adjustViewBounds="true"
android:elevation="4dp"
android:outlineProvider="bounds"
android:src="@drawable/nolongerhuman"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.3" />
</ConstraintLayout>

@mikescamell
(Yes yes yes I know!)
dependencies {
implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha3'
}

@mikescamell
2019-03-20 19:45:26.529 28239-28239/? E/MotionLayout: WARNING NO app:layoutDescription tag
2019-03-20 19:45:26.683 28239-28239/? E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.mikescamell.locomotionlayout, PID: 28239
java.lang.NullPointerException: Attempt to invoke virtual method 'int
androidx.constraintlayout.motion.widget.MotionScene.getDuration()' on a null object
reference
Scene 1 - Part 2

@mikescamell
<MotionScene>
<Transition
<OnSwipe
app:dragDirection="dragDown"
app:touchAnchorId="@id/bookCover"
app:touchAnchorSide="bottom" />
</Transition>
</MotionScene>
Scene 1 - Part 2

@mikescamell
<MotionScene>
...
</MotionScene>
Scene 1 - Part 2

@mikescamell
<MotionScene>
...
<ConstraintSet android:id="@+id/start">
</ConstraintSet>
</MotionScene>
Scene 1 - Part 2

@mikescamell
<MotionScene>
...
<ConstraintSet android:id="@+id/end">
<Layout
app:layout_constraintStart_toStartOf=“parent"
app:layout_height="wrap_content"
app:layout_width="150dp" />
<Transform
app:rotationX="-55">
</Constraint>
</ConstraintSet>
</MotionScene>
Scene 1 - Part 2

@mikescamell
<MotionLayout
<MaterialCardView
android:id="@+id/bookSynopsisCard"
android:layout_width="140dp"
app:cardBackgroundColor="@color/crazyPink"
app:cardCornerRadius=“16dp" />
<ImageView … />
</MotionLayout>
Scene 1 - Part 3

@mikescamell
<MotionScene>
…
<Constraint android:id="@+id/bookSynopsisCard">
<Layout
<Transform app:rotationX="-55" />
</Constraint>
…
</ConstraintSet>
…
</MotionScene>
Scene 1 - Part 3

@mikescamell
<MotionScene>
…
<Layout
<Transform app:rotationX="0" />
</Constraint>
…
</ConstraintSet>
</MotionScene>
Scene 1 - Part 3

@mikescamell
<MotionScene>
…
<Layout
app:layout_constraintTop_toBottomOf="@+id/bookSynopsisCard"
app:layout_height="wrap_content"
<Transform
app:rotationX="-55"
app:translationY="-24dp" />
</Constraint>
</ConstraintSet>
</MotionScene>
Scene 1 - Part 3

• KeyAttribute
• KeyPosition
• KeyCycle
• KeyTimeCycle
• KeyTrigger
KeyFrames

@mikescamell
<MotionScene>
<Transition ...>
<KeyFrameSet>
<KeyAttribute
android:alpha="0"
app:framePosition="70"
app:target="@id/bookSynopsisTitle" />
<KeyAttribute
android:alpha="0"
app:target="@id/bookSynopsisText" />
</KeyFrameSet>
</Transition>
...
</MotionScene>
Scene 1 - Part 6

@mikescamell
Frame 0 Frame 100Frame 70
Synopsis
Scene 1 - Part 6

Liquidy background
Liquidy background

shapeshifter.design

@mikescamell
topLeftAnimationForward ?.registerAnimationCallback(object :
Animatable2Compat.AnimationCallback() {
override fun onAnimationEnd(drawable: Drawable?) {
topLeftImageView.setImageDrawable(topLeftAnimationReverse)
topLeftAnimationReverse ?.start()
}
})
Scene 1 - Part 7
topLeftAnimationReverse ?.registerAnimationCallback(object :
Animatable2Compat.AnimationCallback() {
override fun onAnimationEnd(drawable: Drawable?) {
topLeftImageView.setImageDrawable(topLeftAnimationForward)
topLeftAnimationForward ?.start()
}
})

@mikescamell
<MotionScene>
...
<Layout
app:layout_constraintDimensionRatio="16:9"
<Transform app:elevation="8dp" />
</Constraint>
</ConstraintSet>
</MotionScene>
Scene 2 - Part 1

@mikescamell
<MotionScene>
...
<Layout
app:layout_constraintDimensionRatio="16:9"
<CustomAttribute
app:attributeName="radius"
app:customDimension="0dp" />
</Constraint>
</ConstraintSet>
</MotionScene>
Scene 2 - Part 1

@mikescamell
• Color
• Integer
• Float
• String
• Dimension
• Boolean
CustomAttribute
Scene 2 - Part 1

@mikescamell
<MotionScene>
...
<Layout… />
</Constraint>
</ConstraintSet>
...
</MotionScene>
Scene 2 - Part 1

@mikescamell
<MotionScene>
...
<Layout… />
<CustomAttribute
</Constraint>
</ConstraintSet>
...
</MotionScene>
Scene 2 - Part 1

@mikescamell
<MotionScene>
...
<Layout ... />
</Constraint>
</ConstraintSet>
</MotionScene>
Scene 2 - Part 1

@mikescamell
<MotionScene>
...
<Layout ... />
<CustomAttribute
</Constraint>
</ConstraintSet>
</MotionScene>
Scene 2 - Part 1

@mikescamell
<MotionScene>
...
<Layout
app:layout_constraintTop_toBottomOf="@id/bookSynopsisCard"
<Transform
app:rotationX="-55"
</Constraint>
</ConstraintSet>
...
</MotionScene>
Scene 2 - Part 2

@mikescamell
<MotionScene>
...
<Layout
app:layout_constraintTop_toBottomOf="@id/bookSynopsisCard"
<Transform
app:elevation="4dp"
app:rotationX="-55"
</Constraint>
</ConstraintSet>
...
</MotionScene>
Scene 2 - Part 2

@mikescamell
<MotionScene>
...
<Layout ... />
<Transform ... />
</Constraint>
</ConstraintSet>
...
</MotionScene>
Scene 2 - Part 2

@mikescamell
<MotionScene>
...
<Layout ... />
<Transform ... />
<CustomAttribute
app:attributeName="outlineSpotShadowColor"
app:customColorValue="@color/transparent" />
</Constraint>
</ConstraintSet>
...
</MotionScene>
Scene 2 - Part 2

@mikescamell
KEYATTRIBUTES
Scene 2 - Part 3

@mikescamell
<MotionScene>
<Transition ...>
<OnClick ... />
</Transition>
...
</MotionScene>
Scene 2 - Part 3

@mikescamell
<MotionScene>
<Transition ...>
<OnClick ... />
<KeyFrameSet>
<KeyAttribute
android:alpha="0"
app:target="@id/bookSynopsisTitle" />
<KeyAttribute
android:alpha="0"
app:target="@id/bookSynopsisText" />
</KeyFrameSet>
</Transition>
...
</MotionScene>
Scene 2 - Part 3

@mikescamell
<MotionScene>
...
<Constraint android:id="@+id/bookSynopsisTitle">
<PropertySet app:alpha="1" />
</Constraint>
<Constraint android:id="@+id/bookSynopsisText">
</Constraint>
...
</ConstraintSet>
...
</MotionScene>
Scene 2 - Part 3

@mikescamell
<MotionScene>
...
<Constraint android:id="@+id/bookSynopsisTitle">
</Constraint>
<Constraint android:id="@+id/bookSynopsisText">
</Constraint>
...
</ConstraintSet>
</MotionScene>
Scene 2 - Part 3

@mikescamell
<MotionScene>
<Transition ...>
<OnClick ... />
<KeyFrameSet>
<KeyAttribute
android:alpha="0"
app:target="@id/bookType" />
...
</KeyFrameSet>
</Transition>
...
</MotionScene>
Scene 2 - Part 4

@mikescamell
motionLayout.setTransitionListener(object : MotionLayout.TransitionListener {
override fun onTransitionTrigger(
motionLayout: MotionLayout, startId: Int, endId: Boolean, progress: Float
) {
}
override fun onTransitionStarted(
motionLayout: MotionLayout, startId: Int, endId: Int
) {
}
override fun onTransitionChange(
motionLayout: MotionLayout, startId: Int, endId: Int, progress: Float
) {
}
override fun onTransitionCompleted(motionLayout: MotionLayout, currentId: Int) {
}
})
Scene 2 - Part 4

@mikescamell
...
) {
}
...
})
Scene 2 - Part 4

@mikescamell
...
) {
val color =
ColorUtils.setAlphaComponent(Color.WHITE, calculateProgressAlpha(progress))
bottomRightAnimationForward ?.setColorFilter(color, PorterDuff.Mode.SRC_ATOP)
bottomRightAnimationReverse ?.setColorFilter(color, PorterDuff.Mode.SRC_ATOP)
}
...
})
Scene 2 - Part 4

@mikescamell
...
<Constraint android:id="@+id/favourite">
</Constraint>
<Constraint android:id="@+id/bookmark">
</Constraint>
<Constraint android:id="@+id/readButton">
</Constraint>
</ConstraintSet>
Scene 2 - Part 5

@mikescamell
<MotionScene>
<Transition ...>
<OnClick ... />
<KeyFrameSet>
...
<KeyAttribute
android:alpha="0"
app:target="@id/favourite" />
<KeyAttribute
android:alpha="0"
app:target="@id/bookmark" />
<KeyAttribute
android:alpha="0"
app:target="@id/readButton" />
</KeyFrameSet>
</Transition>
</MotionScene>
Scene 2 - Part 5

@mikescamell
<MotionLayout
android:id="@+id/root"
app:motionDebug="SHOW_PATH"
Scene 2 - Part 6

@mikescamell
<MotionLayout
android:id="@+id/root"
app:motionDebug="SHOW_PROGRESS"
Scene 2 - Part 6

Start Position
End Position
X
Y
1.0
1.0
Delta Relative

X
Y
1.0
1.0
End Position
Start Position
Parent Relative

X
Y
1.0
1.0
End Position
Start Position
Path Relative

Start Position
End Position
X
Y
1.0
1.0
2.0
Delta Relative

@mikescamell
<MotionScene>
<Transition ...>
<KeyFrameSet>
<KeyAttribute
android:alpha="0"
android:translationY="24dp"
app:target="@id/favourite" />
...
</KeyFrameSet>
</Transition>
...
</MotionScene>
Scene 2 - Part 6

@mikescamell
<MotionScene>
<Transition ...>
<KeyFrameSet>
<KeyAttribute
android:alpha="0"
app:target="@id/bookDetailScrollView" />
...
</KeyFrameSet>
</Transition>
...
</MotionScene>
Scene 2 - Part 7

@mikescamell
<MotionScene>
<Transition
android:id="@+id/startToMiddle"
app:constraintSetEnd="@+id/middle"
app:duration="1000">
<OnClick
app:clickAction="toggle"
app:target="@id/bookCover" />
<KeyFrameSet ... />
</Transition>
...
<ConstraintSet android:id="@+id/start" ... />
<ConstraintSet android:id="@+id/middle" ... />
<ConstraintSet android:id=“@+id/end" ... />
</MotionScene>
Combined Scene - Part 1,2,3

@mikescamell
<MotionScene>
...
<Transition
android:id="@+id/middleToEnd"
app:constraintSetEnd="@+id/end"
app:constraintSetStart="@+id/middle"
app:duration="1000">
<OnClick
app:clickAction="toggle"
app:target="@id/bookSynopsisCard" />
<KeyFrameSet ... />
</Transition>
<ConstraintSet android:id="@+id/start" ... />
<ConstraintSet android:id="@+id/middle" ... />
<ConstraintSet android:id=“@+id/end" ... />
</MotionScene>
Combined Scene - Part 1,2,3

@mikescamell
Considerations
• No GUI (in progress)
• Doesn’t work with RecyclerViews (likely in alpha04)
• It’s in alpha!
• Performance?
• Elevation shadow tweaking is only 28+
• Difficult to have multiple transitions using same target

@mikescamell
Considerations
• No GUI (in progress)
• Doesn’t work with RecyclerViews (coming soon )
• It’s in alpha!
• Performance?
• Elevation shadow tweaking is only 28+
• Difficult to have multiple transitions using same target

@mikescamell
Summary
• Start out simple
• Use an empty project
• Read the blog posts & ask questions! #motionlayout
• Take advantage of Apply Changes
• HAVE FUN!

@mikescamell
MWUHAHAHAHAHA
HAHAHAHAHAHAH
AHAHAHHAHAHAH
AHAHAHAHAHAHA
HAHAHAHAHAHAH
AHAHAHAHAHA!!!!!
L
O
L
O
L
O
L
O
L
O
L
O
L
O
L
@johnhoford

@mikescamell
THANK YOU!
Want to read the latest blog posts from Android Developers around
the world? Checkout:
androiddev.io
(please it’s costing me $5 a month)
Twitter: @mikescamell
Website: mikescamell.com
Podcast (on hiatus): androidsnacks.com
(Skip to the “funny” bits at the end)
Slides:

@mikescamell
Links
• Slides
- TODO
• Loco-MotionLayout Repo
- https://github.com/mikescamell/Loco-MotionLayout
• Nicolas Roard’s MotionLayout Series:
- https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d
- https://medium.com/google-developers/introduction-to-motionlayout-part-ii-a31acc084f59
- https://medium.com/google-developers/introduction-to-motionlayout-part-iii-47cd64d51a5
- https://medium.com/google-developers/deﬁning-motion-paths-in-motionlayout-6095b874d37
• Google Constraint/MotionLayout Example Repo
- https://github.com/googlesamples/android-ConstraintLayoutExamples

@mikescamell
Links
• MotionLayout Sunday 🎉 ™ (where the idea for this talk originated):
- https://twitter.com/MikeScamell/status/1071810532888457217
• ShapeShifter (Creating AnimatedVectorDrawables)
- https://shapeshifter.design/
• PorterDuff.Mode
- https://developer.android.com/reference/android/graphics/PorterDuff.Mode

@mikescamell
• TODO add more videos
• Check for todo slides

Do the Loco-MotionLayout: Building animations with MotionLayout

More Related Content

Similar to Do the Loco-MotionLayout: Building animations with MotionLayout (20)

Recently uploaded (20)

Do the Loco-MotionLayout: Building animations with MotionLayout