Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Tools & ConstraintLayout

Design Tools & ConstraintLayout

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

Nicolas Roard

October 20, 2017
Tweet

More Decks by Nicolas Roard

Other Decks in Programming

Transcript

  1. Android Layouts • Position widgets • Need to adapt to

    varying conditions: • screen size • density • languages • Narrow focused, combinable layouts
  2. ConstraintLayout • Expressive Layout Manager • Flat Layouts • Deep

    integration with Android Studio + Layout Editor • Unbundled Library • Compatible with 99% of devices
  3. <RelativeLayout > <ImageView /> <ImageView /> <RelativeLayout > <TextView />

    <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <TextView /> </RelativeLayout> <LinearLayout > <Button /> <Button /> </LinearLayout> </RelativeLayout>
  4. <RelativeLayout > <ImageView /> <ImageView /> <RelativeLayout > <TextView />

    <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <TextView /> </RelativeLayout> <LinearLayout > <Button /> <Button /> </LinearLayout> </RelativeLayout>
  5. The Tetris Model • Change is hard • Impose limits

    for animation / transitions • Not conductive to a great design tool experience • Performance can become an issue
  6. 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
  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> <android.support.constraint.ConstraintLayout> <ImageView /> <ImageView /> <TextView /> <EditText /> <TextView /> <TextView /> <EditText /> <Button /> <Button /> <TextView /> </android.support.constraint.ConstraintLayout>
  8. Simplex • Linear Programming • Invented by Georges Dantzig in

    1947 • Large, empty matrices representing the equations
  9. 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
  10. 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?…
  11. 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
  12. Constraints Model • Simple model — relative positioning, centering •

    No Equations exposed • Evolving (bias, new dimension constraints, etc.)
  13. 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…
  14. 1

  15. 2

  16. 3

  17. 4

  18. Inference • Based on probability a model for connections •

    Constrains unconstrained views • Does not move views (not an alignment tool)
  19. Inference • Based on probability a model for connections •

    Constrains unconstrained views • Does not move views (not an alignment tool)
  20. Inference • Based on probability a model for connections •

    Constrains unconstrained views • Does not move views (not an alignment tool)
  21. Inference • Based on probability a model for connections •

    Constrains unconstrained views • Does not move views (not an alignment tool)
  22. Useful shortcuts • <esc> to select a parent group •

    <ctrl><shift> to switch between XML and Design mode • double-click on included elements <left> <right>
  23. 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
  24. Sample Data • Limited Default Adapter • Specify content •

    tools:listitem • sample data! tools:text=“@tools:sample/full_names” tools:text=“@tools:sample/us_phones”
  25. Sample Data • Limited Default Adapter • Specify content •

    tools:listitem • sample data! • create a sample data folder
  26. Sample Data • Limited Default Adapter • Specify content •

    tools:listitem • sample data! • create a sample data folder • add a color file
  27. Sample Data • Limited Default Adapter • Specify content •

    tools:listitem • sample data! • create a sample data folder • add a color file
  28. Sample Data • Baked-in data types • date, names, phone

    numbers… • JSON files • Resources in sample data folder • Text • Color • Image (collections if in folder)
  29. 1.0 • Relative positioning • Center positioning & bias •

    Guidelines - helper objects • Chains • Dimension constraints: min/max, Ratio • ConstraintSet
  30. Different Chain Styles A B C Spread A B C

    Spread Inside A B C Weighted A B C Packed
  31. Different Chain Styles A B C Spread A B C

    Spread Inside A B C Weighted A B C Packed + bias
  32. 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
  33. 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
  34. 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”
  35. beta 3 1.1.0 maven { url "https://maven.google.com" } dependencies {

    compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3' }
  36. Example 1 1. Center connection 2. Bias set to 0

    3. app:layout_constrainedWidth=“true”
  37. 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”
  38. 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
  39. Case 4 • Using nested ConstraintLayout can be a powerful

    layout tool • Think: layout components
  40. ConstraintSet • Separate views from the layout rules • Encapsulate

    all constraints of a layout in a single object
  41. 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
  42. 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
  43. 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);
  44. 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);
  45. Motion • Flat Hierarchy == No clipping issues • Scene

    Graph • ConstraintSet == Begin and End Keyframe
  46. 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);
  47. 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);
  48. 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);
  49. Custom Transitions • ConstraintSet • Custom TransitionSet • Support Library

    : physics animations TransitionManager.beginDelayedTransition(cl, new MyCustomAnimationSet())
  50. Custom Transitions • ConstraintSet • Custom TransitionSet • Support Library

    : physics animations TransitionManager.beginDelayedTransition(cl, new MyCustomAnimationSet())
  51. What’s next • More performance optimizations • experimental background resolution

    • segmentation of constraints • broadening the optimizer surface
  52. What’s next • ConstraintHelper • Chains • Layers • Custom

    • Motion • better motion control • gesture support
  53. 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!)
  54. 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!)