Modifiers: order of precedence

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

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.