ConstraintLayout TechTalk

Demonstration of fundamentals and some advanced features of new layout editor from Google.

Transcript

1. CONSTRAINT LAYOUT SLAVA PETROCHENKO
2. ‣ NESTED VIEW GROUPS MAKE NEGATIVE IMPACT ON PERFORMANCE ‣ WAS IT LOGICAL GROUPING OR JUST A POSITIONING CONTAINER? (THINK ABOUT CHANGES IN DESIGN REQUIREMENTS) ‣ ARE WE REALLY IN LOVE WITH CREATING LAYOUTS IN XML? (PROBABLY, BECAUSE WE TRIED EDITOR AND PAINFULLY FAILED) WHY SHOULD I CARE OR WHAT WE HAVE NOW
3. ‣ FLEXIBLE LAYOUT MANAGER ‣ FLAT LAYOUTS ‣ SUPPORTS API 9+ ‣ SOMETIMES CALLED RELATIVE LAYOUT ON STEROIDS ‣ A WORK IN PROGRESS WITH BUGGY BETA VERSIONS WHAT IS CONSTRAINT LAYOUT
4. ‣ RELATIVE POSITIONING ‣ CENTERING AND BIAS ‣ DIMENSIONS (SIZING) ‣ GROUP BEHAVIOR (CHAINS) ‣ HELPER OBJECTS (GUIDELINES, GROUPS, BARRIERS) ‣ CONSTRAINT SET CONSTRAINTS VOCABULARY
5. <android.support.constraint.ConstraintLayout … > <Button android:id="@+id/button1" … tools:layout_editor_absoluteX="16dp" tools:layout_editor_absoluteY=“16dp" /> <Button android:id="@+id/button2" … tools:layout_editor_absoluteX="16dp" tools:layout_editor_absoluteY=“82dp" /> </android.support.constraint.ConstraintLayout> RELATIVE POSITIONING (MISSING CONSTRAINTS)
6. <android.support.constraint.ConstraintLayout … > <Button android:id="@+id/button1" … app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/button2" … app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/button1" /> </android.support.constraint.ConstraintLayout> RELATIVE POSITIONING
7. <android.support.constraint.ConstraintLayout … > <Button android:id="@+id/button1" … app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout> CENTERING IN PARENT
8. <android.support.constraint.ConstraintLayout … > <Button android:id="@+id/button1" … app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintHorizontal_bias="0.75" app:layout_constraintVertical_bias="0.75" /> </android.support.constraint.ConstraintLayout> CENTERING IN PARENT AND BIAS
9. <android.support.constraint.ConstraintLayout … > <ImageView android:id=“@+id/imageView1" … /> <TextView android:id="@+id/textView1" … app:layout_constraintEnd_toEndOf="@+id/imageView1" app:layout_constraintStart_toStartOf="@+id/imageView1" app:layout_constraintTop_toBottomOf="@+id/imageView1" /> <android.support.design.widget.FloatingActionButton android:id="@+id/floatingActionButton" … app:layout_constraintTop_toTopOf=“@+id/imageView1" app:layout_constraintBottom_toTopOf="@+id/imageView1" app:layout_constraintStart_toStartOf=“parent" /> </android.support.constraint.ConstraintLayout> CENTERING AND SIBLINGS
10. <android.support.constraint.ConstraintLayout … > <TextView android:id="@+id/textViewA" … app:layout_constraintBaseline_toBaselineOf=“@+id/textViewB" app:layout_constraintStart_toStartOf="parent" /> <TextView android:id="@+id/textViewB" … app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout> BASELINE CONSTRAINT
11. DIMENSION CONSTRAINTS (SIZING) Fixed size android:layout_height=“16dp" Wrap content android:layout_height=“wrap_content” Match parent android:layout_height=“match_parent” Match constraints android:layout_height=“0dp"
12. <android.support.constraint.ConstraintLayout … > <TextView android:id="@+id/topTextView" android:layout_width="0dp" app:layout_constraintEnd_toEndOf=“parent" app:layout_constraintStart_toStartOf=“parent" … /> <TextView android:id="@+id/bottomTextView" android:layout_width="match_parent" app:layout_constraintEnd_toEndOf=“parent” app:layout_constraintStart_toStartOf=“parent” … /> </android.support.constraint.ConstraintLayout> WHAT’S WRONG WITH MATCH_PARENT
13. <android.support.constraint.ConstraintLayout … > <TextView android:id="@+id/topTextView" android:layout_width="0dp" app:layout_constraintStart_toStartOf="parent" … /> <TextView android:id="@+id/bottomTextView" android:layout_width="match_parent" app:layout_constraintStart_toStartOf="parent" … /> </android.support.constraint.ConstraintLayout> WHAT’S WRONG WITH MATCH_PARENT
14. GONE BEHAVIOR When view’s visibility is set to GONE its size becomes zero (a dot, essentially). All “out-going” margins become zero as well.
 
 Not necessarily desirable result (do we really need all these margins?) layout_goneMargin* attributes let us control margins to the target view which visibility is View.GONE
 w/o GONE margin attribute w/ GONE margin attribute
15. ASPECT RATIO (ONE DIMENSION) <android.support.constraint.ConstraintLayout Hello … > <ImageView android:id="@+id/imageView" android:layout_width="150dp" android:layout_height="0dp" app:layout_constraintDimensionRatio="2:1" … /> </android.support.constraint.ConstraintLayout>
16. ASPECT RATIO (TWO DIMENSIONS) <android.support.constraint.ConstraintLayout … > <ImageView android:id="@+id/imageView1" android:layout_width="0dp" android:layout_height="0dp" … app:layout_constraintDimensionRatio="h,2:1" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf=“parent” /> <android.support.constraint.Guideline … /> <ImageView android:id=“@+id/imageView2" android:layout_width="0dp" android:layout_height="0dp" … app:layout_constraintDimensionRatio="w,2:1" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf=“@+id/guideline" /> </android.support.constraint.ConstraintLayout>
17. GROUP BEHAVIOR (CHAINS) FROM CONSTRAINT LAYOUT DOCUMENTATION
18. CHAINS Top chain Spread style, left and right buttons top edges aligned to
 top edge of the button at the center Middle chain Spread inside style, left and right buttons top edges aligned
 to guideline (see in the next slide) Bottom chain Packed with bias style, left and right buttons top edges aren’t aligned (will jump to layout’s top at runtime) Vertical chain Composed from buttons at the center of each horizontal chain
19. <android.support.constraint.ConstraintLayout … > <Button android:id="@+id/button1" … app:layout_constraintStart_toStartOf="@+id/guideline_vertical_left" app:layout_constraintTop_toTopOf="@+id/guideline_horizontal" /> <Button android:id="@+id/button2" … app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_right" app:layout_constraintTop_toTopOf="@+id/guideline_horizontal" /> <android.support.constraint.Guideline android:id="@+id/guideline_horizontal" … android:orientation="horizontal" app:layout_constraintGuide_percent="0.25" /> <android.support.constraint.Guideline android:id="@+id/guideline_vertical_left" … android:orientation="vertical" app:layout_constraintGuide_begin="16dp" /> <android.support.constraint.Guideline android:id="@+id/guideline_vertical_right" … android:orientation="vertical" app:layout_constraintGuide_end="16dp" /> </android.support.constraint.ConstraintLayout> GUIDELINES
20. GUIDELINES Convenient as a tool for logical division by sections (i.e. lightweight GridLayout) No need to use Percent*Layouts, e.g. on the blueprint to the right, screen is divided into four equal sections (50% guidelines) Allows you easily implement fancy animations (later)
21. <android.support.constraint.ConstraintLayout … > <Button android:id="@+id/button1" … /> <Button android:id="@+id/button2" … /> <android.support.constraint.Group android:id="@+id/group" … android:visibility="visible" app:constraint_referenced_ids="button1,button2" /> </android.support.constraint.ConstraintLayout> GROUPS 1.1.X
22. <android.support.constraint.ConstraintLayout … > <Button android:id="@+id/button" app:layout_constraintStart_toEndOf=“@+id/barrier” … /> <TextView android:id="@+id/topTextView" android:text="A little bit longer text” … /> <TextView android:id=“@+id/bottomTextView" android:text=“TextView" … /> <android.support.constraint.Barrier android:id="@+id/barrier" app:barrierDirection="end" app:constraint_referenced_ids=“topTextView,bottomTextView” … /> </android.support.constraint.ConstraintLayout> BARRIERS (TOP WIDER) 1.1.X
23. BARRIERS (BOTTOM WIDER) 1.1.X <android.support.constraint.ConstraintLayout … > <Button android:id="@+id/button" app:layout_constraintStart_toEndOf=“@+id/barrier” … /> <TextView android:id="@+id/topTextView" android:text="A little bit longer text” … /> <TextView android:id=“@+id/bottomTextView" android:text="Now this text is the longest” … /> <android.support.constraint.Barrier android:id="@+id/barrier" app:barrierDirection="end" app:constraint_referenced_ids=“topTextView,bottomTextView” … /> </android.support.constraint.ConstraintLayout>
24. CONSTRAINT SET val cs1 = ConstraintSet() cs1.clone(constraintLayout) val cs2 = ConstraintSet() cs2.clone(this, R.layout.activity_main_top) var alternative = false playBtn.setOnClickListener { TransitionManager.beginDelayedTransition(constraintLayout) val constraint = if (alternative) cs1 else cs2 constraint.applyTo(constraintLayout) alternative = !alternative }
25. CONSTRAINT SET (TRANSITIONS) val transition = object : TransitionSet() { init { duration = 1000 ordering = ORDERING_SEQUENTIAL addTransition(object : TransitionSet() { init { addTransition(android.support.transition.Fade(Fade.OUT)) addTransition(ChangeBounds()) } }) addTransition(android.support.transition.Fade(Fade.IN)) } } var alternative = false playBtn.setOnClickListener { TransitionManager.beginDelayedTransition( constraintLayout, transition ) val constraint = if (alternative) cs1 else cs2 constraint.applyTo(constraintLayout) alternative = !alternative }
26. CONSTRAINT SET CAVEATS ConstraintLayout animates layout related changes. Don’t except it to animate text color, elevation etc Animation will be performed only on direct children. Additional motivation to avoid nested view hierarchies If you have changed ConstraintLayout params dynamically and then trying to run animation, the attributes will revert back to the original values
27. ‣ CIRCULAR POSITIONING ‣ MANY FACES OF MATCH_CONSTRAINT ‣ ENFORCING CONSTRAINTS IN WRAP_CONTENT ‣ INFERENCE AND AUTOCONNECT ‣ PERFORMANCE ADVANCED CONSTRAINTS VOCABULARY
28. <android.support.constraint.ConstraintLayout … > <Button android:id="@+id/buttonA" … app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/buttonB" … app:layout_constraintCircle="@id/buttonA" app:layout_constraintCircleAngle=“45" app:layout_constraintCircleRadius="100dp"/> </android.support.constraint.ConstraintLayout> CIRCULAR POSITIONING 1.1.X
29. MANY FACES OF MATCH_CONSTRAINT When a dimension is set to MATCH_CONSTRAINT, the default behavior is to have the resulting size take all the available space. Several additional modifiers are available: - layout_constraintWidth_min and layout_constraintHeight_min : will set the minimum size for this dimension - layout_constraintWidth_max and layout_constraintHeight_max : will set the maximum size for this dimension - layout_constraintWidth_percent and layout_constraintHeight_percent : will set the size of this dimension as a percentage of the parent FROM CONSTRAINT LAYOUT DOCUMENTATION 1.1.X
30. <android.support.constraint.ConstraintLayout … > <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height=“wrap_content" … android:layout_marginEnd="32dp" android:layout_marginStart="32dp" android:text="ConstraintLayout allows you to create large …” app:layout_constrainedWidth=“false" /> </android.support.constraint.ConstraintLayout> ENFORCING CONSTRAINTS IN WRAP_CONTENT 1.1.X
31. <android.support.constraint.ConstraintLayout … > <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height=“wrap_content" … android:layout_marginEnd="32dp" android:layout_marginStart="32dp" android:text="ConstraintLayout allows you to create large …” app:layout_constrainedWidth=“true” /> </android.support.constraint.ConstraintLayout> ENFORCING CONSTRAINTS IN WRAP_CONTENT 1.1.X
32. INFERENCE AND AUTOCONNECT Two similar but fundamentally different features Autoconnect is turn on/off feature. Creates constraints to parent layout (when appropriate) Constraints inference scans the layout and tries to infer best possible set of constraints to parent and sibling views (sometimes it needs help)
33. <android.support.constraint.ConstraintLayout …> <ImageView /> <TextView /> <TextView /> <android.support.constraint.Guideline /> <ImageView /> <TextView /> <android.support.constraint.Guideline /> <ImageView /> <TextView /> <TextView /> <ImageView /> <TextView /> <View /> <ImageView /> <ImageView /> <ImageView /> <TextView /> <TextView /> <TextView /> <View /> <TextView /> <ImageButton /> <TextView /> <TextView /> <ImageButton /> <ImageButton /> </ android.support.constraint.ConstraintLayout> PERFORMANCE (XML) <RelativeLayout … > <LinearLayout … > <ImageView /> <RelativeLayout … > <TextView /> <TextView /> <ImageView /> </RelativeLayout> </LinearLayout> <TextView /> <FrameLayout … > <…CustomImageView /> <TextView … /> </FrameLayout> <TextView /> <LinearLayout … > <ImageView /> <TextView /> </LinearLayout> <View /> <LinearLayout … > <ImageView /> <ImageView /> <ImageView /> <TextView /> <TextView /> <TextView /> </LinearLayout> <View /> <LinearLayout … > <ImageButton /> <TextView /> <ImageButton /> <TextView /> <ImageButton /> <TextView /> </LinearLayout> </RelativeLayout>
34. PERFORMANCE Average time in measurement & layout phases (ms) 0.26 0.278 0.295 0.313 0.33 CL LEGACY Device Nexus 5x Android OS version 8.1 beta ConstraintLayout version 1.1.0-beta4 SCALING MATTERS
35. USEFUL LINKS developer.android.com/training/constraint-layout/index.html developer.android.com/reference/android/support/constraint/ConstraintLayout.html codelabs.developers.google.com/codelabs/constraint-layout/ youtube.com/watch?v=yT22cqCGjQQ (tech talk of ConstraintLayout authors) github.com/scame/constraintlayout-performance (project used for benchmarks)