Becomming a ConstraintLayout Ninja

Transcript

1. Becoming a ConstraintLayout Ninja Angelo Rüggeberg @CaptnBlubber
2. What is ConstraintLayout? • Container for Views that allows positioning • Like FrameLayout, LinearLayout or RelativeLayout • Library • Introduced in 2016* • *as alpha
4. Getting Started • Android Studio by default adds dependencies on new Projects • support package 
 'com.android.support.constraint:constraint-layout:1.1.0' • android.x 
 'androidx.constraintlayout:constraintlayout:1.1.0'
5. Typical Layout
6. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/placeholder" android:layout_width="wrap_content" android:layout_height="150dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/placeholder" android:orientation="horizontal" android:weightSum="10"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="8" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" /> </LinearLayout> </RelativeLayout>
7. Layout Complexity & Nesting
8. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/placeholder" android:layout_width="wrap_content" android:layout_height="150dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/placeholder" android:orientation="horizontal" android:weightSum="10"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="8" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" /> </LinearLayout> </RelativeLayout> Nested • Hard to read in complex Layouts • Performance
9. </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </RelativeLayout> </RelativeLayout> </LinearLayout> </RelativeLayout> Which Container closes where again? Did I close them all correctly?
10. <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/ android" 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"> <View ... /> <TextView ... /> <TextView ... /> <TextView ... /> </android.support.constraint.ConstraintLayout> Flat!
11. Positioning
12. Using the Layout Editor Credits: Rebecca Franks
13. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/placeholder" android:layout_width="wrap_content" android:layout_height="150dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/placeholder" android:orientation="horizontal" android:weightSum="10"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="8" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" /> </LinearLayout> </RelativeLayout>
14. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/placeholder" android:layout_width="wrap_content" android:layout_height="150dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/placeholder" android:orientation="horizontal" android:weightSum="10"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="8" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" /> </LinearLayout> </RelativeLayout>
15. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/placeholder" android:layout_width="wrap_content" android:layout_height="150dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/placeholder" android:orientation="horizontal" android:weightSum="10"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="8" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" /> </LinearLayout> </RelativeLayout>
16. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/placeholder" android:layout_width="wrap_content" android:layout_height="150dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/placeholder" android:orientation="horizontal" android:weightSum="10"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="8" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" /> </LinearLayout> </RelativeLayout> Inconsistent referencing Relative in Container -> booleans Relative to Container -> View Id Different wording
17. Setting Constraints • app:layout_constraint<Position>_to<Reference>Of
18. Setting Constraints • app:layout_constraint<Position>_to<Reference>Of • Positions • app:layout_constraintTop • app:layout_constraintBottom • app:layout_constraintStart • app:layout_constraintEnd
19. Setting Constraints • app:layout_constraint<Position>_to<Reference>Of • Reference • app:layout_<Position>_toTopOf • app:layout_<Position>_toBottomOf • app:layout_<Position>_toStartOf • app:layout_<Position>_toEndOf
20. Setting Constraints • 2 Minimum Constraints • 1 Top or Bottom • 1 Start or End • Specifying both sides will center the view • honors margins
21. Setting Constraints • Positioning in Parent • parent • Positioning to Container • ContainerId
22. Positioning in Parent using "parent"
24. <android.support.constraint.ConstraintLayout ... > <TextView ... android:text="Top Left" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView ... android:text="Top Right" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView ... android:text="Bottom Left" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" /> <TextView ... android:text="Bottom Right" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <TextView ... android:text="Centered" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
25. <android.support.constraint.ConstraintLayout ... > <TextView ... android:text="Top Left" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView ... android:text="Top Right" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView ... android:text="Bottom Left" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" /> <TextView ... android:text="Bottom Right" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <TextView ... android:text="Centered" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout> 2 Constraints
26. <android.support.constraint.ConstraintLayout ... > <TextView ... android:text="Top Left" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView ... android:text="Top Right" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView ... android:text="Bottom Left" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" /> <TextView ... android:text="Bottom Right" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <TextView ... android:text="Centered" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout> 4 Constraints
28. Positioning to View using "@id"
30. <android.support.constraint.ConstraintLayout ... > <TextView android:id="@+id/textView" ... android:text="Top Left" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textView2" ... android:text="Next to Top Left" app:layout_constraintStart_toEndOf="@+id/textView" app:layout_constraintTop_toTopOf="@+id/textView" /> <TextView android:id="@+id/textView4" ... android:text="Below Next" app:layout_constraintStart_toStartOf="@+id/textView2" app:layout_constraintTop_toBottomOf="@+id/textView2" /> <TextView android:id="@+id/textView3" ... android:text="Centered Below" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/textView4" app:layout_constraintTop_toBottomOf="@+id/textView2" /> </android.support.constraint.ConstraintLayout>
31. <android.support.constraint.ConstraintLayout ... > <TextView android:id="@+id/textView" ... android:text="Top Left" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textView2" ... android:text="Next to Top Left" app:layout_constraintStart_toEndOf="@+id/textView" app:layout_constraintTop_toTopOf="@+id/textView" /> <TextView android:id="@+id/textView4" ... android:text="Below Next" app:layout_constraintStart_toStartOf="@+id/textView2" app:layout_constraintTop_toBottomOf="@+id/textView2" /> <TextView android:id="@+id/textView3" ... android:text="Centered Below" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/textView4" app:layout_constraintTop_toBottomOf="@+id/textView2" /> </android.support.constraint.ConstraintLayout>
32. <android.support.constraint.ConstraintLayout ... > <TextView android:id="@+id/textView" ... android:text="Top Left" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textView2" ... android:text="Next to Top Left" app:layout_constraintStart_toEndOf="@+id/textView" app:layout_constraintTop_toTopOf="@+id/textView" /> <TextView android:id="@+id/textView4" ... android:text="Below Next" app:layout_constraintStart_toStartOf="@+id/textView2" app:layout_constraintTop_toBottomOf="@+id/textView2" /> <TextView android:id="@+id/textView3" ... android:text="Centered Below" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/textView4" app:layout_constraintTop_toBottomOf="@+id/textView2" /> </android.support.constraint.ConstraintLayout>
33. <android.support.constraint.ConstraintLayout ... > <TextView android:id="@+id/textView" ... android:text="Top Left" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textView2" ... android:text="Next to Top Left" app:layout_constraintStart_toEndOf="@+id/textView" app:layout_constraintTop_toTopOf="@+id/textView" /> <TextView android:id="@+id/textView4" ... android:text="Below Next" app:layout_constraintStart_toStartOf="@+id/textView2" app:layout_constraintTop_toBottomOf="@+id/textView2" /> <TextView android:id="@+id/textView3" ... android:text="Centered Below" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/textView4" app:layout_constraintTop_toBottomOf="@+id/textView2" /> </android.support.constraint.ConstraintLayout>
35. Wrapping/Spanning the View
36. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/placeholder" android:layout_width="wrap_content" android:layout_height="150dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/placeholder" android:orientation="horizontal" android:weightSum="10"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="8" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" /> </LinearLayout> </RelativeLayout> Stretch the view to the next reference point or parent
37. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/placeholder" android:layout_width="wrap_content" android:layout_height="150dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/placeholder" android:orientation="horizontal" android:weightSum="10"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="8" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" /> </LinearLayout> </RelativeLayout> Stretch the view like percentage
38. Wrapping/Stretching • "wrap_content" same functionality as usual • "0dp" adjusts width/height to match the constraints • is displayed as "match_constraint" in ui editor • honors margins
39. The Power of Constraint Layout
40. Wrapping - Bonus: Percent! • "app:layout_constraintWidth_percent" can be applied to all views • You have to set your "android:width" to "0dp" • "app:layout_constraintHeight_percent" can be applied to all views • You have to set your "android:height" to "0dp"
41. Gone Margins
42. Gone Margins • Defines Margin in case the referenced View is gone • available for all sides • app:layout_goneMarginStart • app:layout_goneMarginEnd • app:layout_goneMarginTop • app:layout_goneMarginBottom
43. <TextView ... android:layout_marginStart="8dp" android:layout_marginTop="8dp" app:layout_constraintStart_toEndOf="@+id/textView4" app:layout_constraintTop_toTopOf="parent" app:layout_goneMarginStart="32dp" />
44. <TextView ... android:layout_marginStart="8dp" android:layout_marginTop="8dp" app:layout_constraintStart_toEndOf="@+id/textView4" app:layout_constraintTop_toTopOf="parent" app:layout_goneMarginStart="32dp" />
45. Aspect Ratio
46. Aspect Ratio • Works on all Views • Yes also on ImageViews! • Can be specified for either height or width: • Height: "h, 16:9" • Width: "w, 9:3"
47. <View android:id="@+id/view" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:layout_marginEnd="32dp" android:background="@color/colorPrimary" app:layout_constraintDimensionRatio="h,16:9" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
48. <View android:id="@+id/view" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:layout_marginEnd="32dp" android:background="@color/colorPrimary" app:layout_constraintDimensionRatio="h,16:9" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
49. <View android:id="@+id/view" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:layout_marginEnd="32dp" android:background="@color/colorPrimary" app:layout_constraintDimensionRatio="h,16:9" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
50. <View android:id="@+id/view" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:layout_marginEnd="32dp" android:background="@color/colorPrimary" app:layout_constraintDimensionRatio="w,9:16" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
51. Anchoring
52. Anchored Centered
53. <android.support.constraint.ConstraintLayout ... > <View android:id="@+id/view" android:layout_width="0dp" android:layout_height="150dp" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:layout_marginEnd="32dp" android:background="@color/colorPrimary" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <View android:layout_width="120dp" android:layout_height="120dp" android:background="@color/colorAccent" app:layout_constraintTop_toBottomOf="@+id/view" app:layout_constraintBottom_toBottomOf="@+id/view" app:layout_constraintEnd_toEndOf="@+id/view" app:layout_constraintStart_toStartOf="@+id/view" /> </android.support.constraint.ConstraintLayout>
54. <android.support.constraint.ConstraintLayout ... > <View android:id="@+id/view" android:layout_width="0dp" android:layout_height="150dp" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:layout_marginEnd="32dp" android:background="@color/colorPrimary" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <View android:layout_width="120dp" android:layout_height="120dp" android:background="@color/colorAccent" app:layout_constraintTop_toBottomOf="@+id/view" app:layout_constraintBottom_toBottomOf="@+id/view" app:layout_constraintEnd_toEndOf="@+id/view" app:layout_constraintStart_toStartOf="@+id/view" /> </android.support.constraint.ConstraintLayout> Centered inside the View
55. <android.support.constraint.ConstraintLayout ... > <View android:id="@+id/view" android:layout_width="0dp" android:layout_height="150dp" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:layout_marginEnd="32dp" android:background="@color/colorPrimary" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <View android:layout_width="120dp" android:layout_height="120dp" android:background="@color/colorAccent" app:layout_constraintTop_toBottomOf="@+id/view" app:layout_constraintBottom_toBottomOf="@+id/view" app:layout_constraintEnd_toEndOf="@+id/view" app:layout_constraintStart_toStartOf="@+id/view" /> </android.support.constraint.ConstraintLayout> Anchored to the Bottom of the View
56. <android.support.constraint.ConstraintLayout ... > <View android:id="@+id/view" android:layout_width="0dp" android:layout_height="150dp" android:layout_marginStart="32dp" android:layout_marginTop="32dp" android:layout_marginEnd="32dp" android:background="@color/colorPrimary" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <View android:layout_width="120dp" android:layout_height="120dp" android:background="@color/colorAccent" app:layout_constraintTop_toBottomOf="@+id/view" app:layout_constraintBottom_toBottomOf="@+id/view" app:layout_constraintEnd_toEndOf="@+id/view" app:layout_constraintStart_toStartOf="@+id/view" /> </android.support.constraint.ConstraintLayout> Both reference the bottom of the View
57. Bias
58. Bias • Bias can weight horizontal and vertical constraints if both directions are set • default is 0.5 • same size on each side -> center • values < 0.5 move the view to the left • values > 0.5 move the view to the right
60. <View ... app:layout_constraintEnd_toEndOf="@+id/view" app:layout_constraintStart_toStartOf="@+id/view" app:layout_constraintHorizontal_bias="0.25" />
61. <View ... app:layout_constraintEnd_toEndOf="@+id/view" app:layout_constraintStart_toStartOf="@+id/view" app:layout_constraintHorizontal_bias="0.25" />
62. Chains
64. Chains • Elements referencing each other create a chain • Vertical and Horizontal Chains are possible • Chains can have different styles affecting the constraints
65. <TextView android:id="@+id/textView1" ... app:layout_constraintEnd_toStartOf="@+id/textView2" app:layout_constraintHorizontal_chainStyle="spread" /> <TextView android:id="@+id/textView2" ... app:layout_constraintEnd_toStartOf="@+id/buttonToggle" app:layout_constraintStart_toEndOf="@+id/textView1" /> <Button android:id="@+id/buttonToggle" ... app:layout_constraintEnd_toStartOf="@+id/textView3" app:layout_constraintStart_toEndOf="@+id/textView2" />
66. <TextView android:id="@+id/textView1" ... app:layout_constraintEnd_toStartOf="@+id/textView2" app:layout_constraintHorizontal_chainStyle="spread" /> <TextView android:id="@+id/textView2" ... app:layout_constraintEnd_toStartOf="@+id/buttonToggle" app:layout_constraintStart_toEndOf="@+id/textView1" /> <Button android:id="@+id/buttonToggle" ... app:layout_constraintEnd_toStartOf="@+id/textView3" app:layout_constraintStart_toEndOf="@+id/textView2" />
67. <TextView android:id="@+id/textView1" ... app:layout_constraintEnd_toStartOf="@+id/textView2" app:layout_constraintHorizontal_chainStyle="spread" /> <TextView android:id="@+id/textView2" ... app:layout_constraintEnd_toStartOf="@+id/buttonToggle" app:layout_constraintStart_toEndOf="@+id/textView1" /> <Button android:id="@+id/buttonToggle" ... app:layout_constraintEnd_toStartOf="@+id/textView3" app:layout_constraintStart_toEndOf="@+id/textView2" />
68. Chains - Styles • "spread" • Gives all constraints the same value • "spread_inside" • Puts the Start/End Elements to the edge of the reference points and gives all inner constraints the same value • "packed" • Packs all inner constraints together at the center
69. <TextView android:id="@+id/textView1" ... app:layout_constraintEnd_toStartOf="@+id/textView2" app:layout_constraintHorizontal_chainStyle="spread" /> <TextView android:id="@+id/textView2" ... app:layout_constraintEnd_toStartOf="@+id/buttonToggle" app:layout_constraintStart_toEndOf="@+id/textView1" /> <Button android:id="@+id/buttonToggle" ... app:layout_constraintEnd_toStartOf="@+id/textView3" app:layout_constraintStart_toEndOf="@+id/textView2" />
70. <TextView android:id="@+id/textView1" ... app:layout_constraintEnd_toStartOf="@+id/textView2" app:layout_constraintHorizontal_chainStyle="spread_inside" /> <TextView android:id="@+id/textView2" ... app:layout_constraintEnd_toStartOf="@+id/buttonToggle" app:layout_constraintStart_toEndOf="@+id/textView1" /> <Button android:id="@+id/buttonToggle" ... app:layout_constraintEnd_toStartOf="@+id/textView3" app:layout_constraintStart_toEndOf="@+id/textView2" />
71. <TextView android:id="@+id/textView1" ... app:layout_constraintEnd_toStartOf="@+id/textView2" app:layout_constraintHorizontal_chainStyle="packed" /> <TextView android:id="@+id/textView2" ... app:layout_constraintEnd_toStartOf="@+id/buttonToggle" app:layout_constraintStart_toEndOf="@+id/textView1" /> <Button android:id="@+id/buttonToggle" ... app:layout_constraintEnd_toStartOf="@+id/textView3" app:layout_constraintStart_toEndOf="@+id/textView2" />
72. Groups
73. Groups • Groups can control visibility of multiple Views • References id's of Views • No nesting required!
74. <TextView android:id="@+id/textView1" ... /> <TextView android:id="@+id/textView2" ... /> <TextView android:id="@+id/textView3" ... /> <TextView android:id="@+id/textView4" ... /> <android.support.constraint.Group android:id="@+id/group" app:constraint_referenced_ids="textView4,textView1,textView3,textView2" />
75. <TextView android:id="@+id/textView1" ... /> <TextView android:id="@+id/textView2" ... /> <TextView android:id="@+id/textView3" ... /> <TextView android:id="@+id/textView4" ... /> <android.support.constraint.Group android:id="@+id/group" app:constraint_referenced_ids="textView4,textView1,textView3,textView2" />
76. button.setOnClickListener { group.visibility = View.GONE }
77. Guidelines
78. Guidelines • Invisible Helpers that define margins • can define both horizontal and vertical margins • other views can constraint to the guideline • get rid of duplicate margin definitions for parent positioning
79. <android.support.constraint.Guideline android:id="@+id/guidelineHorizontalDp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_begin="8dp" /> <android.support.constraint.Guideline android:id="@+id/guidelineVerticalDp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_begin="8dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="8dp" app:layout_constraintStart_toStartOf="@+id/guidelineVerticalDp" app:layout_constraintTop_toTopOf="@+id/guidelineHorizontalDp" />
80. <android.support.constraint.Guideline android:id="@+id/guidelineHorizontalDp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_begin="8dp" /> <android.support.constraint.Guideline android:id="@+id/guidelineVerticalDp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_begin="8dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="8dp" app:layout_constraintStart_toStartOf="@+id/guidelineVerticalDp" app:layout_constraintTop_toTopOf="@+id/guidelineHorizontalDp" />
81. <android.support.constraint.Guideline android:id="@+id/guidelineHorizontalDp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_begin="8dp" /> <android.support.constraint.Guideline android:id="@+id/guidelineVerticalDp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_begin="8dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="8dp" app:layout_constraintStart_toStartOf="@+id/guidelineVerticalDp" app:layout_constraintTop_toTopOf="@+id/guidelineHorizontalDp" />
82. <android.support.constraint.Guideline android:id="@+id/guidelineHorizontalDp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_begin="8dp" /> <android.support.constraint.Guideline android:id="@+id/guidelineVerticalDp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_begin="8dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="8dp" app:layout_constraintStart_toStartOf="@+id/guidelineVerticalDp" app:layout_constraintTop_toTopOf="@+id/guidelineHorizontalDp" /> No Margins!
83. Guidelines • supports percentage instead of dp!
84. <android.support.constraint.Guideline android:id="@+id/guidelineHorizontalPercent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.1" /> <android.support.constraint.Guideline android:id="@+id/guidelineVerticalPercent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="10%" app:layout_constraintStart_toStartOf="@+id/guidelineVerticalPercent" app:layout_constraintTop_toTopOf="@+id/guidelineHorizontalPercent" />
85. <android.support.constraint.Guideline android:id="@+id/guidelineHorizontalPercent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.1" /> <android.support.constraint.Guideline android:id="@+id/guidelineVerticalPercent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="10%" app:layout_constraintStart_toStartOf="@+id/guidelineVerticalPercent" app:layout_constraintTop_toTopOf="@+id/guidelineHorizontalPercent" />
86. Barriers
87. Credits: Sean McQuillan
88. Barriers • Position Content next to multiple Views that may differ in size • Other views can constraint to the barrier • References Views by id • Can vertical • To left/start or right/end • Can be horizontal • To top or bottom
89. <TextView android:id="@+id/shortText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Text" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/longText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Longer Text" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/shortText" /> <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="right" app:constraint_referenced_ids="shortText, longText" /> <Button ... app:layout_constraintStart_toEndOf="@+id/barrier" app:layout_constraintTop_toTopOf="parent" />
90. <TextView android:id="@+id/shortText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Text" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/longText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Longer Text" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/shortText" /> <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="right" app:constraint_referenced_ids="shortText, longText" /> <Button ... app:layout_constraintStart_toEndOf="@+id/barrier" app:layout_constraintTop_toTopOf="parent" />
91. <TextView android:id="@+id/shortText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Text" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/longText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Longer Text" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/shortText" /> <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="right" app:constraint_referenced_ids="shortText, longText" /> <Button ... app:layout_constraintStart_toEndOf="@+id/barrier" app:layout_constraintTop_toTopOf="parent" />
92. Runtime manipulation
94. Runtime Manipulation • For Runtime Manipulation use ConstraintSet() • Manipulate existing values/constraints • Add new Elements with Constraints • Multiple manipulations are possible at once • like a transaction
95. val constraintSet = ConstraintSet() constraintSet.clone(anchoredConstraintLayout) constraintSet.setHorizontalBias(R.id.view, 0.5f) constraintSet.setHorizontalChainStyle(R.id.view2, CHAIN_SPREAD) ... constraintSet.applyTo(anchoredConstraintLayout)
96. val constraintSet = ConstraintSet() constraintSet.clone(anchoredConstraintLayout) constraintSet.setHorizontalBias(R.id.view, 0.5f) constraintSet.setHorizontalChainStyle(R.id.view2, CHAIN_SPREAD) ... constraintSet.applyTo(anchoredConstraintLayout) Copy all existing Constraints/Values
97. val constraintSet = ConstraintSet() constraintSet.clone(anchoredConstraintLayout) constraintSet.setHorizontalBias(R.id.view, 0.5f) constraintSet.setHorizontalChainStyle(R.id.view2, CHAIN_SPREAD) ... constraintSet.applyTo(anchoredConstraintLayout) Manipulate Constraints/Values
98. val constraintSet = ConstraintSet() constraintSet.clone(anchoredConstraintLayout) constraintSet.setHorizontalBias(R.id.view, 0.5f) constraintSet.setHorizontalChainStyle(R.id.view2, CHAIN_SPREAD) ... constraintSet.applyTo(anchoredConstraintLayout) Apply old and manipulated Constraints/Values
99. ConstraintSet().run { clone(constraintChains) setHorizontalChainStyle(R.id.view, currentState.style) applyTo(constraintChains) } More Kotlin!
100. States as Layouts
102. States as Layouts • Define your different states as separate Layouts • Elements and id's have to be defined in both and have to be identical • Views can be gone or height/width 0dp
103. ConstraintSet().run { clone(context, R.layout.layout2) applyTo(transformingConstraint) }
104. ConstraintSet().run { clone(context, R.layout.layout2) applyTo(transformingConstraint) }
105. Animations
108. Animations • TransitionManager.beginDelayedTransition(<layout>) • Apply in ConstraintSet
109. ConstraintSet().run { clone(context, R.layout.layout2) applyTo(transformingConstraint) }
110. ConstraintSet().run { clone(context, R.layout.layout2) TransitionManager .beginDelayedTransition(transformingConstraint) applyTo(transformingConstraint) }
111. ConstraintSet().run { clone(context, R.layout.layout2) TransitionManager .beginDelayedTransition(transformingConstraint) applyTo(transformingConstraint) }
113. Code Available! https://gitlab.com/CaptnBlubber/ContraintLayoutSamples