Save 37% off PRO during our Black Friday Sale! »

BABBQ16 ConstraintLayout presentation

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.

B9012970f22b84c5b344ffa6f8a884d5?s=128

Nicolas Roard

October 23, 2016
Tweet

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