Is there any way to make the clickable region larger than th

Question

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 · Answer

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

Sergey Y. · Answer

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

Sergey Y. · Answer

On legacy ui system you can do things like that

Sergey Y. · Answer

``` lt ImageView android background= selectableItemBackgroundBorderless gt ```

Sergey Y. · Answer

Is there an analogy to the `selectableItemBackgroundBorderless` attribute

JD · Answer

Does this work Did using ```IconButton onClick = modifier = Modifier padding 16 dp Icon asset = Icons Filled Favorite ```

JD · Answer

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. · Answer

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

Sergey Y. · Answer

But thanks

JD · Answer

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 · Answer

the clickable is a square instead of a circle though

Sergey Y. · Answer

It can be fixed by clipping

mbonnin · Answer

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

JD · Answer

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

JD · Answer

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. · Answer

< mbonnin> you are correct It is only adds ripple effect

JD · Answer

the top and end padding just to ensure its in

Sergey Y. · Answer

< JD> Thanks

Andrey Kulikov · Answer

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 amp sq= amp ss=androidx|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 amp sq= amp ss=androidx> see the custom indication param on clickable

Andrey Kulikov · Answer

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

mbonnin · Answer

< 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 · Answer

Or does compose handle clipping differently

Adam Powell · Answer

Compose does not clip to parents by default

Colton Idle · Answer

< Adam Powell> this is inverse to the behavior in the current UI toolkit right