BABBQ16 ConstraintLayout presentation

This talk was presented at the Big Android BBQ 2016.

It describes the constraints model used by ConstraintLayout, a new android layout we introduced at Google IO'16, and the different results you can achieve.

Transcript

1. ConstraintLayout Nicolas Roard Google @camaelon +NicolasRoard John Hoford Google @johnhoford +JohnHoford
2. ConstraintLayout
3. Why?
4. Layout Editor
5. Why creating a new layout?
6. Why creating a new layout? Visual Editor
7. Why creating a new layout? Visual Editor Flexible
8. Why creating a new layout? Visual Editor Flexible Flat layout
9. Why creating a new layout? Visual Editor Flexible Flat layout Unbundled
10. Why creating a new layout? Visual Editor Flexible Flat layout Unbundled Available from API level 9 (99.9% devices)
11. Basics
12. Edge Constraints Widget
13. Edge Constraints Widget
14. Edge Constraints Widget
15. Edge Constraints Widget
16. Edge Constraints Widget Margin
17. Widget Center Constraints
18. Widget Center Constraints
19. Widget Center Constraints
20. RelativeLayout
21. 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>
22. 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>
23. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/a 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>
24. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/a 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>
25. Nested Layouts
26. Nested Layouts
27. Nested Layouts Horizontal LinearLayout
28. Nested Layouts Vertical LinearLayout
29. Nested Layouts TV TV TV TV TV TV TextViews
30. Nested Layouts
31. Nested Layouts change height
32. Nested Layouts
33. Nested Layouts measures
34. Nested Layouts measures
35. Nested Layouts measures
36. Nested Layouts measures
37. Nested Layouts measures
38. Nested Layouts measures
39. Nested Layouts measures
40. Nested Layouts measures
41. Nested Layouts measures
42. Nested Layouts measures
43. Nested Layouts measures
44. Nested Layouts measures
45. Nested Layouts measures
46. Nested Layouts measures
47. I have concerns
48. Performance
49. Performance Similar to RelativeLayout on old devices (dalvik…)
50. Performance Similar to RelativeLayout on old devices (dalvik…) Currently a bit slower with art, but not meaningful
51. Performance Similar to RelativeLayout on old devices (dalvik…) Currently a bit slower with art, but not meaningful Flattening gains
52. Performance Similar to RelativeLayout on old devices (dalvik…) Currently a bit slower with art, but not meaningful Flattening gains Measure your app!
53. Performance Similar to RelativeLayout on old devices (dalvik…) Currently a bit slower with art, but not meaningful Flattening gains Measure your app! Send us examples :)
54. Size / Memory
55. Size / Memory Current library ~130Kb
56. Size / Memory Current library ~130Kb Low memory usage
57. Measures Wrap Content Match Constraints
58. Going forward
59. Going forward 10 releases since Google IO
60. Going forward 10 releases since Google IO Default in Android Studio 2.3
61. Going forward 10 releases since Google IO Default in Android Studio 2.3 Open Source
62. Going forward 10 releases since Google IO Default in Android Studio 2.3 Open Source Support Existing Layouts
63. Going forward 10 releases since Google IO Default in Android Studio 2.3 Open Source Support Existing Layouts XML vs Visual Editor
64. Going forward 10 releases since Google IO Default in Android Studio 2.3 Open Source Support Existing Layouts XML vs Visual Editor
65. Constraints Model
66. Edge Constraints
67. Edge Constraints Widget
68. Edge Constraints Widget
69. Edge Constraints Widget
70. Edge Constraints Widget
71. Edge Constraints app:layout_constraintLeft_toLeftOf="parent" Widget
72. Edge Constraints Widget
73. Edge Constraints Widget Left / Start
74. Edge Constraints Widget Left / Start Right / End
75. Edge Constraints Widget Left / Start Right / End Top
76. Edge Constraints Widget Left / Start Right / End Top Bottom
77. Edge Constraints Widget Left / Start Right / End Top Bottom Baseline
78. layout_constraint<…>_to<…>
79. parent @id
80. Center Constraints
81. Widget Center Constraints
82. Widget Center Constraints
83. Widget Center Constraints
84. Widget Center Constraints app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"
85. Center Constraints + Bias Widget
86. Center Constraints + Bias Widget 0.5
87. Center Constraints + Bias Widget 0.2
88. Center Constraints + Bias Widget 0.6
89. Center Constraints + Bias Widget 0.6 app:layout_constraintHorizontal_bias="0.3"
90. Dimension Constraints
91. Dimension Constraints
92. Dimension Constraints fixed dimension
93. Dimension Constraints fixed dimension wrap_content
94. Dimension Constraints fixed dimension wrap_content match_parent
95. Dimension Constraints fixed dimension wrap_content
96. Dimension Constraints fixed dimension wrap_content match_constraint
97. Dimension Constraints fixed dimension wrap_content match_constraint ratio
98. Dimension Constraints fixed dimension wrap_content match_constraint ratio min width/height (on CL)
99. Dimension Constraints fixed dimension wrap_content match_constraint ratio min width/height (on CL)
100. match_constraint Widget
101. match_constraint Widget Widget
102. Ratio
103. Ratio app:layout_constraintDimensionRatio="h,1:1"
104. Gone
105. View: Gone A B
106. View: Gone A B View marked as Gone
107. View: Gone B
108. View: Gone Margin B
109. View: Gone Margin B app:layout_goneMarginLeft="60dp"
110. View: Gone Margin B app:layout_goneMarginLeft="60dp"
111. Chains
112. Chains A B
113. Chains A B bi-directional constraints
114. Chains A B Chain bi-directional constraints
115. <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
116. Chains A B C
117. Chains A B C Head
118. Chains A B C Head Contains attributes affecting the chain
119. Chain Styles A B C Spread A B C Spread Inside A B C Weighted A B C Packed
120. Chain Styles A B C Spread A B C Spread Inside A B C Weighted A B C Packed + bias
121. app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintHorizontal_chainStyle="spread_inside" app:layout_constraintHorizontal_chainStyle="packed" Chains
122. Guidelines
123. <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
124. How Does It Work
125. How Does It Work Linear Equations Solver
126. How Does It Work Constraints Model Linear Equations Solver
127. How Does It Work Constraints Model Layout Editor Linear Equations Solver
128. How Does It Work Constraints Model Inference Layout Editor Linear Equations Solver
129. How Does It Work Linear Equations Solver Constraints Model Direct Resolution Inference Layout Editor Linear Equations Solver
130. Views vs Layout
131. Views vs Layouts Decoupling Views from Layouts Animations Performance
132. Demo
133. Demo Presentation of the UI designer
134. Demo Presentation of the UI designer Manual constraints
135. Demo Presentation of the UI designer Manual constraints Auto connect
136. Demo Presentation of the UI designer Manual constraints Auto connect Inference
137. Demo Presentation of the UI designer Manual constraints Auto connect Inference Alignment tools + constraints creation
138. Demo Presentation of the UI designer Manual constraints Auto connect Inference Alignment tools + constraints creation Chains
139. Demo Presentation of the UI designer Manual constraints Auto connect Inference Alignment tools + constraints creation Chains Ratio
140. Demo Presentation of the UI designer Manual constraints Auto connect Inference Alignment tools + constraints creation Chains Ratio ConstraintSet + Animations
141. Next steps
142. Next steps
143. Next steps Virtual Viewgroups
144. Next steps Virtual Viewgroups Conversion Tools
145. Next steps Virtual Viewgroups Conversion Tools Helper objects
146. Next steps Virtual Viewgroups Conversion Tools Helper objects Animation
147. Next steps Virtual Viewgroups Conversion Tools Helper objects Animation Custom Variables
148. Connect Nicolas Roard @camaelon +NicolasRoard John Hoford @johnhoford +JohnHoford Documentation https://developer.android.com/reference/ android/support/constraint/package- summary.html