Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Rebecca Franks

October 04, 2017
Tweet

More Decks by Rebecca Franks

Other Decks in Programming

Transcript

  1. Mastering ConstraintLayout
    Rebecca Franks
    Android Engineering Lead at DVT
    Google Developer Expert
    @riggaroo

    View Slide

  2. -























    View Slide

  3. @riggaroo
    Problems with Standard Layouts

    View Slide

  4. @riggaroo
    Views are positioned using
    <...Layout>> elements

    View Slide

  5. @riggaroo
    Hard to customise

    View Slide

  6. @riggaroo
    Poor performance

    View Slide

  7. @riggaroo
    Animations are tricky

    View Slide

  8. @riggaroo
    How does a view get drawn on
    the screen?

    View Slide

  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

    View Slide

  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

    View Slide

  11. @riggaroo
    Draw Process in Android
    Inflation
    Measure
    Layout - onLayout()
    Draw
    Parent sizes
    and positions
    child

    View Slide

  12. @riggaroo
    Draw Process in Android
    Inflation
    Measure
    Layout
    Draw - onDraw()
    Parent Draws
    Parent tells
    children to
    draw

    View Slide

  13. @riggaroo
    Types of Android Layouts

    View Slide

  14. @riggaroo
    LinearLayout
    - Aligns children in a single direction - horizontal or
    vertical
    - Can use weights (but please avoid this!)
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >


    ... />

    View Slide

  15. @riggaroo
    RelativeLayout
    - Layout that allows you to align objects relative
    to each other or relative to the parent


    android:id="@+id/dates"
    android:layout_below="@id/name"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@+id/times" />
    android:id="@id/times"
    android:layout_below="@id/name"
    android:layout_alignParentRight="true" />

    View Slide

  16. @riggaroo
    FrameLayout
    - One single child view
    - Drawn in stack, most recent on top
    - Useful for:
    - Hiding/showing error layouts
    - Fragment stacking
    - Overlaying content

    View Slide

  17. @riggaroo
    ConstraintLayout

    View Slide

  18. -























    View Slide













  19. View Slide

  20. View Slide

  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'

    View Slide

  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

    View Slide

  23. @riggaroo
    DEMO: Constraint Layout
    Walkthrough

    View Slide

  24. @riggaroo
    Constraints
    - A constraint is the relationship
    between two views in the layout
    - Controls how those views will be
    positioned within the layout.

    View Slide

  25. @riggaroo
    Baseline Constraint
    Allows you to align two
    baselines of text in your
    widgets

    View Slide

  26. @riggaroo
    Bias
    Specifies which direction
    you want your widget to
    have bias towards.
    You can specify vertical or
    horizontal bias.

    View Slide

  27. @riggaroo
    Chains
    Control how the available space is divided between elements

    View Slide

  28. @riggaroo
    Guidelines
    - A visual guide
    which will not
    be seen at
    runtime
    - Used align
    other views to
    - Either
    horizontally or
    vertically

    View Slide

  29. @riggaroo
    Guidelines
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="16dp" />

    View Slide

  30. @riggaroo
    Barriers
    - A virtual view, similar to
    a Guideline, to which we
    can constrain objects.
    - Determined by
    dimensions of multiple
    views

    View Slide

  31. @riggaroo
    Barriers
    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" />

    View Slide

  32. @riggaroo
    Group
    - Group things
    together
    - Not the same
    as traditional
    group
    - Used to set
    visibility of all
    elements

    View Slide

  33. @riggaroo
    Group
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="textView,button" />

    View Slide

  34. @riggaroo
    Dimensions
    - Fixed aspect ratio
    - Useful for images or Video players etc
    - Specify size of view with dimension w:h

    View Slide

  35. @riggaroo
    Animating ConstraintLayout

    View Slide

  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)

    View Slide

  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)

    View Slide

  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)

    View Slide

  39. View Slide

  40. View Slide

  41. @riggaroo
    Performance Problems in Layouts

    View Slide

  42. @riggaroo
    60 FPS = ±16ms per frame

    View Slide

  43. @riggaroo
    Where are the problems?
    Deep Hierarchies increase complexity

    View Slide

  44. @riggaroo
    Where are the problems?
    Change in size/position
    Starts measure/layout starting at root

    View Slide

  45. @riggaroo
    Where are the problems?
    Some layouts need multiple
    measure/layout passes ie
    RelativeLayout, weights on
    LinearLayout

    View Slide

  46. @riggaroo
    Where are the problems?
    Lists of many copies of same
    complex layout

    View Slide

  47. @riggaroo
    Performance Profiling Tools for
    Layouts

    View Slide

  48. @riggaroo
    Hierarchy Viewer

    View Slide

  49. View Slide

  50. @riggaroo
    Layout Inspector

    View Slide

  51. View Slide

  52. @riggaroo
    GPU Overdraw
    - Colour coding
    - Times pixel is redrawn on the
    screen
    - Useful for:
    - Reducing rendering overhead

    View Slide

  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

    View Slide

  54. @riggaroo
    Summary:
    Use ConstraintLayout!
    bit.ly/docs-constraintlayout
    bit.ly/cl-lab

    View Slide

  55. Thank you!
    Rebecca Franks
    Android Engineering Lead at DVT
    @riggaroo
    [email protected]
    We’re hiring!

    View Slide

  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

    View Slide