Is there any way to make the clickable region larger than the icon without making the icon size bigg...

# compose

[Sergey Y.]

Is there any way to make the clickable region larger than the icon without making the icon size bigger?
I want to achieve a borderless ripple effect and easier clicking.
Maybe some modifier?
Is there an analogy to the selectableItemBackgroundBorderless attribute?
Thanks.

[flosch]

I don’t know your implementation, but its probably adding a Modifer.padding before your Modifier.clickable that should do the trick

[Sergey Y.]

Padding will shift the icon, it is already placed inside another container.

[Sergey Y.]

On legacy ui system you can do things like that.

[Sergey Y.]

<ImageView
  ...
  android:background="?selectableItemBackgroundBorderless"/>

[Sergey Y.]

Is there an analogy to the selectableItemBackgroundBorderless attribute?

[JD]

Does this work?
Did using

IconButton(
    onClick = {

    },modifier = Modifier.padding(16.dp)
) {
    Icon(asset = Icons.Filled.Favorite)
}

[JD]

the catch here though in comparison to what you had shown was the icons were placed a lot closer but had a higher touch target for the ripple effect

[Sergey Y.]

It will work, but in this case I have to put the icon on the upper level to keep the padding

[Sergey Y.]

But thanks )

[JD]

How about this @Sergey Y.

Icon(
    asset = Icons.Filled.Favorite,
    modifier = Modifier.clickable(onClick = {

    }).padding(start = 32.dp, top = 0.dp, end = 0.dp, bottom = 32.dp)
)

[JD]

the clickable is a square instead of a circle though

[Sergey Y.]

It can be fixed by clipping

[mbonnin]

selectableItemBackgroundBorderless doesn't really increase the clickable area does it? I think it just draws in the the parent

[JD]

you would have to get your image in if its at the edge it will clip the heart

[JD]

U were right

Icon(
    asset = Icons.Filled.Favorite,
    modifier = Modifier.clip(CircleShape).clickable(onClick = {

    }).padding(start = 24.dp, top = 8.dp, end = 8.dp, bottom = 24.dp)
)

[Sergey Y.]

@mbonnin you are correct. It is only adds ripple effect

[JD]

the top and end padding just to ensure its in

[Sergey Y.]

@JD Thanks)

[Andrey Kulikov]

yes, you can have a borderless ripple similarly to what we do in IconButton https://cs.android.com/androidx/platform/frameworks/support/+/androidx-master-dev:compose/material/material/src/commonMain/kotlin/androidx/compose/material/IconButton.kt;l=24?q=rippleindication&sq=&ss=androidx. see the custom indication param on clickable

[Andrey Kulikov]

but as it was mentioned already it will not make a touch target larger

[mbonnin]

@Andrey Kulikov is it like selectableItemBackgroundBorderLess in that the parent has to be big enough to contain the ripple overflow ? I remember some bugs where the ripple was clipped because the parent wasn't big enough

[mbonnin]

Or does compose handle clipping differently?

[Adam Powell]

Compose does not clip to parents by default

[Colton Idle]

@Adam Powell this is inverse to the behavior in the current UI toolkit, right?