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
Tweet

More Decks by Beatrice Kinya

Other Decks in Technology

Transcript

  1. Beatrice Kinya
    GDE for Android | Android Engineer
    Also, I create content @ Droicon or @Kodeco
    Twitter: @B__Kinya | LinkedIn: Beatrice
    Kinya

    View full-size slide

  2. Modifiers
    Jetpack Compose

    View full-size slide

  3. Jetpack Compose Phases

    View full-size slide

  4. Layout Phase
    Source: Android Docs

    View full-size slide

  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 😃

    View full-size slide

  6. There are different types of modifiers
    - Size
    - Layout
    - Graphics
    - Drawing
    - Semantics
    - Actions
    - Animations
    - Position
    - Scroll
    - Testing ….

    View full-size slide

  7. Code 󰟲󰞦

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  10. More requirements
    - Image centered in the parent composable, i.e. the Column
    - Contact content centered in the parent.

    View full-size slide

  11. layout Modifier
    - layout modifier allows you to modify the way your composable is measured and
    laid out in your compose UI.

    View full-size slide

  12. Chaining Size Multiple Modifier doesn’t work
    Let’s look at this code:

    View full-size slide

  13. Chaining Multiple Modifier doesn’t work
    - Modifiers follow order of precedence.

    View full-size slide

  14. 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.

    View full-size slide

  15. 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

    View full-size slide

  16. 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

    View full-size slide

  17. Good practices while using modifiers

    View full-size slide

  18. - 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/

    View full-size slide

  19. - Modifiers should have default values
    - Do not re-use modifiers
    Find out more here: https://twitter.github.io/compose-rules/rules/#modifiers

    View full-size slide

  20. 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/

    View full-size slide

  21. Thank you!
    Twitter: @B__Kinya
    LinkedIn: Beatrice Kinya

    View full-size slide