Make your app dance with MotionLayout

1. Make your app dance with MotionLayout
LINE TV
Timmy
Android Taipei 20181129

2. What is MotionLayout
● Is new layout manage motion and widget animation in application
● ConstraintLayout subclass
● A mix between the property animation framework, layout transitions with
TransitionManager, and CoordinatorLayout.
● Fully declarative

3. Preview Tool

5. <android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

6. <android.support.constraint.motion.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutDescription="@xml/...">

8. activity_drama_page.xml
<android.support.v4.widget.SwipeRefreshLayout>
<android.support.constraint.motion.MotionLayout
app:layoutDescription="@xml/drama_page">
// All Child View
<View ... />
<TextView ... />
</android.support.constraint.motion.MotionLayout>
</android.support.v4.widget.SwipeRefreshLayout>

9. title bar
tab
ec_list

10. Case 1
<Transition
app:constraintSetEnd="@id/collapsed"
app:constraintSetStart="@id/expanded"
app:duration="300">
<OnSwipe
app:dragDirection="dragUp"
app:touchAnchorId="@id/tabs"
app:touchAnchorSide="top"/>
</Transition>

11. Case 1
<ConstraintSet
android:id="@+id/expanded">
<Constraint
android:id="@id/bar">
<CustomAttribute
app:attributeName="backgroundColor"
app:customColorValue="#00000000"/>
</Constraint>
<Constraint
android:id="@id/title"
android:alpha="0"/>
<Constraint
android:id="@id/tabs"
app:layout_constraintTop_toBottomOf="@+id/ec_list"/>
</ConstraintSet>

12. Case 1
<ConstraintSet
android:id="@+id/collapsed">
<Constraint
android:id="@id/bar">
<CustomAttribute
app:attributeName="backgroundColor"
app:customColorValue="#FFFFFFFF"/>
</Constraint>
<Constraint
android:id="@id/title"
android:alpha="1"/>
<Constraint
android:id="@id/tabs"
app:layout_constraintTop_toBottomOf="@+id/bar"/>
</ConstraintSet>

13. favorite
poster

14. Case 2
<ConstraintSet
android:id="@+id/expanded">
<Constraint
android:id="@id/poster"
app:layout_constraintTop_toTopOf="parent"/>
<Constraint
android:id="@id/favorite"
android:visibility="visible"/>
</ConstraintSet>

15. Case 2
<ConstraintSet
android:id="@+id/collapsed">
<Constraint
android:id="@id/poster"
app:layout_constraintBottom_toTopOf="parent"/>
<Constraint
android:id="@id/favorite"
android:visibility="invisible"/>
</ConstraintSet>

16. bar
back media_route_button
title
poster_vertical
poster_guideline

17. Case 3
<ConstraintSet
android:id="@+id/expanded">
<Constraint
android:id="@id/title"
app:layout_constraintStart_toEndOf="@+id/poster_vertical"
app:layout_constraintTop_toBottomOf="@+id/poster_guideline"/>
</ConstraintSet>

18. Case 3
<ConstraintSet
android:id="@+id/collapsed">
<Constraint
app:layout_constraintBottom_toBottomOf="@+id/bar"
app:layout_constraintEnd_toStartOf="@+id/media_route_button"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="@+id/back"
app:layout_constraintTop_toTopOf="@+id/bar"/>
</ConstraintSet>

19. <Transition
<OnSwipe ... />
<KeyFrameSet>
<KeyPosition
app:framePosition="50"
app:keyPositionType="deltaRelative"
app:percentX="0.1"
app:percentY="0.9"
app:target="@id/drama_info_bar_title"/>
</KeyFrameSet>
</Transition>

20. Summary
● In alpha
● Scroll nesting scroll
● Reduce layout hierarchy
● Keep in mind that adding motion in your application should be meaningful;
don’t over do it!

21. Reference
https://github.com/googlesamples/android-ConstraintLayoutExamples
https://developer.android.com/reference/android/support/constraint/motion/Motion
Layout
https://medium.com/google-developers/introduction-to-motionlayout-part-i-
29208674b10d
https://www.youtube.com/watch?v=ytZteMo4ETk&feature=youtu.be&t=28m45s

22. Q & A