Design Tools & ConstraintLayout

Design Tools & ConstraintLayout

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

B9012970f22b84c5b344ffa6f8a884d5?s=128

Nicolas Roard

October 20, 2017
Tweet

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>
  8. None
  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
  13. None
  14. None
  15. None
  16. None
  17. None
  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
  45. None
  46. 1

  47. 2

  48. 3

  49. 4

  50. None
  51. None
  52. None
  53. None
  54. None
  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
  162. None
  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);
  174. None
  175. None
  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