MotionLayout & RecyclerView

One of the first and easiest things we do as Android Developers is rendering a list of items. Commonly, one of the hardest things we do next is trying to animate items in that list in a variety of ways.

Ever since Hoford & Roard showcased the possibility of animating a RecyclerView with MotionLayout a lot of people have wondered how to actually implement it. I'll be showcasing how my work has evolved in the past year in this specific vein, the issues I encountered, and new routes forward.

Transcript

1. MotionLayout & RecyclerView November 17th, 2020 @kaeawc Jason Pearson Principal Android Engineer @ Hinge
2. Journey
3. Journey
6. Widgets
7. Widgets
8. Widgets
9. Widgets
10. Widgets
11. 0 20 40 60 80 100 ➟ Transition Motion Layout 2020 2018
12. 0 20 40 60 80 100 ➟ Transition Motion Layout 2020 2018 Two Years Ago...
13. CoordinatorLayout + RecyclerView Complicated Layout Cancel SEND LIKE Saul Add a comment
14. CoordinatorLayout + RecyclerView Complicated Layout Cancel SEND LIKE Saul Add a comment
15. Cancel SEND LIKE Saul Add a comment Shared Element Exclusions, Delays, TransitionManager
16. Hacky + Limited
17. Hacky + Limited Need to Animate Even More
18. So... what to do?
19. Conventional wisdom said we're animating too much
20. Is Android just not good enough?
21. Existential doubt
22. MotionLayout
25. Coordination Gesture Support Interruptible Scrolling Support Ticked All the Boxes ✅ ✅ ✅ ✅
26. So how do I build this?
27. First let's look at requirements
28. Configuration Changes Widgets
29. Configuration Changes Widgets
30. Configuration Changes Widgets
31. Widgets Configuration Changes
32. Widgets Configuration Changes Typing something interesting
33. Widgets Flinging The user needs to be able to not just swipe from one item to the next, but fling through several items.
34. Flinging The user needs to be able to not just swipe from one item to the next, but fling through several items.
35. Scroll Position
36. Scroll Position This introduces cases where the ViewHolder in question is partially off screen.
37. Scroll Position This introduces cases where the ViewHolder in question is partially off screen.
38. Scroll Position This introduces cases where the ViewHolder in question is partially off screen.
39. Scroll Position This introduces cases where the ViewHolder in question is partially off screen.
40. Heterogeneous
41. Heterogeneous Not every ViewHolder is the same size or type of content. Some are only text, some are images and some are streaming video.
42. Solutions
43. Evolving Approaches
44. Evolving Approaches
45. Create placeholder by hand Evolving Approaches
46. <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout> <ImageView/> </androidx.constraintlayout.widget.ConstraintLayout> widget_photo_item.xml
47. <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout> <TextView/> <TextView/> </androidx.constraintlayout.widget.ConstraintLayout> widget_text_item.xml
48. <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> </FrameLayout> activity_main.xml Component Tree
49. FrameLayout <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> </FrameLayout> activity_main.xml Component Tree
50. <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/widgetList" android:layout_width="match_parent" android:layout_height="match_parent" tools:listitem="@layout/widget_photo_item" /> </FrameLayout> activity_main.xml FrameLayout widgetList Component Tree
51. android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/widgetList" android:layout_width="match_parent" android:layout_height="match_parent" tools:listitem="@layout/widget_photo_item" /> </FrameLayout> activity_main.xml FrameLayout widgetList Component Tree
52. android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/widgetList" android:layout_width="match_parent" android:layout_height="match_parent" tools:listitem="@layout/widget_photo_item" /> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" > </androidx.constraintlayout.widget.ConstraintLayout> </FrameLayout> activity_main.xml FrameLayout widgetList ConstraintLayout Component Tree
53. android:layout_height="match_parent" tools:listitem="@layout/widget_photo_item" /> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" > </androidx.constraintlayout.widget.ConstraintLayout> </FrameLayout> activity_main.xml FrameLayout widgetList ConstraintLayout Component Tree
54. android:layout_height="match_parent" tools:listitem="@layout/widget_photo_item" /> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" > <View android:id="@+id/overlay" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/overlayOnSurface" /> </androidx.constraintlayout.widget.ConstraintLayout> </FrameLayout> activity_main.xml FrameLayout widgetList ConstraintLayout overlay Component Tree
55. android:background="@color/overlayOnSurface" /> <include android:id="@+id/photoPlaceholder" layout="@layout/widget_photo_item" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> </FrameLayout> activity_main.xml FrameLayout widgetList ConstraintLayout overlay photoPlaceholder Component Tree
56. android:background="@color/overlayOnSurface" /> <include android:id="@+id/photoPlaceholder" layout="@layout/widget_photo_item" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> <include android:id="@+id/textPlaceholder" layout="@layout/widget_text_item" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> </FrameLayout> activity_main.xml FrameLayout widgetList ConstraintLayout overlay photoPlaceholder textPlaceholder Component Tree
57. android:layout_height="match_parent" tools:listitem="@layout/widget_photo_item" /> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" > <View android:id="@+id/overlay" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/overlayOnSurface" /> <include android:id="@+id/photoPlaceholder" layout="@layout/widget_photo_item" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> <include activity_main.xml Component Tree FrameLayout widgetList ConstraintLayout overlay photoPlaceholder textPlaceholder
58. android:layout_height="match_parent" tools:listitem="@layout/widget_photo_item" /> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" > <View android:id="@+id/overlay" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/overlayOnSurface" /> <include android:id="@+id/photoPlaceholder" layout="@layout/widget_photo_item" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> <include activity_main.xml Component Tree FrameLayout widgetList ConstraintLayout overlay photoPlaceholder textPlaceholder
59. android:layout_height="match_parent" tools:listitem="@layout/widget_photo_item" /> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" > <View android:id="@+id/overlay" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/overlayOnSurface" /> <include android:id="@+id/photoPlaceholder" layout="@layout/widget_photo_item" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> <include activity_main.xml Component Tree FrameLayout widgetList ConstraintLayout overlay photoPlaceholder textPlaceholder
60. android:layout_height="match_parent" tools:listitem="@layout/widget_photo_item" /> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" > <View android:id="@+id/overlay" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/overlayOnSurface" /> <include android:id="@+id/photoPlaceholder" layout="@layout/widget_photo_item" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> <include activity_main.xml Component Tree FrameLayout widgetList ConstraintLayout overlay photoPlaceholder textPlaceholder
61. <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" > <View android:id="@+id/overlay" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/overlayOnSurface" /> <include android:id="@+id/photoPlaceholder" layout="@layout/widget_photo_item" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> activity_main.xml Component Tree FrameLayout widgetList ConstraintLayout overlay photoPlaceholder textPlaceholder
62. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/activity_main_xml_constraintlayout_scene" > <View android:id="@+id/overlay" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/overlayOnSurface" /> <include android:id="@+id/photoPlaceholder" layout="@layout/widget_photo_item" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> activity_main.xml Component Tree FrameLayout widgetList overlay photoPlaceholder textPlaceholder constraintLayout
63. activity_main.xml <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/activity_main_xml_constraintlayout_scene" > <View android:id="@+id/overlay" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/overlayOnSurface" /> <include android:id="@+id/photoPlaceholder" layout="@layout/widget_photo_item" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" />
64. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/activity_main_xml_constraintlayout_scene" > activity_main.xml
65. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/activity_main_xml_constraintlayout_scene" > activity_main.xml
66. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/activity_main_xml_constraintlayout_scene" > activity_main.xml
67. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/activity_main_xml_constraintlayout_scene" > activity_main.xml
68. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/activity_main_xml_constraintlayout_scene" > activity_main.xml
69. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/constraintLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/activity_main_xml_constraintlayout_scene" > activity_main.xml
70. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/activity_main_xml_constraintlayout_scene" > activity_main.xml
71. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/main_scene" > activity_main.xml
72. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/main_scene" > activity_main.xml
73. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@id/end" motion:constraintSetStart="@id/start" motion:duration="1000" > <KeyFrameSet> </KeyFrameSet> </Transition> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> main_scene.xml
74. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@id/end" motion:constraintSetStart="@id/start" motion:duration="1000" /> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene> main_scene.xml
75. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/end" motion:duration="1000" /> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene> main_scene.xml
76. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" app:duration="1000" /> <ConstraintSet android:id="@+id/start"> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene> main_scene.xml
77. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <Transition app:constraintSetStart="@id/list" app:constraintSetEnd="@id/detail" app:duration="1000" /> <ConstraintSet android:id="@+id/list"> </ConstraintSet> <ConstraintSet android:id="@+id/detail"> </ConstraintSet> </MotionScene> main_scene.xml
78. <ConstraintSet android:id="@+id/list"> </ConstraintSet> <ConstraintSet android:id="@+id/detail"> </ConstraintSet> </MotionScene> main_scene.xml
79. <ConstraintSet android:id="@+id/list"> </ConstraintSet> <ConstraintSet android:id="@+id/detail"> <Constraint android:id="@id/photoPlaceholder"> <Layout android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintVertical_bias="0.35" /> <Transform android:scaleX="0.9" android:scaleY="0.9" /> <PropertySet app:visibilityMode="ignore" /> </Constraint> <Constraint android:id="@id/textPlaceholder" .../> </ConstraintSet> </MotionScene> main_scene.xml
80. <ConstraintSet android:id="@+id/list"> </ConstraintSet> <ConstraintSet android:id="@+id/detail"> <Constraint android:id="@id/photoPlaceholder"> <Layout android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintVertical_bias="0.35" /> <Transform android:scaleX="0.9" android:scaleY="0.9" /> <PropertySet app:visibilityMode="ignore" /> </Constraint> <Constraint android:id="@id/textPlaceholder" .../> </ConstraintSet> </MotionScene> main_scene.xml
81. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/main_scene" > main_scene.xml activity_main.xml
82. Motion Layout end start activity_main.xml main_scene.xml
83. 0 20 40 60 80 100 ➟ Transition Motion Layout end start activity_main.xml main_scene.xml
84. 0 20 40 60 80 100 ➟ Transition Motion Layout end start activity_main.xml main_scene.xml
85. Motion Layout activity_main.xml end start main_scene.xml
86. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="true" android:focusable="true" app:layoutDescription="@xml/main_scene" > activity_main.xml android:visibility="gone" > main_scene.xml
87. class MainActivity : AppCompatActivity(R.layout.activity_main) { private val ui: ActivityMainBinding by lazy { ... } private var clicks = Channel<Int>(1) private var placeholderSource: ViewBinding? = null override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val view = ui.root setContentView(view) ui.widgetList.adapter = WidgetAdapter(clicks) } override fun onResume() { super.onResume() MainActivity.kt
88. private var clicks = Channel<Int>(1) private var placeholderSource: ViewBinding? = null override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val view = ui.root setContentView(view) ui.widgetList.adapter = WidgetAdapter(clicks) } override fun onResume() { super.onResume() clicks.consumeAsFlow() .onEach { onWidgetTapped(getWidgetViewHolder(it)) } .launchIn(lifecycleScope) } private fun getWidgetViewHolder(position: Int): MainActivity.kt
89. ui.widgetList.adapter = WidgetAdapter(clicks) } override fun onResume() { super.onResume() clicks.consumeAsFlow() .onEach { onWidgetTapped(getWidgetViewHolder(it)) } .launchIn(lifecycleScope) } private fun getWidgetViewHolder(position: Int): WidgetViewHolder<*>? { return ui.widgetList.activeViewHolders(onlyVisible = true) .filterIsInstance<WidgetViewHolder<*>>() .firstOrNull { it.adapterPosition == position } } private fun onWidgetTapped(viewHolder: WidgetViewHolder<*>?) { if (viewHolder == null) return MainActivity.kt
90. .firstOrNull { it.adapterPosition == position } } private fun onWidgetTapped(viewHolder: WidgetViewHolder<*>?) { if (viewHolder == null) return val placeholder = when (viewHolder) { is WidgetPhotoViewHolder -> { ui.textPlaceholder.root.isVisible = false ui.photoPlaceholder } is WidgetTextViewHolder -> { ui.photoPlaceholder.root.isVisible = false ui.textPlaceholder } else -> return } ui.motionLayout.enterPlaceholder( MainActivity.kt
91. } else -> return } ui.motionLayout.enterPlaceholder( listView = ui.widgetList, source = viewHolder.binding, placeholder = placeholder, startState = R.id.list, endState = R.id.detail) placeholderSource = viewHolder.binding } override fun onBackPressed() { val source = placeholderSource if (source != null) { ui.motionLayout.exitPlaceholder(source) { placeholderSource = null } MainActivity.kt
92. placeholderSource = viewHolder.binding } override fun onBackPressed() { val source = placeholderSource if (source != null) { ui.motionLayout.exitPlaceholder(source) { placeholderSource = null } ui.motionLayout.transitionToState(R.id.list) } else { super.onBackPressed() } } } MainActivity.kt
93. fun <T : ViewBinding> MotionLayout.enterPlaceholder( listView: View, source: T, placeholder: T, startState: Int, endState: Int, completion: () -> Unit = {}) { // Create Bitmap from source Canvas // TODO: Very inefficient, please fix placeholder.applyBindingToPlaceholder(source) // Updates starting state with constraints that match the source val profileState = calculatePlaceholderConstraints(placeholder.root.id, source, listView) updateState(startState, profileState) setTransition(startState, endState) isVisible = true placeholder.root.isVisible = true MotionExtensions.kt MainActivity.kt
94. startState: Int, endState: Int, completion: () -> Unit = {}) { // Create Bitmap from source Canvas // TODO: Very inefficient, please fix placeholder.applyBindingToPlaceholder(source) // Updates starting state with constraints that match the source val profileState = calculatePlaceholderConstraints(placeholder.root.id, source, listView) updateState(startState, profileState) setTransition(startState, endState) isVisible = true placeholder.root.isVisible = true after(completion) transitionToEnd() source.root.alpha = 0f } MotionExtensions.kt MainActivity.kt
95. // Create Bitmap from source Canvas // TODO: Very inefficient, please fix placeholder.applyBindingToPlaceholder(source) // Updates starting state with constraints that match the source val profileState = calculatePlaceholderConstraints(placeholder.root.id, source, listView) updateState(startState, profileState) setTransition(startState, endState) isVisible = true placeholder.root.isVisible = true after(completion) transitionToEnd() source.root.alpha = 0f } MotionExtensions.kt MainActivity.kt
96. Assessment
97. ✅ No delay to transition Assessment
98. Assessment
99. // Create Bitmap from source Canvas // TODO: Very inefficient, please fix placeholder.applyBindingToPlaceholder(source) Assessment
100. Use RecyclerView internals to detach and use ViewHolders in MotionLayout temporarily Next Idea...
101. LayoutManager detaching views ✅ No delay to transition ✅ Reusable ✅ Efficient
102. LayoutManager detaching views ✅ No delay to transition ✅ Reusable ✅ Efficient ❌ Probably can't work with Exoplayer ❌ RecyclerView dependency
103. Use MotionLayout internals for attribute copying Next Idea
104. fun <T : ViewBinding> MotionLayout.enterPlaceholder( listView: View, source: T, placeholder: T, startState: Int, endState: Int, completion: () -> Unit = {}) { // Create Bitmap from source Canvas // TODO: Very inefficient, please fix placeholder.applyBindingToPlaceholder(source) // Updates starting state with constraints that match the source val profileState = calculatePlaceholderConstraints(placeholder.root.id, source, listView) updateState(startState, profileState) setTransition(startState, endState) isVisible = true placeholder.root.isVisible = true MotionExtensions.kt
105. source: T, placeholder: T, startState: Int, endState: Int, completion: () -> Unit = {}) { // Create Bitmap from source Canvas // TODO: Very inefficient, please fix placeholder.applyBindingToPlaceholder(source) // Updates starting state with constraints that match the source val profileState = calculatePlaceholderConstraints(placeholder.root.id, source, listView) updateState(startState, profileState) setTransition(startState, endState) isVisible = true placeholder.root.isVisible = true MotionExtensions.kt
106. source: T, placeholder: T, startState: Int, endState: Int, completion: () -> Unit = {}) { // Copy attributes from source placeholder.applyBindingToPlaceholder(source) // Updates starting state with constraints that match the source val profileState = calculatePlaceholderConstraints(placeholder.root.id, source, listView) updateState(startState, profileState) setTransition(startState, endState) isVisible = true placeholder.root.isVisible = true after(completion) MotionExtensions.kt
111. Assessment
112. Assessment ✅ No delay to transition ✅ Robust ✅ Reusable Efficient?
113. Motion Layout Assessment ✅ No delay to transition ✅ Robust ✅ Reusable Efficient?
114. Motion Layout Assessment ✅ No delay to transition ✅ Robust ✅ Reusable ✅ Efficient enough for now
115. Motion Layout
116. Motion Layout
117. Motion Layout
118. Motion Layout grind
119. Motion Layout grind
120. Motion Layout grind
121. Motion Layout grind
122. Motion Layout grind
123. Motion Layout grind
124. Motion Layout grind
125. Motion Layout fun grind
126. Motion Layout fun grind
127. Questions? @kaeawc Slides will be posted: https://bit.ly/2Uxq4VU
128. http://bit.ly/dcsf19-adv-motionlayout Questions? @kaeawc