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
2. Compose Modifiers
3. ❖ Modifiers allow you to change appearance and behaviour of your composables.
4. Order of Precedence Sample 1
5. Order of Precedence Sample 2
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
7. Constraints
8. Constraints
9. Constraints
10. Constraints
13. Types of Modifiers ❖ There are various types of modifiers ➢ Layout ➢ Semantics ➢ Draw ➢ Graphics ➢ Animation ➢ Etc.
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.
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.
16. Custom layout modifier
17. Layout modifiers ❖ Example implementation of layout modifiers include: ➢ Modifier.padding() ➢ Modifier.size() ➢ FillModifier - This implementation is shared by fillMaxSize, fillMaxWidth, fillMaxHeight modifiers.
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
19. Let’s create a column as wide as it’s widest child
20. Interlude: Compose phases
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.
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.
23. Drawing Layer
24. Drawing Layer ❖ Provides isolation for it’s drawing instructions ❖ Can be invalidated separately from its parents.
25. Drawing Layer Sample 1: Recomposes the parent ☹ Source: JetSnack App
26. Drawing Layer Sample 2: Defer reading to draw phase 😃 Source: JetSnack App
27. Drawing Layer Deferring reading to draw phase Read more about this here 󰗓 Debugging Recomposition
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
29. Re-using Modifiers
30. End! Questions
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