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. Design Tools
    &
    ConstraintLayout
    +NicolasRoard
    @camaelon

    View Slide

  2. ConstraintLayout

    View Slide

  3. Android Layouts
    • Position widgets
    • Need to adapt to varying conditions:
    • screen size
    • density
    • languages
    • Narrow focused, combinable layouts

    View Slide

  4. ConstraintLayout
    • Expressive Layout Manager
    • Flat Layouts
    • Deep integration with Android Studio + Layout Editor
    • Unbundled Library
    • Compatible with 99% of devices

    View Slide

  5. Once upon a time

    View Slide

























  6. View Slide

























  7. View Slide

  8. View Slide

  9. The Tetris Model

    View Slide

  10. The Tetris Model
    • Relatively easy at first

    View Slide

  11. The Tetris Model
    • Relatively easy at first
    • Can get very complex very quickly

    View Slide

  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

    View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. Layout
    !=
    Views

    View Slide

  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

    View Slide





































  20. View Slide

  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)

    View Slide

  22. Expressivity

    View Slide

  23. Solver

    View Slide

  24. Simplex
    • Linear Programming
    • Invented by Georges Dantzig in 1947
    • Large, empty matrices representing the
    equations

    View Slide

  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

    View Slide

  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?…

    View Slide

  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

    View Slide

  28. Constraints Model

    View Slide

  29. Constraints Model
    • Simple model — relative positioning, centering
    • No Equations exposed
    • Evolving (bias, new dimension constraints, etc.)

    View Slide

  30. Constraints Model

    View Slide

  31. Constraints Model

    View Slide

  32. Constraints Model

    View Slide

  33. Constraints Model

    View Slide

  34. Constraint Layout
    Solver
    Constraints Model

    View Slide

  35. Constraint Layout
    Solver
    Constraints Model
    Optimizer

    View Slide

  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…

    View Slide

  37. Android Studio

    View Slide

  38. Visual Designer

    View Slide

  39. Visual Designer
    Visualize

    View Slide

  40. Visual Designer
    Visualize XML Layout file

    View Slide

  41. Visual Designer
    Visualize
    LayoutLib
    XML Layout file

    View Slide

  42. Visual Designer
    Visualize
    LayoutLib
    XML Layout file
    Layout Editor

    View Slide

  43. Visual Designer
    Visualize
    Create LayoutLib
    XML Layout file
    Layout Editor

    View Slide

  44. Visual Designer
    Visualize
    Create
    Easy to use
    LayoutLib
    XML Layout file
    Layout Editor

    View Slide

  45. View Slide

  46. 1

    View Slide

  47. 2

    View Slide

  48. 3

    View Slide

  49. 4

    View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. Tools

    View Slide

  56. Inspector

    View Slide

  57. Full Inspector

    View Slide

  58. Slices of Data

    View Slide

  59. Slices of Data
    Layout

    View Slide

  60. Slices of Data
    Layout Dimen

    View Slide

  61. Slices of Data
    Layout Dimen Strings

    View Slide

  62. Slices of Data
    Layout Dimen Strings

    View Slide

  63. Slices of Data
    Layout Dimen Strings

    View Slide

  64. Slices of Data
    Layout Dimen Strings

    View Slide

  65. Slices of Data
    Layout Dimen Strings
    Slices of relevant
    Data

    View Slide

  66. Advanced Inspector

    View Slide

  67. Advanced Inspector

    View Slide

  68. Advanced Inspector

    View Slide

  69. Advanced Inspector

    View Slide

  70. Advanced Inspector

    View Slide

  71. Inspector - creating constraints
    You can create a quick
    constraint by clicking on the “+”
    buttons

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  76. Tools

    View Slide

  77. Tools

    View Slide

  78. Useful shortcuts
    • to select a parent group
    • to switch between XML and Design mode
    • double-click on included elements


    View Slide

  79. Tools attributes
    &
    Sample Data

    View Slide

  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

    View Slide

  81. Sample Data
    • Limited Default Adapter

    View Slide

  82. Sample Data
    • Limited Default Adapter
    • Specify content

    View Slide

  83. Sample Data
    • Limited Default Adapter
    • Specify content
    • tools:listitem

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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 …

    View Slide

  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)

    View Slide

  90. Constraints

    View Slide

  91. 1.0
    • Relative positioning
    • Center positioning & bias
    • Guidelines - helper objects
    • Chains
    • Dimension constraints: min/max, Ratio
    • ConstraintSet

    View Slide

  92. Guidelines

    View Slide

  93. Guidelines

    View Slide

  94. B
    Chains
    A
    Chain
    bi-directional constraints

    View Slide

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

    View Slide

  96. Different Chain Styles
    A B C Spread
    A B C Spread Inside
    A B C Weighted
    A B C Packed
    + bias

    View Slide

  97. Gone Behavior

    View Slide

  98. Gone Behavior

    View Slide

  99. Inadapted Margin

    View Slide

  100. Inadapted Margin

    View Slide

  101. Gone Margins

    View Slide

  102. Gone Margins

    View Slide

  103. Example

    View Slide

  104. Example

    View Slide

  105. beta 3
    1.1.0

    View Slide

  106. • Barriers
    beta 3
    1.1.0

    View Slide

  107. • Barriers
    beta 3
    1.1.0

    View Slide

  108. • Barriers
    beta 3
    1.1.0

    View Slide

  109. Barriers

    View Slide

  110. Barriers

    View Slide

  111. Barriers

    View Slide

  112. Barriers

    View Slide

  113. Barriers
    1
    2
    3

    View Slide

  114. Barriers
    1
    2
    3 4

    View Slide

  115. Barriers

    View Slide

  116. Barriers

    View Slide

  117. Barriers

    View Slide

  118. Barriers
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection=“end”
    app:constraint_referenced_ids="textView1,textView2,textView3" />

    View Slide

  119. • Barriers
    • Group - apply visibility to a set of widgets
    beta 3
    1.1.0

    View Slide

  120. Groups
    textview2
    textview3

    View Slide

  121. Groups
    android:id="@+id/group2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="visible"
    app:constraint_referenced_ids="textView2,textView3" />

    View Slide

  122. Groups
    Invisible Gone

    View Slide

  123. • Barriers
    • Group
    • Placeholder
    beta 3
    1.1.0
    ?

    View Slide

  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

    View Slide

  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

    View Slide

  126. • Barriers
    • Group
    • Placeholder
    • Percent dimensions
    beta 3
    1.1.0

    View Slide

  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”

    View Slide

  128. • Barriers
    • Group
    • Placeholder
    • Percent dimensions
    • Circular constraints
    beta 3
    1.1.0

    View Slide

  129. Circular Constraints

    app:layout_constraintCircle=“@+id/buttonA"
    app:layout_constraintCircleRadius=“100dp"
    app:layout_constraintCircleAngle="45" />

    View Slide

  130. Example
    Circular Menu

    View Slide

  131. Example
    Circular Menu

    View Slide

  132. Example
    Andrew Kelly
    https://medium.com/devnibbles/constraintlayout-circular-
    positioning-9489b11cb0e5

    View Slide

  133. Example
    Andrew Kelly
    https://medium.com/devnibbles/constraintlayout-circular-
    positioning-9489b11cb0e5

    View Slide

  134. beta 3
    1.1.0
    maven {
    url "https://maven.google.com"
    }
    dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3'
    }

    View Slide

  135. Case Studies

    View Slide

  136. Case 1

    View Slide

  137. Case 1
    1 2

    View Slide

  138. Case 4

    View Slide

  139. Case 2

    View Slide

  140. Example 1

    View Slide

  141. Example 1

    View Slide

  142. Example 1

    View Slide

  143. Example 1

    View Slide

  144. Example 1
    1. Center connection
    2. Bias set to 0
    3. app:layout_constrainedWidth=“true”

    View Slide

  145. Example 1

    View Slide

  146. Case 3

    View Slide

  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”

    View Slide

  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

    View Slide

  149. Case 4
    • Flat layouts are good, but
    components still make
    sense!

    View Slide

  150. Case 4
    • Using nested ConstraintLayout can
    be a powerful layout tool
    • Think: layout components

    View Slide

  151. ConstraintSet

    View Slide

  152. Layout
    !=
    Views

    View Slide

  153. ConstraintLayout Views

    View Slide

  154. ConstraintLayout Views
    ConstraintSet

    View Slide

  155. ConstraintLayout Views
    ConstraintSet

    View Slide

  156. ConstraintLayout Views
    ConstraintSet

    View Slide

  157. ConstraintSet

    View Slide

  158. ConstraintSet
    • Separate views from the layout rules

    View Slide

  159. ConstraintSet
    • Separate views from the layout rules
    • Encapsulate all constraints of a layout in a single object

    View Slide

  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

    View Slide

  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

    View Slide

  162. View Slide

  163. ConstraintSet mConstraintSet1 = new ConstraintSet();
    ConstraintSet mConstraintSet2 = new ConstraintSet();

    View Slide

  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);

    View Slide

  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);

    View Slide

  166. Landscape

    View Slide

  167. Motion

    View Slide

  168. Motion
    • Flat Hierarchy == No clipping issues

    View Slide

  169. Motion
    • Flat Hierarchy == No clipping issues
    • Scene Graph

    View Slide

  170. Motion
    • Flat Hierarchy == No clipping issues
    • Scene Graph
    • ConstraintSet == Begin and End Keyframe

    View Slide

  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);

    View Slide

  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);

    View Slide

  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);

    View Slide

  174. View Slide

  175. View Slide

  176. • |

    View Slide

  177. • |

    View Slide

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

    View Slide

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

    View Slide

  180. Visibility & Ripple

    View Slide

  181. Visibility & Ripple

    View Slide

  182. What’s next

    View Slide

  183. What’s next
    • More performance optimizations
    • experimental background resolution
    • segmentation of constraints
    • broadening the optimizer surface

    View Slide

  184. What’s next
    • ConstraintHelper
    • Chains
    • Layers
    • Custom
    • Motion
    • better motion control
    • gesture support

    View Slide

  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!)

    View Slide

  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!)

    View Slide

  187. Thank you!
    http://b.android.com
    File bugs & requests on
    +NicolasRoard
    @camaelon

    View Slide