Effective Android

Share this post

Modifiers: order of precedence

newsletter.jorgecastillo.dev

Modifiers: order of precedence

A basic visual example on how modifier order affects the final result in Jetpack Compose

Jorge Castillo
Oct 25, 2022
6
Share
Share this post

Modifiers: order of precedence

newsletter.jorgecastillo.dev

Let’s say we have a rounded Image. To achieve the rounded effect, we can clip it. That can be done using the clip modifier, or alternatively the shadow one, in case we want to clip with a shadow:

What happened, in order:

  1. padding: 16.dp padding is added to Layout.

  2. size: After adding the 16.dp padding, we set a 102.dp size. This means that the overall size of the Layout is 16.dp + 102.dp now.

  3. shadow: the shadow is set to the resulting inner 102.dp area, and clipped using CircleShape. The result is a circled shadow with a diameter of 102.dp.

  4. clickable: The circled shadow clipping the image is made clickable.

Now, let’s move the click modifier all the way up to the first position. Everything else stays the same. Let’s see what changes:

Does not look great anymore! This is what happened now:

  1. clickable: the whole Layout area becomes clickable.

  2. padding: 16.dp padding is added within that (already clickable) area

  3. size: Within the 16.dp padding, a size of 102.dp is set. The overall size of the Layout is 16.dp + 102.dp now.

  4. shadow: the shadow is set to the inner 102.dp area, and clipped using CircleShape.

6
Share
Share this post

Modifiers: order of precedence

newsletter.jorgecastillo.dev
Comments
Top
New
Community

No posts

Ready for more?

© 2023 Jorge Castillo
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing