ConstraintLayout presentation

ConstraintLayout presentation at Android SF meetup

Transcript

1. ConstraintLayout Nicolas Roard Google @camaelon +NicolasRoard
2. ConstraintLayout
3. Why?
4. Visual Editor
5. Why did we create a new layout?
6. Why did we create a new layout? Visual Editor
7. Why did we create a new layout? Visual Editor Flexible
8. Why did we create a new layout? Visual Editor Flexible Flat hierarchy
9. Why did we create a new layout? Visual Editor Flexible Flat hierarchy Unbundled
10. Why did we create a new layout? Visual Editor Flexible Flat hierarchy Unbundled Available starting API 9 (99.9% of devices)
11. RelativeLayout
12. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http:// schemas.android.com/apk/res/android"
 android:layout_width="match_parent" android:layout_height="match_parent">
 
 <Button
 android:id="@+id/button6"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_alignParentEnd="true"
 android:layout_alignParentRight="true"
 android:layout_marginBottom="34dp"
 android:layout_marginEnd="24dp"
 android:layout_marginRight="24dp"
 android:text="Button" />
 </RelativeLayout>
13. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http:// schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <Button
 android:id="@+id/button6"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_alignParentEnd="true"
 android:layout_alignParentRight="true"
 android:layout_marginBottom="34dp"
 android:layout_marginEnd="24dp"
 android:layout_marginRight="24dp"
 android:text="Button" />
 </RelativeLayout>
14. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/andr xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <Button
 android:id="@+id/button12"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Button"
 app:layout_constraintBottom_toBottomOf="parent"
 android:layout_marginBottom="34dp"
 android:layout_marginEnd="24dp"
 app:layout_constraintRight_toRightOf="parent"
 android:layout_marginRight="24dp" />
 </android.support.constraint.ConstraintLayout>
15. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/andr xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <Button
 android:id="@+id/button12"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Button"
 app:layout_constraintBottom_toBottomOf="parent"
 android:layout_marginBottom="34dp"
 android:layout_marginEnd="24dp"
 app:layout_constraintRight_toRightOf="parent"
 android:layout_marginRight="24dp" />
 </android.support.constraint.ConstraintLayout>
16. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/andr xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
 <Button
 android:id="@+id/button12"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Button"
 app:layout_constraintBottom_toBottomOf="parent"
 android:layout_marginBottom="34dp"
 android:layout_marginEnd="24dp"
 app:layout_constraintRight_toRightOf="parent"
 android:layout_marginRight="24dp" />
 </android.support.constraint.ConstraintLayout>
17. Nested Layouts
18. Nested Layouts
19. Nested Layouts Horizontal LinearLayout
20. Nested Layouts Vertical LinearLayout
21. Nested Layouts TV TV TV TV TV TV TextViews
22. Nested Layouts
23. height changes Nested Layouts
24. Nested Layouts
25. measures Nested Layouts
26. measures Nested Layouts
27. measures Nested Layouts
28. measures Nested Layouts
29. measures Nested Layouts
30. measures Nested Layouts
31. measures Nested Layouts
32. measures Nested Layouts
33. measures Nested Layouts
34. measures Nested Layouts
35. measures Nested Layouts
36. measures Nested Layouts
37. measures Nested Layouts
38. measures Nested Layouts
39. height changes Nested Layouts
40. Nested Layouts
41. Nested Layouts measures
42. Nested Layouts measures
43. Nested Layouts measures
44. I have concerns
45. Performance
46. Performance For now, similar to RelativeLayout
47. Performance For now, similar to RelativeLayout … but gains due to flat hierarchies
48. Performance For now, similar to RelativeLayout … but gains due to flat hierarchies On a recent device, great performances
49. Performance For now, similar to RelativeLayout … but gains due to flat hierarchies On a recent device, great performances Measure your layouts!
50. Performance For now, similar to RelativeLayout … but gains due to flat hierarchies On a recent device, great performances Measure your layouts! Send us examples :)
51. Impact of measures
52. Impact of measures Wrap Content or fixed size
53. Impact of measures Wrap Content or fixed size single measure pass
54. Impact of measures Wrap Content or fixed size Match Constraints single measure pass
55. Impact of measures Wrap Content or fixed size Match Constraints single measure pass two measure passes
56. Size & Memory
57. Size & Memory The unbundled library is ~130 ko
58. Size & Memory The unbundled library is ~130 ko Low memory occupation (sparse matrix)
59. How does it work?
60. How does it work? Linear Equation Solver
61. How does it work? Constraints Model Linear Equation Solver
62. How does it work? Constraints Model Linear Equation Solver Visual Editor
63. How does it work? Constraints Model Inference Engine Linear Equation Solver Visual Editor
64. How does it work? Linear Equation Solver Constraints Model Direct Resolution Inference Engine Linear Equation Solver Visual Editor
65. How far are we
66. How far are we 12 releases since Google IO’16
67. How far are we 12 releases since Google IO’16 Default Layout in Android Studio 2.3 templates
68. How far are we 12 releases since Google IO’16 Default Layout in Android Studio 2.3 templates Open Source
69. How far are we 12 releases since Google IO’16 Default Layout in Android Studio 2.3 templates Open Source Building better support for other viewgroups in the editor
70. How far are we 12 releases since Google IO’16 Default Layout in Android Studio 2.3 templates Open Source Building better support for other viewgroups in the editor XML vs Visual Editor
71. How far are we 12 releases since Google IO’16 Default Layout in Android Studio 2.3 templates Open Source Building better support for other viewgroups in the editor XML vs Visual Editor
72. Constraints Model
73. Side Constraints
74. Side Constraints Widget
75. Side Constraints Widget
76. Side Constraints Widget
77. Side Constraints Widget
78. Side Constraints app:layout_constraintLeft_toLeftOf="parent" Widget
79. Side Constraints Widget
80. Side Constraints Widget Left / Start
81. Side Constraints Widget Left / Start Right / End
82. Side Constraints Widget Left / Start Right / End Top
83. Side Constraints Widget Left / Start Right / End Top Bottom
84. Side Constraints Widget Left / Start Right / End Top Bottom Baseline
85. layout_constraint<…>_to<…>
86. parent @id
87. Center Constraints
88. Widget Center Constraints
89. Widget Center Constraints
90. Widget Center Constraints
91. Widget Center Constraints app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"
92. Center + Bias Widget
93. Center + Bias Widget 0.5
94. Center + Bias Widget 0.2
95. Center + Bias Widget 0.6
96. Center + Bias Widget 0.6 app:layout_constraintHorizontal_bias="0.6"
97. Dimension Constraints
98. Dimension Constraints
99. Dimension Constraints dimension fixe
100. Dimension Constraints dimension fixe wrap_content
101. Dimension Constraints dimension fixe wrap_content match_parent
102. Dimension Constraints dimension fixe wrap_content
103. Dimension Constraints dimension fixe wrap_content match_constraint
104. Dimension Constraints dimension fixe wrap_content match_constraint ratio
105. Dimension Constraints dimension fixe wrap_content match_constraint ratio min width/height (sur CL)
106. Dimension Constraints dimension fixe wrap_content match_constraint ratio min width/height (sur CL)
107. match_constraint Widget
108. match_constraint Widget Widget
109. Ratio Widget
110. Ratio app:layout_constraintDimensionRatio="h,1:1" Widget
111. Ratio app:layout_constraintDimensionRatio="h,1:1" Widget Widget
112. Gone
113. View: Gone A B
114. View: Gone A B View set to “Gone”
115. View: Gone B
116. View: Gone Margin B
117. View: Gone Margin B app:layout_goneMarginLeft="60dp"
118. View: Gone Margin B app:layout_goneMarginLeft="60dp"
119. Chains
120. Chains A B
121. Chains A B bi-directional constraints
122. Chains A B Chain bi-directional constraints
123. <Button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Button"
 tools:layout_editor_absoluteY="10dp"
 app:layout_constraintRight_toLeftOf="@+id/button2"
 app:layout_constraintLeft_toLeftOf="parent" />
 
 <Button
 android:id="@+id/button2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Button"
 tools:layout_editor_absoluteY="10dp"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintLeft_toRightOf="@+id/button1" /> Chains
124. Chains A B C
125. Chains A B C Head of the Chain
126. Chains A B C Head of the Chain Contains attributes impacting the chain
127. Different Chain Styles A B C Spread A B C Spread Inside A B C Weighted A B C Packed
128. Different Chain Styles A B C Spread A B C Spread Inside A B C Weighted A B C Packed + bias
129. app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintHorizontal_chainStyle="spread_inside" app:layout_constraintHorizontal_chainStyle="packed" Chains
130. Guidelines
131. Guidelines Widget
132. Guidelines Widget
133. Guidelines Widget
134. Guidelines Widget
135. Guidelines
136. Guidelines
137. Guidelines
138. Guidelines %
139. <android.support.constraint.Guideline
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/guideline"
 app:layout_constraintGuide_begin="20dp"
 android:orientation="vertical" /> Guideline
140. ConstraintSet
141. ConstraintSet
142. ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set ConstraintSet
143. ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set ConstraintSet 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
144. ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set ConstraintSet 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);
145. Demo
146. Next!
147. Next
148. Next More flexibility with match_constraints New helper objects Virtual Viewgroups Animation Variables Conversion Tools
149. Contact Nicolas Roard @camaelon +NicolasRoard Documentation https://developer.android.com/ reference/android/support/ constraint/package-summary.html File Bugs https://code.google.com/p/android/issues/entry