Compose Modifiers

You can tweak how a composable looks and behaves using modifiers. We'll go through different types of modifiers like layout modifier, graphics modifiers. We'll also look at reusing modifiers and creating custom modifiers. In the end developers will be able to create better and more performant UIs using compose modifiers

Transcript

1. Beatrice Kinya
   Android Engineer | Android Author @ Kodeco
   Twitter: @B__Kinya | LinkedIn: Beatrice Kinya
   

   View Slide

2. Compose Modifiers
   

   View Slide

3. ❖ Modifiers allow you to change appearance and behaviour of your
   composables.
   

   View Slide

4. Order of Precedence
   Sample 1
   

   View Slide

5. Order of Precedence
   Sample 2
   

   View Slide

6. Constraints
   ❖ Constraints determine the minimum and maximum bounds for a node
   size
   ❖ Constraints are passed down from parent to child in a UI tree
   

   View Slide

7. Constraints
   

   View Slide

8. Constraints
   

   View Slide

9. Constraints
   

   View Slide

10. Constraints
    

    View Slide

11. View Slide

12. View Slide

13. Types of Modifiers
    ❖ There are various types of modifiers
    ➢ Layout
    ➢ Semantics
    ➢ Draw
    ➢ Graphics
    ➢ Animation
    ➢ Etc.
    

    View Slide

14. layout Modifier(Modifier.layout)
    ❖ Measures and places a single element.
    ❖ Creates a layout modifier that changes how an element is measured and laid out.
    

    View Slide

15. Let’s create a custom layout modifier
    ❖ A feed detail screen, the message takes ¾ of the entire screen. Then comments can
    take up the remaining space.
    

    View Slide

16. Custom layout modifier
    

    View Slide

17. Layout modifiers
    ❖ Example implementation of layout modifiers include:
    ➢ Modifier.padding()
    ➢ Modifier.size()
    ➢ FillModifier - This implementation is shared by fillMaxSize,
    fillMaxWidth, fillMaxHeight modifiers.
    

    View Slide

18. Intrinsic Measurements
    ❖ Intrinsic are used to estimate size of the children layout before they are
    actually measured.
    ❖ For instance, a column that is as wide as its widest child layout.
    ❖ IntrinsicWidth(max|min) - Estimates maximum or minimum
    width you can place your content
    ❖ IntrinsicHeight(max|min) - Estimates maximum or minimum
    height you can place your content
    

    View Slide

19. Let’s create a column as wide as it’s widest child
    

    View Slide

20. Interlude: Compose phases
    

    View Slide

21. Drawing Phase
    ❖ Drawing phase follows the following steps:
    ➢ Offset drawing. Compose applies required offset to match the ones set
    during layout phase.
    ➢ Checks if there is Drawing Layer and draws it.
    ➢ Checks if there are DrawModifiers and draws them, in order.
    ➢ Call draw() function to eventually draw all the nodes.
    

    View Slide

22. Drawing Layer
    ❖ Optional
    ❖ Modifier.graphicsLayer makes a composable to draw into the draw layer
    ❖ It is used to apply transformations to composables like rotation, translation, scale
    etc.
    

    View Slide

23. Drawing Layer
    

    View Slide

24. Drawing Layer
    ❖ Provides isolation for it’s drawing instructions
    ❖ Can be invalidated separately from its parents.
    

    View Slide

25. Drawing Layer
    Sample 1: Recomposes the parent ☹
    Source: JetSnack App
    

    View Slide

26. Drawing Layer
    Sample 2: Defer reading to draw phase 😃
    Source: JetSnack App
    

    View Slide

27. Drawing Layer
    Deferring reading to draw phase
    Read more about this here 󰗓 Debugging Recomposition
    

    View Slide

28. Draw Modifiers
    ❖ After the drawing layer(if it exists ), compose checks for draw modifiers.
    ❖ If any draw modifiers are defined, compose draws them in the order the are
    declared.
    ❖ Draw modifiers include
    ➢ drawWithContent
    ➢ drawBehind
    ➢ drawWithCache
    Read more about Draw Modifiers from the Official Docs
    

    View Slide

29. Re-using Modifiers
    

    View Slide

30. End! Questions
    

    View Slide

31. Resources
    ❖ Measuring and drawing in compose:
    https://effectiveandroid.substack.com/p/measuring-and-drawing-in-jetpack?utm_source=composables
    ❖ Debugging recomposition:
    https://medium.com/androiddevelopers/jetpack-compose-debugging-recomposition-bfcf4a6f8d37
    ❖ Custom layouts and graphics in compose: https://www.youtube.com/watch?v=xcfEQO0k_gU
    ❖ Graphics modifiers: https://developer.android.com/jetpack/compose/graphics/draw/modifiers#drawing-modifiers
    ❖ https://www.youtube.com/watch?v=OeC5jMV342A&list=RDCMUCVHFbqXqoYvEWM1Ddxl0QDg&start_radio=1
    &rv=OeC5jMV342A&t=204
    

    View Slide