Mastering ConstraintLayout in Android - GDG Johannesburg

Presented at GDG Johannesburg on 4th October 2017.

In this talk, Rebecca will demonstrate how to use ConstraintLayout when building Android Apps and some cool tricks you can do with it. From simplifying complex layouts to creating animations, ConstraintLayout has some really great usages.

Transcript

1. Mastering ConstraintLayout Rebecca Franks Android Engineering Lead at DVT Google Developer Expert @riggaroo
2. - <RelativeLayout> <ImageView /> <ImageView /> <RelativeLayout> <TextView /> <LinearLayout> <TextView /> <RelativeLayout> <EditText /> </RelativeLayout> </LinearLayout> <LinearLayout> <TextView /> <RelativeLayout> <EditText /> </RelativeLayout> </LinearLayout> <TextView /> </RelativeLayout> <LinearLayout > <Button /> <Button /> </LinearLayout> </RelativeLayout>
3. @riggaroo Problems with Standard Layouts
4. @riggaroo Views are positioned using <...Layout></> elements
5. @riggaroo Hard to customise
6. @riggaroo Poor performance
7. @riggaroo Animations are tricky
8. @riggaroo How does a view get drawn on the screen?
9. @riggaroo Draw Process in Android Inflation Measure Layout Draw Uses a Depth-First Traversal Source: https://speakerdeck.com/queencodemonkey/philly-ete-2017-loving-lean-android-layouts
10. @riggaroo Draw Process in Android Inflation Measure - onMeasure Layout Draw Parent will measure each child Child calculates measured width and height Measure own (if any) children
11. @riggaroo Draw Process in Android Inflation Measure Layout - onLayout() Draw Parent sizes and positions child
12. @riggaroo Draw Process in Android Inflation Measure Layout Draw - onDraw() Parent Draws Parent tells children to draw
13. @riggaroo Types of Android Layouts
14. @riggaroo LinearLayout - Aligns children in a single direction - horizontal or vertical - Can use weights (but please avoid this!) <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <EditText... /> <EditText ... /> <Button ... /> </LinearLayout>
15. @riggaroo RelativeLayout - Layout that allows you to align objects relative to each other or relative to the parent <RelativeLayout ..> <EditText android:id="@+id/name" ... /> <Spinner android:id="@+id/dates" android:layout_below="@id/name" android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/times" /> <Spinner android:id="@id/times" android:layout_below="@id/name" android:layout_alignParentRight="true" /> </RelativeLayout>
16. @riggaroo FrameLayout - One single child view - Drawn in stack, most recent on top - Useful for: - Hiding/showing error layouts - Fragment stacking - Overlaying content
17. @riggaroo ConstraintLayout
18. - <RelativeLayout> <ImageView /> <ImageView /> <RelativeLayout> <TextView /> <LinearLayout> <TextView /> <RelativeLayout> <EditText /> </RelativeLayout> </LinearLayout> <LinearLayout> <TextView /> <RelativeLayout> <EditText /> </RelativeLayout> </LinearLayout> <TextView /> </RelativeLayout> <LinearLayout > <Button /> <Button /> </LinearLayout> </RelativeLayout>
19. <android.support.constraint.ConstraintLayout> <ImageView /> <ImageView /> <TextView /> <EditText /> <TextView /> <TextView /> <EditText /> <Button /> <Button /> <TextView /> </android.support.constraint.ConstraintLayout>
21. @riggaroo ConstraintLayout - Info - Released at Google I/O 2016 - Supports API +9 - Not bundled as part of Android SDK implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta2'
22. @riggaroo Cassowary Algorithm - Cassowary algorithm - Constraints - expressed as set of equations : a[1]x[1] + ... + a[n]x[n] = b a[1]x[1] + ... + a[n]x[n] <= b a[1]x[1] + ... + a[n]x[n] >= b
23. @riggaroo DEMO: Constraint Layout Walkthrough
24. @riggaroo Constraints - A constraint is the relationship between two views in the layout - Controls how those views will be positioned within the layout.
25. @riggaroo Baseline Constraint Allows you to align two baselines of text in your widgets
26. @riggaroo Bias Specifies which direction you want your widget to have bias towards. You can specify vertical or horizontal bias.
27. @riggaroo Chains Control how the available space is divided between elements
28. @riggaroo Guidelines - A visual guide which will not be seen at runtime - Used align other views to - Either horizontally or vertically
29. @riggaroo Guidelines <android.support.constraint.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_begin="16dp" />
30. @riggaroo Barriers - A virtual view, similar to a Guideline, to which we can constrain objects. - Determined by dimensions of multiple views
31. @riggaroo Barriers <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="text_view_title,button_add_cart" />
32. @riggaroo Group - Group things together - Not the same as traditional group - Used to set visibility of all elements
33. @riggaroo Group <android.support.constraint.Group android:id="@+id/group" android:layout_width="wrap_content" android:layout_height="wrap_content" app:constraint_referenced_ids="textView,button" />
34. @riggaroo Dimensions - Fixed aspect ratio - Useful for images or Video players etc - Specify size of view with dimension w:h
35. @riggaroo Animating ConstraintLayout
36. @riggaroo Animating Constraint Sets val constraintSet1 = ConstraintSet() val constraintSet2 = ConstraintSet() constraintSet2.clone(this, R.layout.activity_movie_rental_large) constraintSet1.clone(constraintLayout) TransitionManager.beginDelayedTransition(constraintLayout) constraintSet2.applyTo(constraintLayout)
37. @riggaroo Animating Constraint Sets val constraintSet1 = ConstraintSet() val constraintSet2 = ConstraintSet() constraintSet2.clone(this, R.layout.activity_movie_rental_large) constraintSet1.clone(constraintLayout) TransitionManager.beginDelayedTransition(constraintLayout) constraintSet2.applyTo(constraintLayout)
38. @riggaroo Animating Constraint Sets val constraintSet1 = ConstraintSet() val constraintSet2 = ConstraintSet() constraintSet2.clone(this, R.layout.activity_movie_rental_large) constraintSet1.clone(constraintLayout) TransitionManager.beginDelayedTransition(constraintLayout) constraintSet2.applyTo(constraintLayout)
41. @riggaroo Performance Problems in Layouts
42. @riggaroo 60 FPS = ±16ms per frame
43. @riggaroo Where are the problems? Deep Hierarchies increase complexity
44. @riggaroo Where are the problems? Change in size/position Starts measure/layout starting at root
45. @riggaroo Where are the problems? Some layouts need multiple measure/layout passes ie RelativeLayout, weights on LinearLayout
46. @riggaroo Where are the problems? Lists of many copies of same complex layout
47. @riggaroo Performance Profiling Tools for Layouts
48. @riggaroo Hierarchy Viewer
50. @riggaroo Layout Inspector
52. @riggaroo GPU Overdraw - Colour coding - Times pixel is redrawn on the screen - Useful for: - Reducing rendering overhead
53. @riggaroo Profile GPU Rendering - Quick visual representation - Time to render frames of a UI view. - 16ms benchmark - Good for: - Spikes in rendering frames - Gauging perf of 16ms benchmark
54. @riggaroo Summary: Use ConstraintLayout! bit.ly/docs-constraintlayout bit.ly/cl-lab
55. Thank you! Rebecca Franks Android Engineering Lead at DVT @riggaroo hello@riggaroo.co.za We’re hiring!
56. @riggaroo References - Follow these people on twitter: - Nicolas Roard @camaelon - John Hofard @johnhoford - Huyen Tue Dao @queencodemonkey - Mark Allison @MarkIAllison - ConstraintLayout Resources - https://www.youtube.com/watch?v=yT22cqCGjQQ - https://www.youtube.com/watch?v=Xx4aRI3oQbM - http://wiresareobsolete.com/2016/07/constraintlayout-part-1/ - http://wiresareobsolete.com/2016/07/constraintlayout-part-2/ - https://codelabs.developers.google.com/codelabs/constraint-layout/#0