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:
padding: 16.dp padding is added to Layout.
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.
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.
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:
clickable: the whole Layout area becomes clickable.
padding: 16.dp padding is added within that (already clickable) area
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.
shadow: the shadow is set to the inner 102.dp area, and clipped using