Mastering ConstraintLayout in Android - GDG Johannesburg

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.

2a37bf1e025cc1523124774c760df91a?s=128

Rebecca Franks

October 04, 2017
Tweet

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>
  20. None
  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)
  39. None
  40. None
  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

  49. None
  50. @riggaroo Layout Inspector

  51. None
  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