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
   

   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
    hello@riggaroo.co.za
    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