Copenhagen Android meetup

ConstraintLayout & Animation

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