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

ConstraintLayout presentation

B9012970f22b84c5b344ffa6f8a884d5?s=47 Nicolas Roard
December 13, 2016

ConstraintLayout presentation

ConstraintLayout presentation at Android SF meetup

B9012970f22b84c5b344ffa6f8a884d5?s=128

Nicolas Roard

December 13, 2016
Tweet

Transcript

  1. ConstraintLayout Nicolas Roard Google @camaelon +NicolasRoard

  2. ConstraintLayout

  3. Why?

  4. Visual Editor

  5. Why did we create a new layout?

  6. Why did we create a new layout? Visual Editor

  7. Why did we create a new layout? Visual Editor Flexible

  8. Why did we create a new layout? Visual Editor Flexible

    Flat hierarchy
  9. Why did we create a new layout? Visual Editor Flexible

    Flat hierarchy Unbundled
  10. Why did we create a new layout? Visual Editor Flexible

    Flat hierarchy Unbundled Available starting API 9 (99.9% of devices)
  11. RelativeLayout

  12. 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>
  13. 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>
  14. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/andr 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>
  15. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/andr 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>
  16. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/andr 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>
  17. Nested Layouts

  18. Nested Layouts

  19. Nested Layouts Horizontal LinearLayout

  20. Nested Layouts Vertical LinearLayout

  21. Nested Layouts TV TV TV TV TV TV TextViews

  22. Nested Layouts

  23. height changes Nested Layouts

  24. Nested Layouts

  25. measures Nested Layouts

  26. measures Nested Layouts

  27. measures Nested Layouts

  28. measures Nested Layouts

  29. measures Nested Layouts

  30. measures Nested Layouts

  31. measures Nested Layouts

  32. measures Nested Layouts

  33. measures Nested Layouts

  34. measures Nested Layouts

  35. measures Nested Layouts

  36. measures Nested Layouts

  37. measures Nested Layouts

  38. measures Nested Layouts

  39. height changes Nested Layouts

  40. Nested Layouts

  41. Nested Layouts measures

  42. Nested Layouts measures

  43. Nested Layouts measures

  44. I have concerns

  45. Performance

  46. Performance For now, similar to RelativeLayout

  47. Performance For now, similar to RelativeLayout … but gains due

    to flat hierarchies
  48. Performance For now, similar to RelativeLayout … but gains due

    to flat hierarchies On a recent device, great performances
  49. Performance For now, similar to RelativeLayout … but gains due

    to flat hierarchies On a recent device, great performances Measure your layouts!
  50. Performance For now, similar to RelativeLayout … but gains due

    to flat hierarchies On a recent device, great performances Measure your layouts! Send us examples :)
  51. Impact of measures

  52. Impact of measures Wrap Content or fixed size

  53. Impact of measures Wrap Content or fixed size single measure

    pass
  54. Impact of measures Wrap Content or fixed size Match Constraints

    single measure pass
  55. Impact of measures Wrap Content or fixed size Match Constraints

    single measure pass two measure passes
  56. Size & Memory

  57. Size & Memory The unbundled library is ~130 ko

  58. Size & Memory The unbundled library is ~130 ko Low

    memory occupation (sparse matrix)
  59. How does it work?

  60. How does it work? Linear Equation Solver

  61. How does it work? Constraints Model Linear Equation Solver

  62. How does it work? Constraints Model Linear Equation Solver Visual

    Editor
  63. How does it work? Constraints Model Inference Engine Linear Equation

    Solver Visual Editor
  64. How does it work? Linear Equation Solver Constraints Model Direct

    Resolution Inference Engine Linear Equation Solver Visual Editor
  65. How far are we

  66. How far are we 12 releases since Google IO’16

  67. How far are we 12 releases since Google IO’16 Default

    Layout in Android Studio 2.3 templates
  68. How far are we 12 releases since Google IO’16 Default

    Layout in Android Studio 2.3 templates Open Source
  69. How far are we 12 releases since Google IO’16 Default

    Layout in Android Studio 2.3 templates Open Source Building better support for other viewgroups in the editor
  70. How far are we 12 releases since Google IO’16 Default

    Layout in Android Studio 2.3 templates Open Source Building better support for other viewgroups in the editor XML vs Visual Editor
  71. How far are we 12 releases since Google IO’16 Default

    Layout in Android Studio 2.3 templates Open Source Building better support for other viewgroups in the editor XML vs Visual Editor
  72. Constraints Model

  73. Side Constraints

  74. Side Constraints Widget

  75. Side Constraints Widget

  76. Side Constraints Widget

  77. Side Constraints Widget

  78. Side Constraints app:layout_constraintLeft_toLeftOf="parent" Widget

  79. Side Constraints Widget

  80. Side Constraints Widget Left / Start

  81. Side Constraints Widget Left / Start Right / End

  82. Side Constraints Widget Left / Start Right / End Top

  83. Side Constraints Widget Left / Start Right / End Top

    Bottom
  84. Side Constraints Widget Left / Start Right / End Top

    Bottom Baseline
  85. layout_constraint<…>_to<…>

  86. parent @id

  87. Center Constraints

  88. Widget Center Constraints

  89. Widget Center Constraints

  90. Widget Center Constraints

  91. Widget Center Constraints app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"

  92. Center + Bias Widget

  93. Center + Bias Widget 0.5

  94. Center + Bias Widget 0.2

  95. Center + Bias Widget 0.6

  96. Center + Bias Widget 0.6 app:layout_constraintHorizontal_bias="0.6"

  97. Dimension Constraints

  98. Dimension Constraints

  99. Dimension Constraints dimension fixe

  100. Dimension Constraints dimension fixe wrap_content

  101. Dimension Constraints dimension fixe wrap_content match_parent

  102. Dimension Constraints dimension fixe wrap_content

  103. Dimension Constraints dimension fixe wrap_content match_constraint

  104. Dimension Constraints dimension fixe wrap_content match_constraint ratio

  105. Dimension Constraints dimension fixe wrap_content match_constraint ratio min width/height (sur

    CL)
  106. Dimension Constraints dimension fixe wrap_content match_constraint ratio min width/height (sur

    CL)
  107. match_constraint Widget

  108. match_constraint Widget Widget

  109. Ratio Widget

  110. Ratio app:layout_constraintDimensionRatio="h,1:1" Widget

  111. Ratio app:layout_constraintDimensionRatio="h,1:1" Widget Widget

  112. Gone

  113. View: Gone A B

  114. View: Gone A B View set to “Gone”

  115. View: Gone B

  116. View: Gone Margin B

  117. View: Gone Margin B app:layout_goneMarginLeft="60dp"

  118. View: Gone Margin B app:layout_goneMarginLeft="60dp"

  119. Chains

  120. Chains A B

  121. Chains A B bi-directional constraints

  122. Chains A B Chain bi-directional constraints

  123. <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
  124. Chains A B C

  125. Chains A B C Head of the Chain

  126. Chains A B C Head of the Chain Contains attributes

    impacting the chain
  127. Different Chain Styles A B C Spread A B C

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

    Spread Inside A B C Weighted A B C Packed + bias
  129. app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintHorizontal_chainStyle="spread_inside" app:layout_constraintHorizontal_chainStyle="packed" Chains

  130. Guidelines

  131. Guidelines Widget

  132. Guidelines Widget

  133. Guidelines Widget

  134. Guidelines Widget

  135. Guidelines

  136. Guidelines

  137. Guidelines

  138. Guidelines %

  139. <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

  140. ConstraintSet

  141. ConstraintSet

  142. ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set

    ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set ConstraintSet
  143. ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set

    ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set ConstraintSet mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); mConstraintSet1.clone(mConstraintLayout); // get constraints from ConstraintSet
  144. ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set

    ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set ConstraintSet mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); mConstraintSet1.clone(mConstraintLayout); // get constraints from ConstraintSet TransitionManager.beginDelayedTransition(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout);
  145. Demo

  146. Next!

  147. Next

  148. Next More flexibility with match_constraints New helper objects Virtual Viewgroups

    Animation Variables Conversion Tools
  149. Contact Nicolas Roard @camaelon +NicolasRoard Documentation https://developer.android.com/ reference/android/support/ constraint/package-summary.html File

    Bugs https://code.google.com/p/android/issues/entry