Modifiers: The secret sauce of Jetpack Compose

Jetpack compose provides powerful and intuitive Kotlin APIs for building native app UI. Modifiers are one of them and my favorite API.

In this talk, we'll dive deep into modifiers and learn how to use them to customize the look and behavior of our UI components. We'll look at creating custom modifiers and reusing modifiers.

Then, we'll also explore some of the best practices using modifiers.

At the end of the talk, we'll have learned how to use modifiers to build robust and flexible UIs.

Transcript

1. Beatrice Kinya GDE for Android | Android Engineer Also, I create content @ Droicon or @Kodeco Twitter: @B__Kinya | LinkedIn: Beatrice Kinya
2. Modifiers Jetpack Compose
3. Jetpack Compose Phases
4. Layout Phase Source: Android Docs
5. What are Modifiers? - Modifiers allow you to modify your composables - Change appearance, size and/or behaviour - Add information to a composable like accessibility labels - And more 😃
6. There are different types of modifiers - Size - Layout - Graphics - Drawing - Semantics - Actions - Animations - Position - Scroll - Testing ….
7. Code 󰟲󰞦
8. Layout Phase Cont’ - In Compose, a composable can only measure it’s children once. If you try to measure twice, It’ll throw a runtime exception. - However, they’re time you need information about your children before measuring them - For instance, I want to get the width of the widest child, then measure the remaining children. - To achieve this, you can either use SubcomposeLayout or Intrinsic measurements.
9. Layout Phase Cont’ - Intrinsics let you query the composables before they are actually measured. - IntrinsicWidth(min|max): Gives the minimum/maximum width you can paint content properly - IntrinsicHeight(min|max): Gives the minimum/maximum height you can paint content properly
10. Some Code
11. More requirements - Image centered in the parent composable, i.e. the Column - Contact content centered in the parent.
12. layout Modifier - layout modifier allows you to modify the way your composable is measured and laid out in your compose UI.
13. Chaining Size Multiple Modifier doesn’t work Let’s look at this code:
14. Chaining Multiple Modifier doesn’t work - Modifiers follow order of precedence.
15. Chaining Multiple Modifier doesn’t work - What about when a smaller or bigger size is requested? - Modifier will try to match passed constraints as closely as it can.
16. Chaining Multiple Modifier doesn’t work - The first size modifier set minimum and maximum constraints to a fixed value. - The second size modifier request a smaller size, but it still needs to adhere to the set constraints. So it does not override the already set values
17. Wanna learn more about Constraints and Modifiers? Check out this episode of MAD Skills: Compose Layouts and Modifiers https://medium.com/androiddevelopers/constraints-and-modifier-order-a3912461ecd6
18. Good practices while using modifiers
19. - Always provide a modifier to your composables. - Why? - This allows the parents to customize the composable - To maintain parent/child relationship - Avoid implicit layout behaviour Article: Always provide a Modifier parameter: https://chrisbanes.me/posts/always-provide-a-modifier/
20. - Modifiers should have default values - Do not re-use modifiers Find out more here: https://twitter.github.io/compose-rules/rules/#modifiers
21. Resources - List of compose modifiers: https://developer.android.com/jetpack/compose/modifiers-list - SubcomposeLayout: https://kinya.hashnode.dev/custom-compose-layouts - Intrinsic measurements: https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements - Constraints and Modifiers: https://medium.com/androiddevelopers/constraints-and-modifier-order-a3912461 ecd6 - Always Provide a Modifier: https://chrisbanes.me/posts/always-provide-a-modifier/ - Twitter Compose RulesL https://twitter.github.io/compose-rules/rules/
22. Thank you! Twitter: @B__Kinya LinkedIn: Beatrice Kinya
23. QnA