ConstraintLayout 2.0 / MotionLayout

ConstraintLayout 2.0 Let’s use the new things! Nicolas Roard @camaelon
John Hoford @johnhoford

Let’s use the new things! Nicolas Roard @camaelon John Hoford
@johnhoford MotionLayout

{ 360 | AnDev } 2018 ConstraintLayout 2.0

{ 360 | AnDev } 2018 ConstraintLayout 2.0 ★ Layout

★ Helpers

★ Helpers ★ Rendering

★ Helpers ★ Rendering ★ Live Resize

★ Helpers ★ Rendering ★ Live Resize ★ Motion

★ Helpers ★ Rendering ★ Live Resize ★ Motion ★ API

{ 360 | AnDev } 2018 MotionLayout

{ 360 | AnDev } 2018 MotionLayout ConstraintLayout ^

{ 360 | AnDev } 2018 MotionLayout: Why ★ Why
★ Audience ★ What can it do

{ 360 | AnDev } 2018 Animation Types Animated content
Transition Layouts Motion Property Animation

{ 360 | AnDev } 2018 Animation Types Animated content
Transition Layouts Motion Lottie, Kyrie, Animated Vector Drawable, GIFs, etc. TransitionManager CoordinatorLayout Property Animation Property animation framework (code)

{ 360 | AnDev } 2018 MotionLayout Animated content Transition
Layouts Motion Lottie, Kyrie, Animated Vector Drawable, GIFs, etc. TransitionManager CoordinatorLayout Property Animation Property animation framework (code)

{ 360 | AnDev } 2018 It’s Declarative

{ 360 | AnDev } 2018 Declarative Approach ★ Better
& Easier model ★ We can build tooling

{ 360 | AnDev } 2018 Key Concepts ★ Transition
★ Events ★ Keyframes ★ Motion

{ 360 | AnDev } 2018 Transitions

{ 360 | AnDev } 2018 ConstraintSet ★ Encapsulate all
the rules for a layout ★ You can apply ConstraintSet to an existing layout ★ You can switch between multiple ConstraintSets ★ With TransitionManager, basic animation capabilities

{ 360 | AnDev } 2018 Start End Seekable Transition
Start ConstraintSet End ConstraintSet Interpolation

{ 360 | AnDev } 2018

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motionLayout" app:layoutDescription=“@xml/scene" android:layout_width="match_parent"
android:layout_height="match_parent"> <View android:id="@+id/button" android:background="@color/colorAccent" android:layout_width="64dp" android:layout_height="64dp"/> </android.support.constraint.motion.MotionLayout>

<?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">
</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" />

motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </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" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp"

android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button"
android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motionLayout" app:layoutDescription=“@xml/scene" android:layout_width="match_parent"
android:layout_height="match_parent"> <View android:id="@+id/button" android:background="@color/colorAccent" android:layout_width="64dp" android:layout_height="64dp"/> </android.support.constraint.motion.MotionLayout>

android:layout_height="match_parent"> <View android:id="@+id/button" android:background="@color/colorAccent" android:layout_width="64dp" android:layout_height=“64dp"/> </android.support.constraint.motion.MotionLayout>

android:layout_height="match_parent"> <View android:id="@+id/button" android:background="@color/colorAccent" android:layout_width="64dp" android:layout_height=“64dp"/> </android.support.constraint.motion.MotionLayout> <Button android:id=“@+id/run" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginEnd="8dp" android:text="Run" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" />

class BasicTransitionActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) setContentView(R.layout.motion) run.setOnClickListener { motionLayout.transitionToEnd() } } }

{ 360 | AnDev } 2018

</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" />

</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"

</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" <OnClick motion:target=“@id/run"/>

xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button"
android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp"

xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button"
android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/button" motion:touchAnchorSide="right" />

{ 360 | AnDev } 2018

{ 360 | AnDev } 2018 MotionLayout XML attributes ★
app:layoutDescription=”reference” ★ app:applyMotionScene=”boolean” [ default = true ] ★ app:showPaths=”boolean” [ default = false] ★ app:progress=”ﬂoat” ★ app:currentState=”reference”

{ 360 | AnDev } 2018 Interpolated Attributes ★ Position,
Dimensions ★ Visibility & Alpha ★ Translation, Rotation, Scale, Elevation ★ Custom attributes

{ 360 | AnDev } 2018 Custom Attributes ★ Extension
to ConstraintSet ★ Deﬁne values for any attribute ★ Specify the type ★ Specify the setter name string color integer ﬂoat dimension boolean

{ 360 | AnDev } 2018 Utilities

{ 360 | AnDev } 2018 Utilities ★ MockView

{ 360 | AnDev } 2018 Utilities ★ MockView ★
ImageFilterView : Contrast, Saturation, Warmth, Crossfade

{ 360 | AnDev } 2018

<android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motionLayout" app:layoutDescription="@xml/scene_04" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.constraint.utils.ImageFilterView android:id="@+id/image" android:background="@color/colorAccent"
android:src="@drawable/roard" app:altSrc="@drawable/hoford" android:layout_width="64dp" android:layout_height="64dp"/> </android.support.constraint.motion.MotionLayout>

<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"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/image"
motion:touchAnchorSide="right" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/image" android:layout_width="100dp" android:layout_height="100dp" android:layout_marginStart="8dp"

motion:touchAnchorSide="right" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/image" android:layout_width="100dp" android:layout_height="100dp" android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="Crossfade" motion:customFloatValue="0" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint

</Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/image" android:layout_width="100dp" android:layout_height="100dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="Crossfade" motion:customFloatValue="1" /> </Constraint> </ConstraintSet> </MotionScene>

{ 360 | AnDev } 2018 Transition API ★ transitionToEnd()
★ transitionToStart() ★ transitionToState(int state) ★ setProgress(ﬂoat value) [0 .. 1]

{ 360 | AnDev } 2018 Events

{ 360 | AnDev } 2018 Events ★ TransitionListener ★
OnClick ★ OnSwipe

{ 360 | AnDev } 2018 TransitionListener

public interface TransitionListener { void onTransitionChange(MotionLayout motionLayout, int startId, int
endId, float progress); void onTransitionCompleted(MotionLayout motionLayout, int currentId); }

{ 360 | AnDev } 2018 OnSwipe

dragDirection dragUp dragDown dragRight dragLeft touchAnchorId touchAnchorSide top bottom left
right

OnSwipe <OnSwipe motion:dragDirection="dragUp" motion:touchAnchorId="@+id/widget" motion:touchAnchorSide=“top" /> Create your animation OnSwipe
“plays” it

OnSwipe: Top touchAnchorSide : TOP

OnSwipe: Right touchAnchorSide : RIGHT

OnSwipe: Bottom touchAnchorSide : BOTTOM

OnSwipe: Left touchAnchorSide : LEFT

Touch Up / Release Takes in account velocity Choose a
continuous velocity curve to reach the endpoints with a velocity of zero

{ 360 | AnDev } 2018 OnClick

<OnClick motion:target="@+id/run" /> mode • transitionToEnd • toggle • transitionToStart
• jumpToEnd • jumpToStart OnClick

{ 360 | AnDev } 2018 Keyframes

{ 360 | AnDev } 2018 Keyframe a rendez-vous in
time

{ 360 | AnDev } 2018 Keyframes ★ Position ★
Attributes ★ Cycles ★ …and more

{ 360 | AnDev } 2018 Position

KeyFrameSet <KeyFrameSet> </KeyFrameSet>

KeyFrameSet <KeyFrameSet> <KeyPosition motion:target="@+id/widget" motion:framePosition="50" motion:percentX=“1.0” /> </KeyFrameSet>

KeyFrameSet <KeyFrameSet> <KeyPosition motion:target="@+id/widget" motion:framePosition="50" motion:percentX=“1.0” motion:sizePercent=“0.0" /> </KeyFrameSet>

KeyFrameSet <KeyFrameSet> <KeyPosition motion:target="@+id/widget" motion:framePosition="50" motion:percentX=“1.0” motion:percentY=“0.3” motion:sizePercent=“0.0" /> </KeyFrameSet>

{ 360 | AnDev } 2018 Coordinate Systems

{ 360 | AnDev } 2018

{ 360 | AnDev } 2018 Start End

{ 360 | AnDev } 2018 parentRelative 0 X Y

{ 360 | AnDev } 2018 deltaRelative Y X

{ 360 | AnDev } 2018 pathRelative X Y

{ 360 | AnDev } 2018 Attributes

KeyFrameSet <KeyFrameSet> <KeyPosition… /> <KeyAttributes motion:target="@+id/widget" motion:framePosition="25" android:rotation=“45” /> </KeyFrameSet>

KeyFrameSet <KeyFrameSet> <KeyPosition… /> <KeyAttributes motion:target="@+id/widget" motion:framePosition="25" android:rotation=“45”/> <KeyAttributes motion:target="@+id/widget"
motion:framePosition="50" android:rotation=“0”/> </KeyFrameSet>

KeyAttributes support motion:transitionEasing motion:curveFit android:visibility android:alpha android:elevation android:rotation android:rotationX android:rotationY
android:scaleX android:scaleY android:translationX android:translationY android:translationZ motion:transitionPathRotate motion:progress + Custom Attributes <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#D81B60"/>

{ 360 | AnDev } 2018 Cycles

KeyCycle <KeyFrameSet> <KeyPosition…/> <KeyAttributes…/> <KeyAttributes…/> <KeyCycle motion:target="@+id/widget" motion:framePosition="0" motion:wavePeriod=“0” motion:translationX=“0.0"
/> <KeyCycle motion:target="@+id/widget" motion:framePosition="50" motion:wavePeriod=“50” motion:translationX=“30dp" /> </KeyFrameSet>

{ 360 | AnDev } 2018 Code KeyCycle Value (attributes)

{ 360 | AnDev } 2018 Code KeyCycle Period

KeyCycle <KeyFrameSet> <KeyPosition…/> <KeyAttributes…/> <KeyAttributes…/> <KeyCycle motion:target="@+id/widget" motion:framePosition="0" motion:wavePeriod=“0” motion:translationX=“0.0"
/> <KeyCycle motion:target="@+id/widget" motion:framePosition="50" motion:wavePeriod=“50” motion:translationX=“30dp" /> </KeyFrameSet>

{ 360 | AnDev } 2018 Motion

{ 360 | AnDev } 2018 Motion ★ CoordinatorLayout ★
DrawerLayout ★ ViewPager ★ MotionLayout

{ 360 | AnDev } 2018 motion:progress

{ 360 | AnDev } 2018 Collapsible Toolbar (CoordinatorLayout)

{ 360 | AnDev } 2018

{ 360 | AnDev } 2018 Create CollapsibleToolbar 0

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) } }

{ 360 | AnDev } 2018 Replace CollapsingToolbarLayout 1

<android.support.design.widget.CoordinatorLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="false" android:background="@color/contentBackground"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height">
<android.support.design.widget.CollapsingToolbarLayout … /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_scrolling" /> </android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.CoordinatorLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="false" android:background="@color/contentBackground"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height">
<CollapsibleToolbar … /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_scrolling" /> </android.support.design.widget.CoordinatorLayout>

{ 360 | AnDev } 2018 Create a layout for
the header 2

<?xml version="1.0" encoding="utf-8"?> <com.google.androidstudio.motionlayoutexample.utils.CollapsibleToolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/motionLayout" app:layoutDescription="@xml/scene_09" android:layout_width="match_parent"
android:layout_height="match_parent" android:minHeight="50dp" android:fitsSystemWindows="false" app:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed"> <ImageView android:id="@+id/background" android:layout_width="match_parent" android:layout_height="200dp" android:background="@color/colorAccent" android:scaleType="centerCrop"

{ 360 | AnDev } 2018 Create a MotionScene 3

<?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" />
<ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/background" android:layout_width="match_parent" android:layout_height="match_parent" android:alpha="1.0" motion:layout_constraintBottom_toBottomOf="parent"/> <Constraint android:id="@+id/label" android:layout_width="wrap_content"

<ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/background" android:layout_width="match_parent" android:layout_height="match_parent" android:alpha="1.0" motion:layout_constraintBottom_toBottomOf="parent"/> <Constraint android:id="@+id/label"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:rotation="-90.0" motion:layout_constraintBottom_toBottomOf="@+id/background" motion:layout_constraintStart_toStartOf="parent"/> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/background"

{ 360 | AnDev } 2018 DrawerLayout

{ 360 | AnDev } 2018

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) } }

{ 360 | AnDev } 2018 ViewPager

{ 360 | AnDev } 2018

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) {} }

{ 360 | AnDev } 2018 MotionLayout

{ 360 | AnDev } 2018

<android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" app:layoutDescription="@xml/scene_19"> <include layout="@layout/motion_19_coordination_header" /> <include
layout="@layout/content_scrolling" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_add_a_photo_24dp"/> </android.support.constraint.motion.MotionLayout>

<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="250" motion:interpolator="linear"> <OnSwipe motion:touchAnchorId="@+id/motionLayout"
motion:touchAnchorSide="bottom" motion:dragDirection="dragUp" /> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/motionLayout" android:layout_width="match_parent" android:layout_height="200dp"

motion:touchAnchorSide="bottom" motion:dragDirection="dragUp" /> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/motionLayout" android:layout_width="match_parent" android:layout_height="200dp" motion:layout_constraintTop_toTopOf="parent"
/> <Constraint android:id="@id/scrollable" android:layout_width="match_parent" android:layout_height="0dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintTop_toBottomOf="@+id/motionLayout" /> <Constraint android:id="@id/fab" android:layout_width="wrap_content"

<ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/motionLayout" android:layout_width="match_parent" android:layout_height="56dp" motion:layout_constraintTop_toTopOf="parent" motion:progress="1" /> <Constraint
android:id="@id/scrollable" android:layout_width="match_parent" android:layout_height="0dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintTop_toBottomOf="@+id/motionLayout" /> <Constraint android:id="@id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content"

{ 360 | AnDev } 2018

{ 360 | AnDev } 2018 Documentation ★ Online Documentation:
https://developer.android.com/reference/android/ support/constraint/motion/package-summary ★ Medium Articles: ★ Introduction to MotionLayout - Part I : http://bit.ly/2O4AmIz ★ Introduction to MotionLayout - Part II : http://bit.ly/2uPuWbw ★ Introduction to MotionLayout - Part III : http://bit.ly/2zRjCSj ★ https://github.com/googlesamples/android-ConstraintLayoutExamples

Thanks! Nicolas Roard @camaelon John Hoford @johnhoford

ConstraintLayout 2.0 / MotionLayout

ConstraintLayout 2.0 / MotionLayout

More Decks by Nicolas Roard

Other Decks in Programming

Featured

Transcript