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

Modifiers: The secret sauce of Jetpack Compose

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.

Beatrice Kinya

October 09, 2023

More Decks by Beatrice Kinya

Other Decks in Technology


  1. Beatrice Kinya GDE for Android | Android Engineer Also, I

    create content @ Droicon or @Kodeco Twitter: @B__Kinya | LinkedIn: Beatrice Kinya
  2. 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 😃
  3. There are different types of modifiers - Size - Layout

    - Graphics - Drawing - Semantics - Actions - Animations - Position - Scroll - Testing ….
  4. 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.
  5. 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
  6. More requirements - Image centered in the parent composable, i.e.

    the Column - Contact content centered in the parent.
  7. layout Modifier - layout modifier allows you to modify the

    way your composable is measured and laid out in your compose UI.
  8. 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.
  9. 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
  10. 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
  11. - 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/
  12. - Modifiers should have default values - Do not re-use

    modifiers Find out more here: https://twitter.github.io/compose-rules/rules/#modifiers
  13. 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/
  14. QnA