Sergey Y.

    Sergey Y.

    2 years ago
    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

    flosch

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

    Sergey Y.

    2 years ago
    Padding will shift the icon, it is already placed inside another container.
    On legacy ui system you can do things like that.
    <ImageView
      ...
      android:background="?selectableItemBackgroundBorderless"/>
    Is there an analogy to the
    selectableItemBackgroundBorderless
    attribute?
    JD

    JD

    2 years ago
    Does this work? Did using
    IconButton(
        onClick = {
    
        },modifier = Modifier.padding(16.dp)
    ) {
        Icon(asset = Icons.Filled.Favorite)
    }
    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.

    Sergey Y.

    2 years ago
    It will work, but in this case I have to put the icon on the upper level to keep the padding
    But thanks )
    JD

    JD

    2 years ago
    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)
    )
    the clickable is a square instead of a circle though
    Sergey Y.

    Sergey Y.

    2 years ago
    It can be fixed by clipping
    mbonnin

    mbonnin

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

    JD

    2 years ago
    you would have to get your image in if its at the edge it will clip the heart
    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.

    Sergey Y.

    2 years ago
    @mbonnin you are correct. It is only adds ripple effect
    JD

    JD

    2 years ago
    the top and end padding just to ensure its in
    Sergey Y.

    Sergey Y.

    2 years ago
    @JD Thanks)
    Andrey Kulikov

    Andrey Kulikov

    2 years ago
    but as it was mentioned already it will not make a touch target larger
    mbonnin

    mbonnin

    2 years ago
    @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
    Or does compose handle clipping differently?
    Adam Powell

    Adam Powell

    2 years ago
    Compose does not clip to parents by default
    Colton Idle

    Colton Idle

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