Constraint Layout and Constraint sets

Constraint Layout is a new type of layout available in the Android Support repository for building flexible and efficient layouts. The Layout Editor uses constraints to determine the position of a UI element within the layout.

Learn how you can use Constraint Layout to build beautiful layouts with a flat hierarchy. We'll also explore Constraint Sets, which allow you to build smooth transition by using multiple Constraint Layout files.

Transcript

1. Constraint Layout Constraint Layout 1
2. Constraint Layout Constraint Layout 2
3. Constraint Layout Constraint Layout RelativeLayout supercharged to the next level 2
4. Constraint Layout Constraint Layout RelativeLayout supercharged to the next level Apply constraints with respect to each other 2
5. Constraint Layout Constraint Layout RelativeLayout supercharged to the next level Apply constraints with respect to each other Helper views such as Barriers, Groups 2
6. Constraint Layout Constraint Layout RelativeLayout supercharged to the next level Apply constraints with respect to each other Helper views such as Barriers, Groups Animation Support 2
7. Constraint Layout Constraint Layout RelativeLayout supercharged to the next level Apply constraints with respect to each other Helper views such as Barriers, Groups Animation Support Keep a flat hierarchy of views 2
8. Constraints Constraints 3
9. Position Constraint Position Constraint 4
10. Position Constraint Position Constraint layout_constraintXXX_toXXXof 4
11. Position Constraint Position Constraint layout_constraintXXX_toXXXof Horizontal: Left, Right, Start, End 4
12. Position Constraint Position Constraint layout_constraintXXX_toXXXof Horizontal: Left, Right, Start, End Vertical: Top, Bottom, Baseline 4
13. Position Constraint Position Constraint layout_constraintXXX_toXXXof Horizontal: Left, Right, Start, End Vertical: Top, Bottom, Baseline w.r.t `parent` or another view 4
14. Position Constraint Position Constraint 5
15. Position Constraint Position Constraint 5
16. Position Constraint Position Constraint app:layout_constraintLeft_toLeftOf="parent" 5
17. Position Constraint Position Constraint app:layout_constraintLeft_toLeftOf="parent" 5
18. Position Constraint Position Constraint 6
19. Position Constraint Position Constraint 6
20. Position Constraint Position Constraint app:layout_constraintRight_toRightOf="parent" 6
21. Position Constraint Position Constraint app:layout_constraintRight_toRightOf="parent" 6
22. Position Constraint Position Constraint 7
23. Position Constraint Position Constraint 7
24. Position Constraint Position Constraint <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="B" android:layout_margin="8dp" app:layout_constraintLeft_toRightOf="@id/A" /> 7
25. Position Constraint Position Constraint <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="B" android:layout_margin="8dp" app:layout_constraintLeft_toRightOf="@id/A" /> A B 7
26. Position Constraint Position Constraint <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="B" android:layout_margin="8dp" app:layout_constraintLeft_toRightOf="@id/A" /> A B 7
27. Position Constraint Position Constraint 8
28. Position Constraint Position Constraint 8
29. Position Constraint Position Constraint <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" android:text="A" app:layout_constraintTop_toTopOf="parent"/> 8
30. Position Constraint Position Constraint <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" android:text="A" app:layout_constraintTop_toTopOf="parent"/> A 8
31. Position Constraint Position Constraint <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" android:text="A" app:layout_constraintTop_toTopOf="parent"/> A 8
32. Position Constraint Position Constraint <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" android:text="A" app:layout_constraintTop_toTopOf="parent"/> A Left margin not respected 8
33. Dimension Constraint Dimension Constraint 9
34. Dimension Constraint Dimension Constraint 9
35. Dimension Constraint Dimension Constraint <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="A" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/> 9
36. Dimension Constraint Dimension Constraint <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="A" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/> A 9
37. Dimension Constraint Dimension Constraint 10
38. Dimension Constraint Dimension Constraint 10
39. Dimension Constraint Dimension Constraint <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:text="A" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/> 10
40. Dimension Constraint Dimension Constraint <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:text="A" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/> A 10
41. Dimension Constraint Dimension Constraint 11
42. Dimension Constraint Dimension Constraint 11
43. Dimension Constraint Dimension Constraint <TextView android:layout_width="0dp" android:layout_height="0dp" android:text="A" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/> 11
44. Dimension Constraint Dimension Constraint <TextView android:layout_width="0dp" android:layout_height="0dp" android:text="A" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/> A 11
45. Centre Positioning Centre Positioning 12
46. Centre Positioning Centre Positioning 12
47. Centre Positioning Centre Positioning android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" 12
48. Centre Positioning Centre Positioning android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" 0.5 12
49. Positioning - Bias Positioning - Bias 13
50. Positioning - Bias Positioning - Bias 13
51. Positioning - Bias Positioning - Bias android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintVertical_bias="0.3" 13
52. Positioning - Bias Positioning - Bias android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintVertical_bias="0.3" 0.3 13
53. Positioning - Bias Positioning - Bias android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintVertical_bias="0.3" 0.3 13
54. Percent Dimension Percent Dimension 14
55. Percent Dimension Percent Dimension 14
56. Percent Dimension Percent Dimension android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" 14
57. Percent Dimension Percent Dimension android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" 14
58. Percent Dimension Percent Dimension android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintWidth_percent="0.5" 14
59. Percent Dimension Percent Dimension android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintWidth_percent="0.5" 14
60. Max and Min Size Max and Min Size 15
61. Max and Min Size Max and Min Size 15
62. Max and Min Size Max and Min Size android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintWidth_max="150dp" 15
63. Max and Min Size Max and Min Size android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintWidth_max="150dp" 15
64. Trick with constraints Trick with constraints 16
65. Trick with constraints Trick with constraints 16
66. Trick with constraints Trick with constraints 16
67. <ImageView android:id="@+id/BlueBlock" android:layout_width="0dp" android:layout_height="200dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" /> <ImageView android:id="@+id/greenBlock" android:layout_width="50dp" android:layout_height="50dp" app:layout_constraintEnd_toEndOf="@id/BlueBlock"/> Trick with constraints Trick with constraints 16
68. <ImageView android:id="@+id/BlueBlock" android:layout_width="0dp" android:layout_height="200dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" /> <ImageView android:id="@+id/greenBlock" android:layout_width="50dp" android:layout_height="50dp" app:layout_constraintEnd_toEndOf="@id/BlueBlock"/> <ImageView android:id="@+id/BlueBlock" android:layout_width="0dp" android:layout_height="200dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" /> <ImageView android:id="@+id/greenBlock" android:layout_width="50dp" android:layout_height="50dp" app:layout_constraintEnd_toEndOf="@id/BlueBlock" app:layout_constraintTop_toBottomOf="@id/BlueBlock" app:layout_constraintBottom_toBottomOf="@id/BlueBlock"/> Trick with constraints Trick with constraints 16
69. Visiblity Constraint Visiblity Constraint 17
70. Visiblity Constraint Visiblity Constraint <ImageView android:id="@+id/BlueBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="8dp" app:layout_constraintStart_toStartOf="parent" /> <ImageView android:id="@+id/greenBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="16dp" app:layout_constraintLeft_toRightOf="@id/BlueBlock" /> 17
71. Visiblity Constraint Visiblity Constraint <ImageView android:id="@+id/BlueBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="8dp" app:layout_constraintStart_toStartOf="parent" /> <ImageView android:id="@+id/greenBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="16dp" app:layout_constraintLeft_toRightOf="@id/BlueBlock" /> A B 17
72. Visiblity Constraint Visiblity Constraint <ImageView android:id="@+id/BlueBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="8dp" app:layout_constraintStart_toStartOf="parent" /> <ImageView android:id="@+id/greenBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="16dp" app:layout_constraintLeft_toRightOf="@id/BlueBlock" /> A B <ImageView android:id="@+id/BlueBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="8dp" android:visibility="gone" app:layout_constraintStart_toStartOf="parent" /> <ImageView android:id="@+id/greenBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="16dp" app:layout_constraintLeft_toRightOf="@id/BlueBlock" /> B 17
73. Visiblity Constraint Visiblity Constraint <ImageView android:id="@+id/BlueBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="8dp" app:layout_constraintStart_toStartOf="parent" /> <ImageView android:id="@+id/greenBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="16dp" app:layout_constraintLeft_toRightOf="@id/BlueBlock" /> A B <ImageView android:id="@+id/BlueBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="8dp" android:visibility="gone" app:layout_constraintStart_toStartOf="parent" /> <ImageView android:id="@+id/greenBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="16dp" app:layout_constraintLeft_toRightOf="@id/BlueBlock" /> B <ImageView android:id="@+id/BlueBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="8dp" android:visibility="gone" app:layout_constraintStart_toStartOf="parent" /> <ImageView android:id="@+id/greenBlock" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginLeft="16dp" app:layout_goneMarginLeft="8dp" app:layout_constraintLeft_toRightOf="@id/BlueBlock" /> B 17
74. Chains Chains 18
75. Chains Chains Group views 18
76. Chains Chains Group views Bi-directional constraints 18
77. Chains Chains Group views Bi-directional constraints A B Chain 18
78. Chains Chains Group views Bi-directional constraints Chain head A B Chain 18
79. Chain Styles Chain Styles 19
80. Chain Styles Chain Styles Spread 19
81. Chain Styles Chain Styles Spread Spread Inside 19
82. Chain Styles Chain Styles Spread Spread Inside Weighted 19
83. Chain Styles Chain Styles Spread Spread Inside Weighted Packed 19
84. Barrier Barrier 20
85. Barrier Barrier A wonderful example Another example Example 20
86. <androidx.constraintlayout.widget.Barrier android:id="@+id/barrier" app:barrierDirection="right" app:constraint_referenced_ids="tv1,tv2,tv3"/> Barrier Barrier A wonderful example Another example Example Barrier 20
87. <androidx.constraintlayout.widget.Barrier android:id="@+id/barrier" app:barrierDirection="right" app:constraint_referenced_ids="tv1,tv2,tv3"/> <androidx.constraintlayout.widget.Barrier android:id="@+id/barrier" app:barrierDirection="right" app:constraint_referenced_ids="tv1,tv2,tv3"/> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:src="@color/colorAccent" app:layout_constraintStart_toEndOf="@+id/barrier" /> Barrier Barrier A wonderful example Another example Example Barrier 20
88. Guideline Guideline 21
89. Guideline Guideline Just a vertical or horizontal line 21
90. Guideline Guideline Just a vertical or horizontal line Marked as Gone so not really shown to the user 21
91. Guideline Guideline Just a vertical or horizontal line Marked as Gone so not really shown to the user Acts as a helper to place views 21
92. Guideline Guideline Just a vertical or horizontal line Marked as Gone so not really shown to the user Acts as a helper to place views Can be in percent or fixed value 21
93. Guideline Guideline Just a vertical or horizontal line Marked as Gone so not really shown to the user Acts as a helper to place views Can be in percent or fixed value <android.support.constraint.Guideline android:id="@+id/guideline" app:layout_constraintGuide_begin="100dp" android:orientation="vertical"/> <Button android:text="Button" app:layout_constraintLeft_toLeftOf="@+id/guideline" app:layout_constraintTop_toTopOf="parent" /> 21
94. Group Group 22
95. Group Group Group views together 22
96. Group Group Group views together Control their visibility 22
97. Group Group Group views together Control their visibility Views can belong to more than one group 22
98. Group Group Group views together Control their visibility Views can belong to more than one group Last one in XML order wins 22
99. Group Group Group views together Control their visibility Views can belong to more than one group Last one in XML order wins <android.support.constraint.Group android:id="@+id/group" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="visible" app:constraint_referenced_ids="button4,button9" /> 22
100. Layout Editor Demo Layout Editor Demo 23
101. Constraint Set Constraint Set 24
102. Constraint Set Constraint Set Defines the set of constraints applied to views 24
103. Constraint Set Constraint Set Defines the set of constraints applied to views Can be applied to a ConstraintLayout 24
104. Constraint Set Constraint Set Defines the set of constraints applied to views Can be applied to a ConstraintLayout Can be used to create animations 24
105. Constraint Set Constraint Set 25
106. <!-- activity_main.xml --> <android.support.constraint.ConstraintLayout ...> <ImageView android:id="@+id/image" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" ... /> <Button ... /> </android.support.constraint.ConstraintLayout> Constraint Set Constraint Set 25
107. <!-- activity_main.xml --> <android.support.constraint.ConstraintLayout ...> <ImageView android:id="@+id/image" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" ... /> <Button ... /> </android.support.constraint.ConstraintLayout> <!-- activity_main_alt.xml --> <android.support.constraint.ConstraintLayout ...> <ImageView android:id="@+id/image" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" ... /> <Button ... /> </android.support.constraint.ConstraintLayout> Constraint Set Constraint Set 25
108. <!-- activity_main.xml --> <android.support.constraint.ConstraintLayout ...> <ImageView android:id="@+id/image" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" ... /> <Button ... /> </android.support.constraint.ConstraintLayout> <!-- activity_main_alt.xml --> <android.support.constraint.ConstraintLayout ...> <ImageView android:id="@+id/image" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" ... /> <Button ... /> </android.support.constraint.ConstraintLayout> Constraint Set Constraint Set override fun onCreate(savedInstanceState: Bundle?) { ... val constraintSet1 = ConstraintSet() constraintSet1.clone(constraintLayout) val constraintSet2 = ConstraintSet() constraintSet2.clone(this, R.layout.activity_main_alt) var changed = false findViewById(R.id.button).setOnClickListener { TransitionManager.beginDelayedTransition(constraintLayout) val constraint = if (changed) constraintSet1 else constraintSet2 constraint.applyTo(constraintLayout) changed = !changed } } 25
109. <!-- activity_main.xml --> <android.support.constraint.ConstraintLayout ...> <ImageView android:id="@+id/image" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" ... /> <Button ... /> </android.support.constraint.ConstraintLayout> <!-- activity_main_alt.xml --> <android.support.constraint.ConstraintLayout ...> <ImageView android:id="@+id/image" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" ... /> <Button ... /> </android.support.constraint.ConstraintLayout> Constraint Set Constraint Set override fun onCreate(savedInstanceState: Bundle?) { ... val constraintSet1 = ConstraintSet() constraintSet1.clone(constraintLayout) val constraintSet2 = ConstraintSet() constraintSet2.clone(this, R.layout.activity_main_alt) var changed = false findViewById(R.id.button).setOnClickListener { TransitionManager.beginDelayedTransition(constraintLayout) val constraint = if (changed) constraintSet1 else constraintSet2 constraint.applyTo(constraintLayout) changed = !changed } } 25
110. Constraint Set - Duplicate Constraint Set - Duplicate XML? XML? 26
111. Constraint Set - Duplicate Constraint Set - Duplicate XML? XML? Omit non styling attributes from transition XML 26
112. Constraint Set - Duplicate Constraint Set - Duplicate XML? XML? Omit non styling attributes from transition XML Constraint set works on constraints and not styles 26
113. Constraint Set - Duplicate Constraint Set - Duplicate XML? XML? Omit non styling attributes from transition XML Constraint set works on constraints and not styles Create constraint set in code 26
114. Codelab Codelab https://codelabs.developers.google.com/c odelabs/constraint-layout/index.html 27
115. Constraint Set CodeLab Constraint Set CodeLab 28