Slides of the talk about Motion Layout I gave at the GDG DevFest Milan 2018.

1. Boris D’Amato - DevFest Milano 2018
MOTIONLAYOUT
EASY ANIMATIONS FOR EVERYONE!

2. Boris D’Amato - DevFest Milano 2018
Perché MotionLayout ?
AnimatedVectorDrawable
Property Animation Framework
LayoutTransition
CoordinatorLayout

3. Boris D’Amato - DevFest Milano 2018
Perché MotionLayout ?
Sottoclasse del ConstraintLayout
Posizionamento View Animazioni complesse

4. Boris D’Amato - DevFest Milano 2018
Perché MotionLayout ?
PropertyAnimator LayoutTransition
CoordinatorLayout
MotionLayout

5. Boris D’Amato - DevFest Milano 2018
Perché MotionLayout ?
LAYOUT INIZIALE LAYOUT FINALE
Proprietà delle view
Touch / Swipe

6. Boris D’Amato - DevFest Milano 2018
Perché MotionLayout ?
- Interamente dichiarativo
La descrizione dell’animazione avviene interamente in un
singolo file XML
Tooling!
Vantaggio?

7. Boris D’Amato - DevFest Milano 2018
Perché MotionLayout ?
- minSdk API 14 (ICS) = 99.8%
Limitazioni?
è possibile animare solo il primo livello di View annidate

8. Boris D’Amato - DevFest Milano 2018
Quando usare il MotionLayout
Muovere, ridimensionare, animare elementi della UI con cui
l’utente interagirà.
L’animazione deve avere un senso.
Attenzione!!
No effetti speciali.

9. Boris D’Amato - DevFest Milano 2018
Utilizzare MotionLayout
androidx.constraintlayout:constraintlayout:2.0.0-alpha2

10. Boris D’Amato - DevFest Milano 2018

11. Boris D’Amato - DevFest Milano 2018
Struttura

12. Boris D’Amato - DevFest Milano 2018
Struttura
res/xml

13. ESEMPIO

16. Boris D’Amato - DevFest Milano 2018
res/layout/activity_main.xml
<androidx.constraintlayout.motion.widget.MotionLayout
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:id="@+id/motionLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/scene">
<View
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="0dp" />
</androidx.constraintlayout.motion.widget.MotionLayout>

17. Boris D’Amato - DevFest Milano 2018
xmlns:android="http://schemas.android.com/apk
xmlns:app="http://schemas.android.com/apk/res
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/motionLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/scene">
<View
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="0dp" />
</androidx.constraintlayout.motion.widget.MotionL

18. Boris D’Amato - DevFest Milano 2018
res/xml/scene.xml
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
</MotionScene>

19. Boris D’Amato - DevFest Milano 2018
res/xml/scene.xml
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
</MotionScene>

20. Boris D’Amato - DevFest Milano 2018
res/xml/scene.xml
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/button"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
</MotionScene>

21. Boris D’Amato - DevFest Milano 2018
res/xml/scene.xml
<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="100"
motion:interpolator="bounce">
<OnSwipe
motion:dragDirection="dragRight"
motion:maxAcceleration="100"
motion:touchAnchorId="@+id/button"
motion:touchAnchorSide="right" />
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint

22. Boris D’Amato - DevFest Milano 2018
res/xml/scene.xml
<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="100"
motion:interpolator="bounce">
<OnSwipe
motion:dragDirection="dragRight"
motion:maxAcceleration="100"
motion:touchAnchorId="@+id/button"
motion:touchAnchorSide="right" />
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"

23. CustomAttributes

26. Boris D’Amato - DevFest Milano 2018
res/xml/scene.xml
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/button"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf=“parent">
</Constraint>
</ConstraintSet>

27. Boris D’Amato - DevFest Milano 2018
res/xml/scene.xml
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf=“parent">t
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#d23c3b" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/button"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf=“parent">t
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#f6cc6a" />
</Constraint>
</ConstraintSet>

28. Boris D’Amato - DevFest Milano 2018
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf=“parent">t
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#d23c3b" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/button"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"

29. KEYFRAMES

30. KEYFRAMES

31. KEYFRAMES
START END
KeyFrame

32. <Transition ...>
<KeyFrameSet>
<KeyPosition
motion:keyPositionType="parentRelative"
motion:percentY="0.25"
motion:framePosition="50"
motion:target="@+id/button"/>
</KeyFrameSet>
</Transition>

33. <Transition ...>
<KeyFrameSet>
<KeyPosition
motion:keyPositionType="parentRelative"
motion:percentY="0.25"
motion:framePosition="50"
motion:target="@+id/button"/>
</KeyFrameSet>
</Transition>

34. Sistemi di coordinate

35. Sistemi di coordinate

36. Sistemi di coordinate

37. Sistemi di coordinate

39. class CollapsibleToolbar @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : MotionLayout(context, attrs, defStyleAttr),
AppBarLayout.OnOffsetChangedListener {
override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
progress = -verticalOffset / appBarLayout?.totalScrollRange?.toFloat()!!
}
override fun onAttachedToWindow() {
super.onAttachedToWindow()
(parent as? AppBarLayout)?.addOnOffsetChangedListener(this)
}
}

41. class DrawerContent @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : MotionLayout(context, attrs, defStyleAttr),
DrawerLayout.DrawerListener {
override fun onDrawerStateChanged(newState: Int) {}
override fun onDrawerSlide(drawerView: View, slideOffset: Float) {
progress = slideOffset
}
override fun onDrawerClosed(drawerView: View) {}
override fun onDrawerOpened(drawerView: View) {}
override fun onAttachedToWindow() {
super.onAttachedToWindow()
(parent as? DrawerLayout)?.addDrawerListener(this)
}
}

43. class ViewpagerHeader @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : MotionLayout(context, attrs, defStyleAttr),
ViewPager.OnPageChangeListener {
override fun onPageScrollStateChanged(state: Int) {}
override fun onPageScrolled(position: Int, positionOffset: Float,
positionOffsetPixels: Int) {
var numPages = 3
progress = (position + positionOffset) / (numPages - 1)
}
override fun onPageSelected(position: Int) {}
}

45. THANK YOU!
Join us on androiddevs.it
We’re hiring!
clearscore.com/careers
borisdamato@gmail.com