Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Copenhagen Android meetup

Copenhagen Android meetup

ConstraintLayout & Animation

Nicolas Roard

November 15, 2017
Tweet

More Decks by Nicolas Roard

Other Decks in Programming

Transcript

  1. ConstraintLayout
    &
    Advanced Animations
    Nicolas Roard
    @camaelon
    John Hoford
    @johnhoford

    View Slide

  2. Overview

    View Slide

  3. Android Studio

    View Slide

  4. ConstraintLayout

    View Slide

  5. Where are we now

    View Slide

  6. Where are we now
    Android Studio 3.0 just shipped!

    View Slide

  7. Where are we now
    Android Studio 3.0 just shipped!
    ConstraintLayout 1.0.2 stable

    View Slide

  8. Where are we now
    Android Studio 3.0 just shipped!
    ConstraintLayout 1.0.2 stable
    ConstraintLayout 1.1 beta 3

    View Slide

  9. ConstraintLayout

    View Slide

  10. 1.0
    Relative positioning
    Center positioning & bias
    Guidelines - helper objects
    Chains
    Dimension constraints: min/max, Ratio
    ConstraintSet

    View Slide

  11. ConstraintLayout
    Relative positioning

    View Slide

  12. ConstraintLayout
    Relative positioning

    View Slide

  13. ConstraintLayout
    Center positioning & bias

    View Slide

  14. ConstraintLayout
    Center positioning & bias

    View Slide

  15. ConstraintLayout
    Ratio

    View Slide

  16. ConstraintLayout
    Ratio

    View Slide

  17. B
    Chains
    A
    Chain
    bi-directional constraints

    View Slide

  18. Different Chain Styles
    A B C Spread
    A B C Spread Inside
    A B C Weighted
    A B C Packed

    View Slide

  19. Different Chain Styles
    A B C Spread
    A B C Spread Inside
    A B C Weighted
    A B C Packed
    + bias

    View Slide

  20. ConstraintLayout
    Chains

    View Slide

  21. ConstraintLayout
    Chains

    View Slide

  22. Guidelines

    View Slide

  23. Guidelines

    View Slide

  24. Gone Behavior

    View Slide

  25. Gone Behavior

    View Slide

  26. Inadapted Margin

    View Slide

  27. Inadapted Margin

    View Slide

  28. Gone Margins

    View Slide

  29. Gone Margins

    View Slide

  30. Example

    View Slide

  31. Example

    View Slide

  32. Barriers
    Groups : apply visibility to a set of widgets
    Placeholder
    Percent Dimensions
    Circular Constraints
    beta 3
    1.1.0

    View Slide

  33. Barriers
    Groups : apply visibility to a set of widgets
    Placeholder
    Percent Dimensions
    Circular Constraints
    beta 3
    1.1.0

    View Slide

  34. Barriers
    Groups : apply visibility to a set of widgets
    Placeholder
    Percent Dimensions
    Circular Constraints
    beta 3
    1.1.0

    View Slide

  35. Barriers

    View Slide

  36. Barriers

    View Slide

  37. Barriers

    View Slide

  38. Barriers
    1
    2
    3 4

    View Slide

  39. Barriers

    View Slide

  40. Barriers

    View Slide

  41. Barriers

    View Slide

  42. Barriers
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection=“end”
    app:constraint_referenced_ids="textView1,textView2,textView3" />

    View Slide

  43. Barriers
    Groups : apply visibility to a set of widgets
    Placeholder
    Percent Dimensions
    Circular Constraints
    beta 3
    1.1.0

    View Slide

  44. Groups
    textview2
    textview3

    View Slide

  45. Groups
    android:id="@+id/group2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="visible"
    app:constraint_referenced_ids="textView2,textView3" />

    View Slide

  46. Groups
    Invisible Gone

    View Slide

  47. Barriers
    Groups : apply visibility to a set of widgets
    Placeholder
    Percent Dimensions
    Circular Constraints
    beta 3
    1.1.0
    ?

    View Slide

  48. class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    }
    fun select(v: View) {
    TransitionManager.beginDelayedTransition(main_layout)
    placeholder.setContentId(v.id)
    main_title.text= v.tag as CharSequence?;"";
    }
    }
    Placeholder

    View Slide

  49. class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    }
    fun select(v: View) {
    TransitionManager.beginDelayedTransition(main_layout)
    placeholder.setContentId(v.id)
    main_title.text= v.tag as CharSequence?;"";
    }
    }
    Placeholder

    View Slide

  50. Barriers
    Groups : apply visibility to a set of widgets
    Placeholder
    Percent Dimensions
    Circular Constraints
    beta 3
    1.1.0

    View Slide

  51. Percent Dimension
    • width or height set to 0dp (“match_constraint”)
    • relative to the container
    • control behavior with:
    • app:layout_constraintWidth_percent=“0.20”
    • app:layout_constraintHeight_percent=“0.20”

    View Slide

  52. Barriers
    Groups : apply visibility to a set of widgets
    Placeholder
    Percent Dimensions
    Circular Constraints
    beta 3
    1.1.0

    View Slide

  53. Circular Constraints

    app:layout_constraintCircle=“@+id/buttonA"
    app:layout_constraintCircleRadius=“100dp"
    app:layout_constraintCircleAngle="45" />

    View Slide

  54. Example
    Andrew Kelly
    https://medium.com/devnibbles/constraintlayout-circular-
    positioning-9489b11cb0e5

    View Slide

  55. Example
    Andrew Kelly
    https://medium.com/devnibbles/constraintlayout-circular-
    positioning-9489b11cb0e5

    View Slide

  56. beta 3
    1.1.0
    dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3'
    }

    View Slide

  57. Case Studies

    View Slide

  58. Case 1

    View Slide

  59. Case 1
    1 2 3

    View Slide

  60. Case 1

    View Slide

  61. Case 2

    View Slide

  62. Case 2

    View Slide

  63. Case 2

    View Slide

  64. Case 2

    View Slide

  65. Case 2

    View Slide

  66. Case 2
    1. Center connection
    2. Bias set to 0
    3. app:layout_constrainedWidth=“true”

    View Slide

  67. Case 2

    View Slide

  68. Case 3

    View Slide

  69. Case 3
    1. Horizontal chain between (1) and (2)
    2. Chain is a packed chain
    3. Horizontal bias is set to 0
    4. (1) has app:layout_constrainedWidth=“true”

    View Slide

  70. Case 3
    1. Horizontal chain between (1) and (2)
    2. Chain is a packed chain
    3. Horizontal bias is set to 0
    4. (1) has app:layout_constrainedWidth=“true”
    1 2

    View Slide

  71. Case 4
    • Flat layouts are good, but
    components still make
    sense!

    View Slide

  72. Case 4
    • Using nested ConstraintLayout can
    be a powerful layout tool
    • Think: layout components

    View Slide

  73. Direct Manipulation

    View Slide

  74. Direct Manipulation
    Change parameters
    1

    View Slide

  75. Direct Manipulation
    Change parameters
    1
    Use TransitionManager
    2

    View Slide

  76. Direct Manipulation
    //Find the view you are over and set minimum height
    View child = layout.getChildAt(current); B

    View Slide

  77. Direct Manipulation
    //Find the view you are over and set minimum height
    View child = layout.getChildAt(current); B
    child.setMinimumHeight(400); C

    View Slide

  78. Direct Manipulation
    //Find the view you are over and set minimum height
    TransitionManager.beginDelayedTransition(layout); A
    View child = layout.getChildAt(current); B
    child.setMinimumHeight(400); C

    View Slide

  79. Direct Manipulation
    //Find the view you are over and set minimum height
    TransitionManager.beginDelayedTransition(layout); A
    View child = layout.getChildAt(current); B
    child.setMinimumHeight(400); C

    View Slide

  80. Direct Manipulation
    //Find the view you are over and set minimum height
    TransitionManager.beginDelayedTransition(layout); A
    View child = layout.getChildAt(current); B
    child.setMinimumHeight(400); C

    View Slide

  81. Use of GONE

    View Slide

  82. Use of GONE

    View Slide

  83. More examples
    Huyen Tue Dao’s talk at ChicagoRoboto:
    Cool ConstraintLayout
    https://speakerdeck.com/queencodemonkey/chicago-roboto-2017-cool-
    constraintlayout
    http://chicagoroboto.com/session-videos/

    View Slide

  84. Guideline Manipulation

    View Slide

  85. Direct Manipulation : Guideline

    View Slide

  86. Direct Manipulation : Guideline
    Guideline are powerful elements

    View Slide

  87. Direct Manipulation : Guideline
    Guideline are powerful elements
    Specify exact positioning or percent value

    View Slide

  88. Direct Manipulation : Guideline
    Guideline are powerful elements
    Specify exact positioning or percent value
    Parameterize a layout via guidelines

    View Slide

  89. Guidelines can be your
    Layout Parameters

    View Slide

  90. View Slide

  91. final Guideline guideline = findViewById(R.id.guideline);

    View Slide

  92. final Guideline guideline = findViewById(R.id.guideline);
    final int end = ((LayoutParams) guideline.getLayoutParams()).guideEnd;

    View Slide

  93. final Guideline guideline = findViewById(R.id.guideline);
    final int end = ((LayoutParams) guideline.getLayoutParams()).guideEnd;
    ValueAnimator anim = ValueAnimator.ofInt(0, end);
    anim.addUpdateListener((animator) -> {
    });
    anim.start();

    View Slide

  94. final Guideline guideline = findViewById(R.id.guideline);
    final int end = ((LayoutParams) guideline.getLayoutParams()).guideEnd;
    ValueAnimator anim = ValueAnimator.ofInt(0, end);
    anim.addUpdateListener((animator) -> {
    LayoutParams lp = (LayoutParams) guideline.getLayoutParams();
    lp.guideEnd = (Integer) animator.getAnimatedValue();
    guideline.setLayoutParams(lp);
    });
    anim.start();

    View Slide

  95. final Guideline guideline = findViewById(R.id.guideline);
    final int end = ((LayoutParams) guideline.getLayoutParams()).guideEnd;
    ValueAnimator anim = ValueAnimator.ofInt(0, end);
    anim.setDuration(2000);
    anim.setInterpolator(new BounceInterpolator());
    anim.addUpdateListener((animator) -> {
    LayoutParams lp = (LayoutParams) guideline.getLayoutParams();
    lp.guideEnd = (Integer) animator.getAnimatedValue();
    guideline.setLayoutParams(lp);
    });
    anim.start();

    View Slide

  96. final Guideline guideline = findViewById(R.id.guideline);
    final int end = ((LayoutParams) guideline.getLayoutParams()).guideEnd;
    ObjectAnimator anim = ObjectAnimator.ofInt(g, "GuidelineEnd", 0, end);
    anim.setDuration(2000);
    anim.setInterpolator(new BounceInterpolator());
    anim.start();
    New in 1.1

    View Slide

  97. View Slide

  98. View Slide

  99. Parallax Effect

    View Slide

  100. View Slide

  101. base.setOnTouchListener(new View.OnTouchListener() {
    public boolean onTouch(View view, MotionEvent motionEvent) {
    switch (motionEvent.getActionMasked( )) {
    case MotionEvent.ACTION_MOVE:
    break;
    } A
    return true;
    } B
    });

    View Slide

  102. base.setOnTouchListener(new View.OnTouchListener() {
    public boolean onTouch(View view, MotionEvent motionEvent) {
    switch (motionEvent.getActionMasked( )) {
    case MotionEvent.ACTION_MOVE:
    LayoutParams params = (LayoutParams) guideline.getLayoutParams();
    params.guideBegin = (int) motionEvent.getX();
    guideline.setLayoutParams(params);
    break;
    } A
    return true;
    } B
    });

    View Slide

  103. Guideline Manipulation

    View Slide

  104. Guideline Manipulation

    View Slide

  105. Parallax Effect

    View Slide

  106. Parallax Effect

    View Slide

  107. Parallax Effect

    View Slide

  108. recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) {
    super.onScrolled(recyclerView, dx, dy)
    a}
    })

    View Slide

  109. recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) {
    super.onScrolled(recyclerView, dx, dy)
    val manager = recyclerView!!.layoutManager as LinearLayoutManager
    val position = manager.findFirstVisibleItemPosition()
    val lastPosition = manager.findLastVisibleItemPosition()
    val offsetX = recyclerView.computeHorizontalScrollOffset()
    for (i in 0..lastPosition - position) {
    val layout = manager.findViewByPosition(position + i) as ConstraintLayout
    val guideline = layout.findViewById(R.id.guideline)
    val params = guideline.layoutParams as ConstraintLayout.LayoutParams
    val w = recyclerView.width
    val deltaPos = offsetX - (position + i) * w
    val percent = deltaPos / w.toFloat()
    params.guidePercent = Math.max(0.3f, Math.min(0.7f, 0.5f - percent))
    guideline.layoutParams = params
    }
    a}
    })

    View Slide

  110. Parallax Effect

    View Slide

  111. Parallax Effect

    View Slide

  112. recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) {
    super.onScrolled(recyclerView, dx, dy)
    val manager = recyclerView!!.layoutManager as LinearLayoutManager
    val position = manager.findFirstVisibleItemPosition()
    val lastPosition = manager.findLastVisibleItemPosition()
    val offsetX = recyclerView.computeHorizontalScrollOffset()
    for (i in 0..lastPosition - position) {
    val layout = manager.findViewByPosition(position + i) as ConstraintLayout
    val guideline = layout.findViewById(R.id.guideline)
    val params = guideline.layoutParams as ConstraintLayout.LayoutParams
    val w = recyclerView.width
    val deltaPos = offsetX - (position + i) * w
    val percent = deltaPos / w.toFloat()
    params.guidePercent = Math.max(0.3f, Math.min(0.7f, 0.5f - percent))
    guideline.layoutParams = params
    }
    a}
    })

    View Slide

  113. recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) {
    super.onScrolled(recyclerView, dx, dy)
    val manager = recyclerView!!.layoutManager as LinearLayoutManager
    val position = manager.findFirstVisibleItemPosition()
    val lastPosition = manager.findLastVisibleItemPosition()
    val offsetX = recyclerView.computeHorizontalScrollOffset()
    for (i in 0..lastPosition - position) {
    val layout = manager.findViewByPosition(position + i) as ConstraintLayout
    val guideline = layout.findViewById(R.id.guideline)
    val params = guideline.layoutParams as ConstraintLayout.LayoutParams
    val w = recyclerView.width
    val deltaPos = offsetX - (position + i) * w
    val percent = deltaPos / w.toFloat()
    params.guidePercent = Math.max(0.3f, Math.min(0.7f, 0.5f + percent))
    guideline.layoutParams = params
    }
    a}
    })

    View Slide

  114. Parallax Effect: inversion

    View Slide

  115. Parallax Effect: inversion

    View Slide

  116. ConstraintSet

    View Slide

  117. ConstraintSet
    Contains all your constraints

    View Slide

  118. ConstraintSet
    Contains all your constraints
    Programming API

    View Slide

  119. ConstraintSet
    Contains all your constraints
    Programming API
    Clone from live layout or XML

    View Slide

  120. Initializing a ConstraintSet
    Layout resource set.clone(context, R.layout.main)
    Live layout set.clone(findViewById(R.id.main))
    XML file set.load(context, R.xml.main)

    View Slide

  121. Applying a ConstraintSet
    set.applyTo(layout)

    View Slide

  122. ConstraintSet

    View Slide

  123. ConstraintSet
    ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set
    ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set
    Initialization

    View Slide

  124. ConstraintSet
    ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set
    ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set
    mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout
    setContentView(R.layout.state1);
    mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main);
    mConstraintSet1.clone(mConstraintLayout); // get constraints from ConstraintSet
    Initialization
    onCreate

    View Slide

  125. ConstraintSet
    ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set
    ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set
    mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout
    setContentView(R.layout.state1);
    mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main);
    mConstraintSet1.clone(mConstraintLayout); // get constraints from ConstraintSet
    mConstraintSet1.applyTo(mConstraintLayout);
    Initialization
    onCreate
    To change state

    View Slide

  126. ConstraintSet
    ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set
    ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set
    mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout
    setContentView(R.layout.state1);
    mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main);
    mConstraintSet1.clone(mConstraintLayout); // get constraints from ConstraintSet
    TransitionManager.beginDelayedTransition(mConstraintLayout);
    mConstraintSet1.applyTo(mConstraintLayout);
    Initialization
    onCreate
    To change state

    View Slide

  127. Build two layouts

    View Slide

  128. Build two layouts

    View Slide

  129. Build two layouts

    View Slide

  130. Build two layouts

    View Slide

  131. Add Custom Transition
    static public class MyTransition extends TransitionSet
    {
    {
    setDuration(1000);
    setOrdering(ORDERING_SEQUENTIAL);
    addTransition(new TransitionSet() {
    {
    addTransition(new Fade(Fade.OUT));
    addTransition(new ChangeBounds());
    }
    });
    addTransition(new Fade(Fade.IN));
    }
    }
    private void animate(ConstraintLayout cl, ConstraintSet set) {
    TransitionManager.beginDelayedTransition(cl, new MyTransition());
    set.applyTo(cl);
    }

    View Slide

  132. Add Custom Transition
    static public class MyTransition extends TransitionSet
    {
    {
    setDuration(1000);
    setOrdering(ORDERING_SEQUENTIAL);
    addTransition(new TransitionSet() {
    {
    addTransition(new Fade(Fade.OUT));
    addTransition(new ChangeBounds());
    }
    });
    addTransition(new Fade(Fade.IN));
    }
    }
    private void animate(ConstraintLayout cl, ConstraintSet set) {
    TransitionManager.beginDelayedTransition(cl, new MyTransition());
    set.applyTo(cl);
    }

    View Slide

  133. Custom Transition 2
    static public class MyTransition extends TransitionSet
    {
    {
    setDuration(1000);
    setOrdering(ORDERING_SEQUENTIAL);
    addTransition(new TransitionSet() {
    {
    addTransition(new Fade(Fade.OUT));
    addTransition(new ChangeBounds());
    addTransition(new Fade(Fade.IN));
    }
    });
    }
    }
    private void animate(ConstraintLayout cl, ConstraintSet set) {
    TransitionManager.beginDelayedTransition(cl, new MyTransition());
    set.applyTo(cl);
    }

    View Slide

  134. Custom Transition 2
    static public class MyTransition extends TransitionSet
    {
    {
    setDuration(1000);
    setOrdering(ORDERING_SEQUENTIAL);
    addTransition(new TransitionSet() {
    {
    addTransition(new Fade(Fade.OUT));
    addTransition(new ChangeBounds());
    addTransition(new Fade(Fade.IN));
    }
    });
    }
    }
    private void animate(ConstraintLayout cl, ConstraintSet set) {
    TransitionManager.beginDelayedTransition(cl, new MyTransition());
    set.applyTo(cl);
    }

    View Slide

  135. Add Custom Transition
    static public class MyTransition extends
    TransitionSet {
    {
    setDuration(1000);
    setOrdering(ORDERING_SEQUENTIAL);
    addTransition(new TransitionSet() {
    {
    addTransition(new Fade(Fade.OUT));
    ChangeBounds move = new ChangeBounds();
    move.setInterpolator(new BounceInterpolator());
    addTransition(move);
    }
    });
    addTransition(new Fade(Fade.IN));
    }
    }

    View Slide

  136. Add Custom Transition
    static public class MyTransition extends
    TransitionSet {
    {
    setDuration(1000);
    setOrdering(ORDERING_SEQUENTIAL);
    addTransition(new TransitionSet() {
    {
    addTransition(new Fade(Fade.OUT));
    ChangeBounds move = new ChangeBounds();
    move.setInterpolator(new BounceInterpolator());
    addTransition(move);
    }
    });
    addTransition(new Fade(Fade.IN));
    }
    }

    View Slide

  137. Add Custom Transition
    Very custom…

    View Slide

  138. Add Custom Transition
    Very custom…

    View Slide

  139. Collapsible Toolbar

    View Slide

  140. View Slide

  141. View Slide

  142. Collapsible Toolbar
    CoordinatorLayout
    AppBarLayout
    CollapsingToolbarLayout

    View Slide

  143. ConstraintLayout
    Collapsible Toolbar
    CoordinatorLayout
    AppBarLayout

    View Slide

  144. XML

    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows=“false" … >
    android:id=“@+id/toolbar_layout" … >




    View Slide


  145. android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows=“false" … >
    android:id=“@+id/toolbar_layout" … >




    XML

    View Slide


  146. android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows=“false" … >





    XML

    View Slide

  147. View Slide

  148. View Slide

  149. View Slide

  150. View Slide

  151. XML
    android:id="@+id/constraintToolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:minHeight="40dp"
    app:layout_scrollFlags="enterAlways|snap">

    View Slide

  152. XML
    android:id="@+id/constraintToolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:minHeight="40dp"
    app:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed">

    View Slide

  153. View Slide

  154. View Slide

  155. Using ConstraintSet
    …& Kotlin

    View Slide

  156. Open ConstraintSet Closed ConstraintSet
    open.xml closed.xml

    View Slide

  157. class NoAnimCollapsibleConstraintLayout : ConstraintLayout, AppBarLayout.OnOffsetChangedListener {
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}
    private var mTransitionThreshold = 0.35f
    private var mLastPosition : Int = 0
    private var mToolbarOpen = true
    private val mOpenToolbarSet: ConstraintSet = ConstraintSet()
    private val mCloseToolbarSet: ConstraintSet = ConstraintSet()
    override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    if (parent is AppBarLayout) {
    var appBarLayout = parent as AppBarLayout
    appBarLayout.addOnOffsetChangedListener(this)
    mOpenToolbarSet.clone(context, R.layout.open)
    mCloseToolbarSet.clone(context, R.layout.close)
    }
    }
    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
    if (mLastPosition == verticalOffset) {
    return
    }
    mLastPosition = verticalOffset
    val progress = Math.abs(verticalOffset / appBarLayout?.getHeight()?.toFloat()!!)
    val params = getLayoutParams() as AppBarLayout.LayoutParams
    params.topMargin = -verticalOffset
    setLayoutParams(params)
    if (mToolbarOpen && progress > mTransitionThreshold) {
    mCloseToolbarSet.applyTo(this)
    mToolbarOpen = false
    } else if (!mToolbarOpen && progress < mTransitionThreshold) {
    mOpenToolbarSet.applyTo(this)
    mToolbarOpen = true
    }
    }
    }

    View Slide

  158. View Slide

  159. View Slide

  160. class NoAnimCollapsibleConstraintLayout : ConstraintLayout, AppBarLayout.OnOffsetChangedListener {
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}
    private var mTransitionThreshold = 0.35f
    private var mLastPosition : Int = 0
    private var mToolbarOpen = true
    private val mOpenToolbarSet: ConstraintSet = ConstraintSet()
    private val mCloseToolbarSet: ConstraintSet = ConstraintSet()
    override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    if (parent is AppBarLayout) {
    var appBarLayout = parent as AppBarLayout
    appBarLayout.addOnOffsetChangedListener(this)
    mOpenToolbarSet.clone(context, R.layout.open)
    mCloseToolbarSet.clone(context, R.layout.close)
    }
    }
    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
    if (mLastPosition == verticalOffset) {
    return
    }
    mLastPosition = verticalOffset
    val progress = Math.abs(verticalOffset / appBarLayout?.getHeight()?.toFloat()!!)
    val params = getLayoutParams() as AppBarLayout.LayoutParams
    params.topMargin = -verticalOffset
    setLayoutParams(params)
    if (mToolbarOpen && progress > mTransitionThreshold) {
    mCloseToolbarSet.applyTo(this)
    mToolbarOpen = false
    } else if (!mToolbarOpen && progress < mTransitionThreshold) {
    mOpenToolbarSet.applyTo(this)
    mToolbarOpen = true
    }
    }
    }
    Subclass of ConstraintLayout
    Implements
    OnOffsetChangedListener
    1
    2

    View Slide

  161. class NoAnimCollapsibleConstraintLayout : ConstraintLayout, AppBarLayout.OnOffsetChangedListener {
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}
    private var mTransitionThreshold = 0.35f
    private var mLastPosition : Int = 0
    private var mToolbarOpen = true
    private val mOpenToolbarSet: ConstraintSet = ConstraintSet()
    private val mCloseToolbarSet: ConstraintSet = ConstraintSet()
    override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    if (parent is AppBarLayout) {
    var appBarLayout = parent as AppBarLayout
    appBarLayout.addOnOffsetChangedListener(this)
    mOpenToolbarSet.clone(context, R.layout.open)
    mCloseToolbarSet.clone(context, R.layout.close)
    }
    }
    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
    if (mLastPosition == verticalOffset) {
    return
    }
    mLastPosition = verticalOffset
    val progress = Math.abs(verticalOffset / appBarLayout?.getHeight()?.toFloat()!!)
    val params = getLayoutParams() as AppBarLayout.LayoutParams
    params.topMargin = -verticalOffset
    setLayoutParams(params)
    if (mToolbarOpen && progress > mTransitionThreshold) {
    mCloseToolbarSet.applyTo(this)
    mToolbarOpen = false
    } else if (!mToolbarOpen && progress < mTransitionThreshold) {
    mOpenToolbarSet.applyTo(this)
    mToolbarOpen = true
    }
    }
    }
    appBarLayout.addOnOffsetChangedListener(this)
    mOpenToolbarSet.clone(context, R.layout.open)
    mCloseToolbarSet.clone(context, R.layout.close)
    Implements
    OnOffsetChangedListener
    3
    Load the ConstraintSet
    4

    View Slide

  162. class NoAnimCollapsibleConstraintLayout : ConstraintLayout, AppBarLayout.OnOffsetChangedListener {
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}
    private var mTransitionThreshold = 0.35f
    private var mLastPosition : Int = 0
    private var mToolbarOpen = true
    private val mOpenToolbarSet: ConstraintSet = ConstraintSet()
    private val mCloseToolbarSet: ConstraintSet = ConstraintSet()
    override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    if (parent is AppBarLayout) {
    var appBarLayout = parent as AppBarLayout
    appBarLayout.addOnOffsetChangedListener(this)
    mOpenToolbarSet.clone(context, R.layout.open)
    mCloseToolbarSet.clone(context, R.layout.close)
    }
    }
    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
    if (mLastPosition == verticalOffset) {
    return
    }
    mLastPosition = verticalOffset
    val progress = Math.abs(verticalOffset / appBarLayout?.getHeight()?.toFloat()!!)
    val params = getLayoutParams() as AppBarLayout.LayoutParams
    params.topMargin = -verticalOffset
    setLayoutParams(params)
    if (mToolbarOpen && progress > mTransitionThreshold) {
    mCloseToolbarSet.applyTo(this)
    mToolbarOpen = false
    } else if (!mToolbarOpen && progress < mTransitionThreshold) {
    mOpenToolbarSet.applyTo(this)
    mToolbarOpen = true
    }
    }
    }
    Offset the Content
    5
    val params = getLayoutParams()
    as AppBarLayout.LayoutParams
    params.topMargin = -verticalOffset
    setLayoutParams(params)

    View Slide

  163. class NoAnimCollapsibleConstraintLayout : ConstraintLayout, AppBarLayout.OnOffsetChangedListener {
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}
    private var mTransitionThreshold = 0.35f
    private var mLastPosition : Int = 0
    private var mToolbarOpen = true
    private val mOpenToolbarSet: ConstraintSet = ConstraintSet()
    private val mCloseToolbarSet: ConstraintSet = ConstraintSet()
    override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    if (parent is AppBarLayout) {
    var appBarLayout = parent as AppBarLayout
    appBarLayout.addOnOffsetChangedListener(this)
    mOpenToolbarSet.clone(context, R.layout.open)
    mCloseToolbarSet.clone(context, R.layout.close)
    }
    }
    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
    if (mLastPosition == verticalOffset) {
    return
    }
    mLastPosition = verticalOffset
    val progress = Math.abs(verticalOffset / appBarLayout?.getHeight()?.toFloat()!!)
    val params = getLayoutParams() as AppBarLayout.LayoutParams
    params.topMargin = -verticalOffset
    setLayoutParams(params)
    if (mToolbarOpen && progress > mTransitionThreshold) {
    mCloseToolbarSet.applyTo(this)
    mToolbarOpen = false
    } else if (!mToolbarOpen && progress < mTransitionThreshold) {
    mOpenToolbarSet.applyTo(this)
    mToolbarOpen = true
    }
    }
    }
    Toggle the ConstraintSet
    6
    if (mToolbarOpen && progress > mTransitionThreshold) {
    mCloseToolbarSet.applyTo(this)
    mToolbarOpen = false
    } else if (!mToolbarOpen && progress < mTransitionThreshold) {
    mOpenToolbarSet.applyTo(this)
    mToolbarOpen = true
    }

    View Slide

  164. View Slide

  165. View Slide

  166. Adding some animation…

    View Slide

  167. Animating content

    View Slide

  168. class AnimationHelper(view : View){
    var initialValue = 0
    var target = view
    init {
    initialValue = target.left
    }
    fun evaluate() {
    if (initialValue != target.left) {
    var delta = (initialValue - target.left).toFloat()
    val anim = ObjectAnimator.ofFloat(target, "translationX", delta, 0f)
    anim.duration = 400
    anim.start()
    initialValue = target.left
    }
    }
    }

    View Slide

  169. class AnimationHelper(view : View){
    var initialValue = 0
    var target = view
    init {
    initialValue = target.left
    }
    fun evaluate() {
    if (initialValue != target.left) {
    var delta = (initialValue - target.left).toFloat()
    val anim = ObjectAnimator.ofFloat(target, "translationX", delta, 0f)
    anim.duration = 400
    anim.start()
    initialValue = target.left
    }
    }
    }

    View Slide

  170. class AnimationHelper(view : View){
    var initialValue = 0
    var target = view
    init {
    initialValue = target.left
    }
    fun evaluate() {
    if (initialValue != target.left) {
    var delta = (initialValue - target.left).toFloat()
    val anim = ObjectAnimator.ofFloat(target, "translationX", delta, 0f)
    anim.duration = 400
    anim.start()
    initialValue = target.left
    }
    }
    }

    View Slide

  171. class AnimationHelper(view : View){
    var initialValue = 0
    var target = view
    init {
    initialValue = target.left
    }
    fun evaluate() {
    if (initialValue != target.left) {
    var delta = (initialValue - target.left).toFloat()
    val anim = ObjectAnimator.ofFloat(target, "translationX", delta, 0f)
    anim.duration = 400
    anim.start()
    initialValue = target.left
    }
    }
    }

    View Slide

  172. Animating background

    View Slide

  173. Animating the alpha channel
    mBackground = findViewById(R.id.background)

    showImageAnimator = ObjectAnimator.ofFloat(mBackground, "alpha", 0f, 1f)
    showImageAnimator?.duration = 600

    showImageAnimator?.start()

    View Slide

  174. Now all together!

    View Slide

  175. class CollapsibleConstraintLayout : ConstraintLayout, AppBarLayout.OnOffsetChangedListener {
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}
    private var mLastPosition : Int = 0
    private var mToolbarOpen = true
    private var mTransitionThreshold = 0.35f
    private val mOpenToolbarSet: ConstraintSet = ConstraintSet()
    private val mCloseToolbarSet: ConstraintSet = ConstraintSet()
    private var mBackground: ImageView? = null
    private var mTitle : TextView? = null
    private var mIcon : ImageView? = null
    private var mTranslationTitle : AnimationHelper? = null
    private var mTranslationIcon : AnimationHelper? = null
    private var showImageAnimator : Animator? = null
    private var hideImageAnimator : Animator? = null
    class AnimationHelper(view : View){
    var initialValue = 0
    var target = view
    init {
    initialValue = target.left
    }
    fun evaluate() {
    if (initialValue != target.left) {
    var delta = (initialValue - target.left).toFloat()
    val anim = ObjectAnimator.ofFloat(target, "translationX", delta, 0f)
    anim.duration = 400
    anim.start()
    initialValue = target.left
    }
    }
    }
    override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    if (false && parent is AppBarLayout) {
    var appBarLayout = parent as AppBarLayout
    appBarLayout.addOnOffsetChangedListener(this)
    mOpenToolbarSet.clone(context, R.layout.open)
    mCloseToolbarSet.clone(context, R.layout.close)
    mBackground = findViewById(R.id.background)
    mTitle = findViewById(R.id.name)
    mIcon = findViewById(R.id.icon)
    showImageAnimator = ObjectAnimator.ofFloat(mBackground, "alpha", 0f, 1f)
    showImageAnimator?.duration = 600
    hideImageAnimator = ObjectAnimator.ofFloat(mBackground, "alpha", 1f, 0f)
    hideImageAnimator?.duration = 600
    }
    }
    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
    if (mLastPosition == verticalOffset) {
    return
    }
    mLastPosition = verticalOffset
    val progress = Math.abs(verticalOffset / appBarLayout?.getHeight()?.toFloat()!!)
    val params = getLayoutParams() as AppBarLayout.LayoutParams
    params.topMargin = -verticalOffset
    setLayoutParams(params)
    if (mToolbarOpen && progress > mTransitionThreshold) {
    mCloseToolbarSet.applyTo(this)
    hideImageAnimator?.start()
    mToolbarOpen = false
    } else if (!mToolbarOpen && progress < mTransitionThreshold) {
    mOpenToolbarSet.applyTo(this)
    showImageAnimator?.start()
    mToolbarOpen = true
    }
    }
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    super.onLayout(changed, left, top, right, bottom)
    if (mTitle != null && mTranslationTitle == null) {
    mTranslationTitle = AnimationHelper(mTitle!!)
    }
    if (mIcon != null && mTranslationIcon == null) {
    mTranslationIcon = AnimationHelper(mIcon!!)
    }
    mTranslationTitle?.evaluate()
    mTranslationIcon?.evaluate()
    }
    }
    AnimationHelper
    1

    View Slide

  176. class CollapsibleConstraintLayout : ConstraintLayout, AppBarLayout.OnOffsetChangedListener {
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}
    private var mLastPosition : Int = 0
    private var mToolbarOpen = true
    private var mTransitionThreshold = 0.35f
    private val mOpenToolbarSet: ConstraintSet = ConstraintSet()
    private val mCloseToolbarSet: ConstraintSet = ConstraintSet()
    private var mBackground: ImageView? = null
    private var mTitle : TextView? = null
    private var mIcon : ImageView? = null
    private var mTranslationTitle : AnimationHelper? = null
    private var mTranslationIcon : AnimationHelper? = null
    private var showImageAnimator : Animator? = null
    private var hideImageAnimator : Animator? = null
    class AnimationHelper(view : View){
    var initialValue = 0
    var target = view
    init {
    initialValue = target.left
    }
    fun evaluate() {
    if (initialValue != target.left) {
    var delta = (initialValue - target.left).toFloat()
    val anim = ObjectAnimator.ofFloat(target, "translationX", delta, 0f)
    anim.duration = 400
    anim.start()
    initialValue = target.left
    }
    }
    }
    override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    if (false && parent is AppBarLayout) {
    var appBarLayout = parent as AppBarLayout
    appBarLayout.addOnOffsetChangedListener(this)
    mOpenToolbarSet.clone(context, R.layout.open)
    mCloseToolbarSet.clone(context, R.layout.close)
    mBackground = findViewById(R.id.background)
    mTitle = findViewById(R.id.name)
    mIcon = findViewById(R.id.icon)
    showImageAnimator = ObjectAnimator.ofFloat(mBackground, "alpha", 0f, 1f)
    showImageAnimator?.duration = 600
    hideImageAnimator = ObjectAnimator.ofFloat(mBackground, "alpha", 1f, 0f)
    hideImageAnimator?.duration = 600
    }
    }
    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
    if (mLastPosition == verticalOffset) {
    return
    }
    mLastPosition = verticalOffset
    val progress = Math.abs(verticalOffset / appBarLayout?.getHeight()?.toFloat()!!)
    val params = getLayoutParams() as AppBarLayout.LayoutParams
    params.topMargin = -verticalOffset
    setLayoutParams(params)
    if (mToolbarOpen && progress > mTransitionThreshold) {
    mCloseToolbarSet.applyTo(this)
    hideImageAnimator?.start()
    mToolbarOpen = false
    } else if (!mToolbarOpen && progress < mTransitionThreshold) {
    mOpenToolbarSet.applyTo(this)
    showImageAnimator?.start()
    mToolbarOpen = true
    }
    }
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    super.onLayout(changed, left, top, right, bottom)
    if (mTitle != null && mTranslationTitle == null) {
    mTranslationTitle = AnimationHelper(mTitle!!)
    }
    if (mIcon != null && mTranslationIcon == null) {
    mTranslationIcon = AnimationHelper(mIcon!!)
    }
    mTranslationTitle?.evaluate()
    mTranslationIcon?.evaluate()
    }
    }
    onLayout
    2
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    super.onLayout(changed, left, top, right, bottom)
    if (mTitle != null && mTranslationTitle == null) {
    mTranslationTitle = AnimationHelper(mTitle!!)
    }
    if (mIcon != null && mTranslationIcon == null) {
    mTranslationIcon = AnimationHelper(mIcon!!)
    }
    mTranslationTitle?.evaluate()
    mTranslationIcon?.evaluate()
    }

    View Slide

  177. class CollapsibleConstraintLayout : ConstraintLayout, AppBarLayout.OnOffsetChangedListener {
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}
    private var mLastPosition : Int = 0
    private var mToolbarOpen = true
    private var mTransitionThreshold = 0.35f
    private val mOpenToolbarSet: ConstraintSet = ConstraintSet()
    private val mCloseToolbarSet: ConstraintSet = ConstraintSet()
    private var mBackground: ImageView? = null
    private var mTitle : TextView? = null
    private var mIcon : ImageView? = null
    private var mTranslationTitle : AnimationHelper? = null
    private var mTranslationIcon : AnimationHelper? = null
    private var showImageAnimator : Animator? = null
    private var hideImageAnimator : Animator? = null
    class AnimationHelper(view : View){
    var initialValue = 0
    var target = view
    init {
    initialValue = target.left
    }
    fun evaluate() {
    if (initialValue != target.left) {
    var delta = (initialValue - target.left).toFloat()
    val anim = ObjectAnimator.ofFloat(target, "translationX", delta, 0f)
    anim.duration = 400
    anim.start()
    initialValue = target.left
    }
    }
    }
    override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    if (false && parent is AppBarLayout) {
    var appBarLayout = parent as AppBarLayout
    appBarLayout.addOnOffsetChangedListener(this)
    mOpenToolbarSet.clone(context, R.layout.open)
    mCloseToolbarSet.clone(context, R.layout.close)
    mBackground = findViewById(R.id.background)
    mTitle = findViewById(R.id.name)
    mIcon = findViewById(R.id.icon)
    showImageAnimator = ObjectAnimator.ofFloat(mBackground, "alpha", 0f, 1f)
    showImageAnimator?.duration = 600
    hideImageAnimator = ObjectAnimator.ofFloat(mBackground, "alpha", 1f, 0f)
    hideImageAnimator?.duration = 600
    }
    }
    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
    if (mLastPosition == verticalOffset) {
    return
    }
    mLastPosition = verticalOffset
    val progress = Math.abs(verticalOffset / appBarLayout?.getHeight()?.toFloat()!!)
    val params = getLayoutParams() as AppBarLayout.LayoutParams
    params.topMargin = -verticalOffset
    setLayoutParams(params)
    if (mToolbarOpen && progress > mTransitionThreshold) {
    mCloseToolbarSet.applyTo(this)
    hideImageAnimator?.start()
    mToolbarOpen = false
    } else if (!mToolbarOpen && progress < mTransitionThreshold) {
    mOpenToolbarSet.applyTo(this)
    showImageAnimator?.start()
    mToolbarOpen = true
    }
    }
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    super.onLayout(changed, left, top, right, bottom)
    if (mTitle != null && mTranslationTitle == null) {
    mTranslationTitle = AnimationHelper(mTitle!!)
    }
    if (mIcon != null && mTranslationIcon == null) {
    mTranslationIcon = AnimationHelper(mIcon!!)
    }
    mTranslationTitle?.evaluate()
    mTranslationIcon?.evaluate()
    }
    }
    onLayout
    2
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    super.onLayout(changed, left, top, right, bottom)
    if (mTitle != null && mTranslationTitle == null) {
    mTranslationTitle = AnimationHelper(mTitle!!)
    }
    if (mIcon != null && mTranslationIcon == null) {
    mTranslationIcon = AnimationHelper(mIcon!!)
    }
    mTranslationTitle?.evaluate()
    mTranslationIcon?.evaluate()
    }

    View Slide

  178. class CollapsibleConstraintLayout : ConstraintLayout, AppBarLayout.OnOffsetChangedListener {
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}
    private var mLastPosition : Int = 0
    private var mToolbarOpen = true
    private var mTransitionThreshold = 0.35f
    private val mOpenToolbarSet: ConstraintSet = ConstraintSet()
    private val mCloseToolbarSet: ConstraintSet = ConstraintSet()
    private var mBackground: ImageView? = null
    private var mTitle : TextView? = null
    private var mIcon : ImageView? = null
    private var mTranslationTitle : AnimationHelper? = null
    private var mTranslationIcon : AnimationHelper? = null
    private var showImageAnimator : Animator? = null
    private var hideImageAnimator : Animator? = null
    class AnimationHelper(view : View){
    var initialValue = 0
    var target = view
    init {
    initialValue = target.left
    }
    fun evaluate() {
    if (initialValue != target.left) {
    var delta = (initialValue - target.left).toFloat()
    val anim = ObjectAnimator.ofFloat(target, "translationX", delta, 0f)
    anim.duration = 400
    anim.start()
    initialValue = target.left
    }
    }
    }
    override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    if (false && parent is AppBarLayout) {
    var appBarLayout = parent as AppBarLayout
    appBarLayout.addOnOffsetChangedListener(this)
    mOpenToolbarSet.clone(context, R.layout.open)
    mCloseToolbarSet.clone(context, R.layout.close)
    mBackground = findViewById(R.id.background)
    mTitle = findViewById(R.id.name)
    mIcon = findViewById(R.id.icon)
    showImageAnimator = ObjectAnimator.ofFloat(mBackground, "alpha", 0f, 1f)
    showImageAnimator?.duration = 600
    hideImageAnimator = ObjectAnimator.ofFloat(mBackground, "alpha", 1f, 0f)
    hideImageAnimator?.duration = 600
    }
    }
    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
    if (mLastPosition == verticalOffset) {
    return
    }
    mLastPosition = verticalOffset
    val progress = Math.abs(verticalOffset / appBarLayout?.getHeight()?.toFloat()!!)
    val params = getLayoutParams() as AppBarLayout.LayoutParams
    params.topMargin = -verticalOffset
    setLayoutParams(params)
    if (mToolbarOpen && progress > mTransitionThreshold) {
    mCloseToolbarSet.applyTo(this)
    hideImageAnimator?.start()
    mToolbarOpen = false
    } else if (!mToolbarOpen && progress < mTransitionThreshold) {
    mOpenToolbarSet.applyTo(this)
    showImageAnimator?.start()
    mToolbarOpen = true
    }
    }
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    super.onLayout(changed, left, top, right, bottom)
    if (mTitle != null && mTranslationTitle == null) {
    mTranslationTitle = AnimationHelper(mTitle!!)
    }
    if (mIcon != null && mTranslationIcon == null) {
    mTranslationIcon = AnimationHelper(mIcon!!)
    }
    mTranslationTitle?.evaluate()
    mTranslationIcon?.evaluate()
    }
    }
    onLayout
    2
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    super.onLayout(changed, left, top, right, bottom)
    if (mTitle != null && mTranslationTitle == null) {
    mTranslationTitle = AnimationHelper(mTitle!!)
    }
    if (mIcon != null && mTranslationIcon == null) {
    mTranslationIcon = AnimationHelper(mIcon!!)
    }
    mTranslationTitle?.evaluate()
    mTranslationIcon?.evaluate()
    }

    View Slide

  179. class CollapsibleConstraintLayout : ConstraintLayout, AppBarLayout.OnOffsetChangedListener {
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}
    private var mLastPosition : Int = 0
    private var mToolbarOpen = true
    private var mTransitionThreshold = 0.35f
    private val mOpenToolbarSet: ConstraintSet = ConstraintSet()
    private val mCloseToolbarSet: ConstraintSet = ConstraintSet()
    private var mBackground: ImageView? = null
    private var mTitle : TextView? = null
    private var mIcon : ImageView? = null
    private var mTranslationTitle : AnimationHelper? = null
    private var mTranslationIcon : AnimationHelper? = null
    private var showImageAnimator : Animator? = null
    private var hideImageAnimator : Animator? = null
    class AnimationHelper(view : View){
    var initialValue = 0
    var target = view
    init {
    initialValue = target.left
    }
    fun evaluate() {
    if (initialValue != target.left) {
    var delta = (initialValue - target.left).toFloat()
    val anim = ObjectAnimator.ofFloat(target, "translationX", delta, 0f)
    anim.duration = 400
    anim.start()
    initialValue = target.left
    }
    }
    }
    override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    if (false && parent is AppBarLayout) {
    var appBarLayout = parent as AppBarLayout
    appBarLayout.addOnOffsetChangedListener(this)
    mOpenToolbarSet.clone(context, R.layout.open)
    mCloseToolbarSet.clone(context, R.layout.close)
    mBackground = findViewById(R.id.background)
    mTitle = findViewById(R.id.name)
    mIcon = findViewById(R.id.icon)
    showImageAnimator = ObjectAnimator.ofFloat(mBackground, "alpha", 0f, 1f)
    showImageAnimator?.duration = 600
    hideImageAnimator = ObjectAnimator.ofFloat(mBackground, "alpha", 1f, 0f)
    hideImageAnimator?.duration = 600
    }
    }
    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
    if (mLastPosition == verticalOffset) {
    return
    }
    mLastPosition = verticalOffset
    val progress = Math.abs(verticalOffset / appBarLayout?.getHeight()?.toFloat()!!)
    val params = getLayoutParams() as AppBarLayout.LayoutParams
    params.topMargin = -verticalOffset
    setLayoutParams(params)
    if (mToolbarOpen && progress > mTransitionThreshold) {
    mCloseToolbarSet.applyTo(this)
    hideImageAnimator?.start()
    mToolbarOpen = false
    } else if (!mToolbarOpen && progress < mTransitionThreshold) {
    mOpenToolbarSet.applyTo(this)
    showImageAnimator?.start()
    mToolbarOpen = true
    }
    }
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    super.onLayout(changed, left, top, right, bottom)
    if (mTitle != null && mTranslationTitle == null) {
    mTranslationTitle = AnimationHelper(mTitle!!)
    }
    if (mIcon != null && mTranslationIcon == null) {
    mTranslationIcon = AnimationHelper(mIcon!!)
    }
    mTranslationTitle?.evaluate()
    mTranslationIcon?.evaluate()
    }
    }
    animating background alpha
    3

    View Slide

  180. View Slide

  181. View Slide

  182. Collapsible Layout Summary
    • Use ConstraintLayout / ConstraintSet for flexibility
    • Piggy-back on CoordinatorLayout / AppBarLayout
    • Kotlin!
    • ObjectAnimator for property animation

    View Slide

  183. Helpers & Decorators

    View Slide

  184. Helpers
    ConstraintHelper

    View Slide

  185. Helpers
    ConstraintHelper
    View 1
    View 2
    View 3

    View Slide

  186. Helpers
    ConstraintHelper
    Barrier Group

    View Slide

  187. Example
    StaggeredAnimationGroup from Bartosz Lipiński
    https://github.com/blipinsk/StaggeredAnimationGroup

    View Slide

  188. Example
    StaggeredAnimationGroup from Bartosz Lipiński
    https://github.com/blipinsk/StaggeredAnimationGroup

    View Slide

  189. Decorators
    ConstraintHelper
    Decorator

    View Slide

  190. Decorator

    View Slide

  191. Decorator
    ConstraintHelper + View

    View Slide

  192. Decorator
    ConstraintHelper + View
    Gather draw operations in a single place

    View Slide

  193. Decorator
    ConstraintHelper + View
    Gather draw operations in a single place
    Draw something depending on multiple views

    View Slide

  194. Decorator
    public class MetaballsDecorator extends Decorator {
    public void updatePostLayout(ConstraintLayout container) {
    int[] ids = getReferencedIds();
    final int count = ids.length;
    for (int i = 0; i < count; i++) {
    View view = container.getViewById(ids[i]);
    // do something
    }
    }
    @Override
    public void onDraw(Canvas canvas) {
    // do something
    }
    }

    View Slide

  195. Decorator
    Canvas
    ImageViews

    View Slide

  196. Decorator
    Canvas
    ImageViews

    View Slide

  197. Decorator
    Canvas
    ImageViews

    View Slide

  198. Decorator:
    Metaballs

    View Slide

  199. Decorator:
    Metaballs

    View Slide

  200. Decorator:
    Metaballs

    View Slide

  201. Decorator:
    Metaballs

    View Slide

  202. Let’s sum it all up…

    View Slide

  203. Let’s sum it all up…
    ConstraintLayout allows very flexible, declarative positioning

    View Slide

  204. Let’s sum it all up…
    ConstraintLayout allows very flexible, declarative positioning
    You can directly modify parameters to change your layout

    View Slide

  205. Let’s sum it all up…
    ConstraintLayout allows very flexible, declarative positioning
    You can directly modify parameters to change your layout
    Guidelines are a great entry point for customizing your layout

    View Slide

  206. Let’s sum it all up…
    ConstraintLayout allows very flexible, declarative positioning
    You can directly modify parameters to change your layout
    Guidelines are a great entry point for customizing your layout
    ConstraintSet allows you to easily manage multiple states of your layout

    View Slide

  207. Let’s sum it all up…
    ConstraintLayout allows very flexible, declarative positioning
    You can directly modify parameters to change your layout
    Guidelines are a great entry point for customizing your layout
    ConstraintSet allows you to easily manage multiple states of your layout
    TransitionManager will animate a lot for you automatically

    View Slide

  208. Let’s sum it all up…
    ConstraintLayout allows very flexible, declarative positioning
    You can directly modify parameters to change your layout
    Guidelines are a great entry point for customizing your layout
    ConstraintSet allows you to easily manage multiple states of your layout
    TransitionManager will animate a lot for you automatically
    Property animations still very useful!

    View Slide

  209. Let’s sum it all up…
    ConstraintLayout allows very flexible, declarative positioning
    You can directly modify parameters to change your layout
    Guidelines are a great entry point for customizing your layout
    ConstraintSet allows you to easily manage multiple states of your layout
    TransitionManager will animate a lot for you automatically
    Property animations still very useful!
    Decorators are great for capturing cross-views rendering

    View Slide

  210. Thank you!
    Nicolas Roard
    @camaelon
    John Hoford
    @johnhoford

    View Slide

  211. Documentation
    • http://www.constraintlayout.com
    • https://developer.android.com/reference/android/support/
    constraint/package-summary.html
    • https://developer.android.com/training/constraint-layout/index.html
    • https://codelabs.developers.google.com/codelabs/constraint-layout
    • https://medium.com/google-developers/building-interfaces-with-
    constraintlayout-3958fa38a9f7

    View Slide

  212. Documentation
    • http://www.constraintlayout.com
    • https://developer.android.com/reference/android/support/
    constraint/package-summary.html
    • https://developer.android.com/training/constraint-layout/index.html
    • https://codelabs.developers.google.com/codelabs/constraint-layout
    • https://medium.com/google-developers/building-interfaces-with-
    constraintlayout-3958fa38a9f7

    View Slide