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

Compose Modifiers

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

Beatrice Kinya

March 25, 2023

More Decks by Beatrice Kinya

Other Decks in Programming


  1. Constraints ❖ Constraints determine the minimum and maximum bounds for

    a node size ❖ Constraints are passed down from parent to child in a UI tree
  2. Types of Modifiers ❖ There are various types of modifiers

    ➢ Layout ➢ Semantics ➢ Draw ➢ Graphics ➢ Animation ➢ Etc.
  3. layout Modifier(Modifier.layout) ❖ Measures and places a single element. ❖

    Creates a layout modifier that changes how an element is measured and laid out.
  4. 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.
  5. Layout modifiers ❖ Example implementation of layout modifiers include: ➢

    Modifier.padding() ➢ Modifier.size() ➢ FillModifier - This implementation is shared by fillMaxSize, fillMaxWidth, fillMaxHeight modifiers.
  6. 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
  7. 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.
  8. 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.
  9. Drawing Layer ❖ Provides isolation for it’s drawing instructions ❖

    Can be invalidated separately from its parents.
  10. Drawing Layer Deferring reading to draw phase Read more about

    this here 󰗓 Debugging Recomposition
  11. 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
  12. 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