Design Tools & ConstraintLayout

Presentation of Design Tools in Android Studio 3.0 and ConstraintLayout 1.1 at DevFest Nantes 2017

Transcript

1. Design Tools & ConstraintLayout +NicolasRoard @camaelon
2. ConstraintLayout
3. Android Layouts • Position widgets • Need to adapt to varying conditions: • screen size • density • languages • Narrow focused, combinable layouts
4. ConstraintLayout • Expressive Layout Manager • Flat Layouts • Deep integration with Android Studio + Layout Editor • Unbundled Library • Compatible with 99% of devices
5. Once upon a time
6. <RelativeLayout > <ImageView /> <ImageView /> <RelativeLayout > <TextView /> <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <TextView /> </RelativeLayout> <LinearLayout > <Button /> <Button /> </LinearLayout> </RelativeLayout>
7. <RelativeLayout > <ImageView /> <ImageView /> <RelativeLayout > <TextView /> <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <TextView /> </RelativeLayout> <LinearLayout > <Button /> <Button /> </LinearLayout> </RelativeLayout>
9. The Tetris Model
10. The Tetris Model • Relatively easy at first
11. The Tetris Model • Relatively easy at first • Can get very complex very quickly
12. The Tetris Model • Change is hard • Impose limits for animation / transitions • Not conductive to a great design tool experience • Performance can become an issue
18. Layout != Views
19. Flat Layouts • Layout definition is not mixed with the view hierarchy • Easy to manipulate in a graphical editor • Easy to change • Animation friendly • Keep layout computation in a single place
20. <RelativeLayout > <ImageView /> <ImageView /> <RelativeLayout > <TextView /> <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <TextView /> </RelativeLayout> <LinearLayout > <Button /> <Button /> </LinearLayout> </RelativeLayout> <android.support.constraint.ConstraintLayout> <ImageView /> <ImageView /> <TextView /> <EditText /> <TextView /> <TextView /> <EditText /> <Button /> <Button /> <TextView /> </android.support.constraint.ConstraintLayout>
21. https://android-developers.googleblog.com/2017/08/understanding-performance-benefits-of.html CL 1.0.2, Nexus 5X Measure / Layout (unit: ms, average of 100 frames)
22. Expressivity
23. Solver
24. Simplex • Linear Programming • Invented by Georges Dantzig in 1947 • Large, empty matrices representing the equations
25. Example Minimize Constrained by Z x y z s t = Basic Feasible Solution (BFS) Matrix representation (plus slack variables s & t) Pivot on z, row 2 BFS Objective row
26. Pros / Cons • Very flexible, can represent any type of layout situation • But “relatively” heavy computation compared to simple layouts • Can be more memory intensive • Specifying layout via equations?…
27. ConstraintLayout solver • Pure java • Represents the system matrix as rows of sparse arrays • Memory Efficient • Efficient incremental construction • Has to have good performances on both Dalvik and Art
28. Constraints Model
29. Constraints Model • Simple model — relative positioning, centering • No Equations exposed • Evolving (bias, new dimension constraints, etc.)
30. Constraints Model
31. Constraints Model
32. Constraints Model
33. Constraints Model
34. Constraint Layout Solver Constraints Model
35. Constraint Layout Solver Constraints Model Optimizer
36. What to Keep in Mind • match_constraint is more costly, as we need to remeasure • wrap_content, fixed dimension are cheaper • Fixed endpoints help to resolve directly, bypassing the solver • e.g match_constraint with no min/max, guidelines…
37. Android Studio
38. Visual Designer
39. Visual Designer Visualize
40. Visual Designer Visualize XML Layout file
41. Visual Designer Visualize LayoutLib XML Layout file
42. Visual Designer Visualize LayoutLib XML Layout file Layout Editor
43. Visual Designer Visualize Create LayoutLib XML Layout file Layout Editor
44. Visual Designer Visualize Create Easy to use LayoutLib XML Layout file Layout Editor
55. Tools
56. Inspector
57. Full Inspector
58. Slices of Data
59. Slices of Data Layout
60. Slices of Data Layout Dimen
61. Slices of Data Layout Dimen Strings
62. Slices of Data Layout Dimen Strings
63. Slices of Data Layout Dimen Strings
64. Slices of Data Layout Dimen Strings
65. Slices of Data Layout Dimen Strings Slices of relevant Data
66. Advanced Inspector
67. Advanced Inspector
68. Advanced Inspector
69. Advanced Inspector
70. Advanced Inspector
71. Inspector - creating constraints You can create a quick constraint by clicking on the “+” buttons
72. Inference • Based on probability a model for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
73. Inference • Based on probability a model for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
74. Inference • Based on probability a model for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
75. Inference • Based on probability a model for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
76. Tools
77. Tools
78. Useful shortcuts • <esc> to select a parent group • <ctrl><shift> to switch between XML and Design mode • double-click on included elements <left> <right>
79. Tools attributes & Sample Data
80. Tools attributes • tools: • tools:showIn • tools:layout • tools:listitem • tools:parentTag override attributes at design time shows this layout embedded in another one which layout to use for a fragment which layout for a list item define which layout to use as parent for merge tag https://developer.android.com/studio/write/tool-attributes.html
81. Sample Data • Limited Default Adapter
82. Sample Data • Limited Default Adapter • Specify content
83. Sample Data • Limited Default Adapter • Specify content • tools:listitem
84. Sample Data • Limited Default Adapter • Specify content • tools:listitem • sample data! tools:text=“@tools:sample/full_names” tools:text=“@tools:sample/us_phones”
85. Sample Data • Limited Default Adapter • Specify content • tools:listitem • sample data! • create a sample data folder
86. Sample Data • Limited Default Adapter • Specify content • tools:listitem • sample data! • create a sample data folder • add a color file
87. Sample Data • Limited Default Adapter • Specify content • tools:listitem • sample data! • create a sample data folder • add a color file
88. Sample Data • @tools:sample/lorem • @tools:sample/full_names • @tools:sample/us_phones • @tools:sample/date_mmddyyyy • @sample/colors • @sample/contacts.json/contacts/name …
89. Sample Data • Baked-in data types • date, names, phone numbers… • JSON files • Resources in sample data folder • Text • Color • Image (collections if in folder)
90. Constraints
91. 1.0 • Relative positioning • Center positioning & bias • Guidelines - helper objects • Chains • Dimension constraints: min/max, Ratio • ConstraintSet
92. Guidelines
93. Guidelines
94. B Chains A Chain bi-directional constraints
95. Different Chain Styles A B C Spread A B C Spread Inside A B C Weighted A B C Packed
96. Different Chain Styles A B C Spread A B C Spread Inside A B C Weighted A B C Packed + bias
97. Gone Behavior
98. Gone Behavior
99. Inadapted Margin
100. Inadapted Margin
101. Gone Margins
102. Gone Margins
103. Example
104. Example
105. beta 3 1.1.0
106. • Barriers beta 3 1.1.0
107. • Barriers beta 3 1.1.0
108. • Barriers beta 3 1.1.0
109. Barriers
110. Barriers
111. Barriers
112. Barriers
113. Barriers 1 2 3
114. Barriers 1 2 3 4
115. Barriers
116. Barriers
117. Barriers
118. Barriers <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection=“end” app:constraint_referenced_ids="textView1,textView2,textView3" />
119. • Barriers • Group - apply visibility to a set of widgets beta 3 1.1.0
120. Groups textview2 textview3
121. Groups <android.support.constraint.Group android:id="@+id/group2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="visible" app:constraint_referenced_ids="textView2,textView3" />
122. Groups Invisible Gone
123. • Barriers • Group • Placeholder beta 3 1.1.0 ?
124. 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
125. 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
126. • Barriers • Group • Placeholder • Percent dimensions beta 3 1.1.0
127. 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”
128. • Barriers • Group • Placeholder • Percent dimensions • Circular constraints beta 3 1.1.0
129. Circular Constraints <Button android:id="@+id/buttonA" ... /> <Button android:id="@+id/buttonB" … app:layout_constraintCircle=“@+id/buttonA" app:layout_constraintCircleRadius=“100dp" app:layout_constraintCircleAngle="45" />
130. Example Circular Menu
131. Example Circular Menu
132. Example Andrew Kelly https://medium.com/devnibbles/constraintlayout-circular- positioning-9489b11cb0e5
133. Example Andrew Kelly https://medium.com/devnibbles/constraintlayout-circular- positioning-9489b11cb0e5
134. beta 3 1.1.0 maven { url "https://maven.google.com" } dependencies { compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3' }
135. Case Studies
136. Case 1
137. Case 1 1 2
138. Case 4
139. Case 2
140. Example 1
141. Example 1
142. Example 1
143. Example 1
144. Example 1 1. Center connection 2. Bias set to 0 3. app:layout_constrainedWidth=“true”
145. Example 1
146. Case 3
147. 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”
148. 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
149. Case 4 • Flat layouts are good, but components still make sense!
150. Case 4 • Using nested ConstraintLayout can be a powerful layout tool • Think: layout components
151. ConstraintSet
152. Layout != Views
153. ConstraintLayout Views
154. ConstraintLayout Views ConstraintSet
155. ConstraintLayout Views ConstraintSet
156. ConstraintLayout Views ConstraintSet
157. ConstraintSet
158. ConstraintSet • Separate views from the layout rules
159. ConstraintSet • Separate views from the layout rules • Encapsulate all constraints of a layout in a single object
160. ConstraintSet • Separate views from the layout rules • Encapsulate all constraints of a layout in a single object • Let you apply a ConstraintSet to an existing ConstraintLayout
161. ConstraintSet • Separate views from the layout rules • Encapsulate all constraints of a layout in a single object • Let you apply a ConstraintSet to an existing ConstraintLayout • Let you switch between multiple ConstraintSet
163. ConstraintSet mConstraintSet1 = new ConstraintSet(); ConstraintSet mConstraintSet2 = new ConstraintSet();
164. ConstraintSet mConstraintSet1 = new ConstraintSet(); ConstraintSet mConstraintSet2 = new ConstraintSet(); // get constraints from layout mConstraintSet2.clone(context, R.layout.state2); setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); // get constraints from ConstraintSet mConstraintSet1.clone(mConstraintLayout);
165. ConstraintSet mConstraintSet1 = new ConstraintSet(); ConstraintSet mConstraintSet2 = new ConstraintSet(); // get constraints from layout mConstraintSet2.clone(context, R.layout.state2); setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); // get constraints from ConstraintSet mConstraintSet1.clone(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout);
166. Landscape
167. Motion
168. Motion • Flat Hierarchy == No clipping issues
169. Motion • Flat Hierarchy == No clipping issues • Scene Graph
170. Motion • Flat Hierarchy == No clipping issues • Scene Graph • ConstraintSet == Begin and End Keyframe
171. ConstraintSet mConstraintSet1 = new ConstraintSet(); ConstraintSet mConstraintSet2 = new ConstraintSet(); // get constraints from layout mConstraintSet2.clone(context, R.layout.state2); setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); // get constraints from ConstraintSet mConstraintSet1.clone(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout);
172. ConstraintSet mConstraintSet1 = new ConstraintSet(); ConstraintSet mConstraintSet2 = new ConstraintSet(); // get constraints from layout mConstraintSet2.clone(context, R.layout.state2); setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); // get constraints from ConstraintSet mConstraintSet1.clone(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout);
173. TransitionManager.beginDelayedTransition(mConstraintLayout); ConstraintSet mConstraintSet1 = new ConstraintSet(); ConstraintSet mConstraintSet2 = new ConstraintSet(); // get constraints from layout mConstraintSet2.clone(context, R.layout.state2); setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); // get constraints from ConstraintSet mConstraintSet1.clone(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout);
176. • |
177. • |
178. Custom Transitions • ConstraintSet • Custom TransitionSet • Support Library : physics animations TransitionManager.beginDelayedTransition(cl, new MyCustomAnimationSet())
179. Custom Transitions • ConstraintSet • Custom TransitionSet • Support Library : physics animations TransitionManager.beginDelayedTransition(cl, new MyCustomAnimationSet())
180. Visibility & Ripple
181. Visibility & Ripple
182. What’s next
183. What’s next • More performance optimizations • experimental background resolution • segmentation of constraints • broadening the optimizer surface
184. What’s next • ConstraintHelper • Chains • Layers • Custom • Motion • better motion control • gesture support
185. 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 (take a picture!)
186. 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 (take a picture!)
187. Thank you! http://b.android.com File bugs & requests on +NicolasRoard @camaelon