Blog Infos
Author
Published
Topics
Published

Photo by Ave Calvar on Unsplash

 

When working with some widgets in Compose, we get the ripple effect out of the box. While this is a nice visual effect to have, sometimes it just doesn’t work well with the design in mind, so we have to find a way to get rid of it.

I was facing this same dilemma when designing a toggleable widget layout recently, but after some tinkering, I was able to get rid of it, and it’s as simple as using a Kotlin extension function.

Toggleable…
fun Modifier.noRippleToggleable(
    value: Boolean,
    onValueChange: (Boolean) -> Unit
): Modifier = composed {
    toggleable(
        value = value,
        indication = null,
        interactionSource = remember { MutableInteractionSource() },
        onValueChange = onValueChange
    )
}

What I did was simple extend the compose modifier public interface and call the base toggleable modifier but with little adjustment to the indication parameter we change the value to null, that all and we apply it like this

Column(
    modifier =
    Modifier
        .wrapContentSize()
        .noRippleToggleable(
            value = isSelected,
        ) {
            //onValuChangeImplementation
        },
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
//your composable here
}
Clickable…
inline fun Modifier.noRippleClickable(
    crossinline onClick: () -> Unit
): Modifier = composed {
    clickable(
        indication = null,
        interactionSource = remember { MutableInteractionSource() }) {
        onClick()
    }
}

Just like we did with the Toggleable modifier above, we just need to give the indication parameter null value, and it is applied below

Column(
    modifier =
    Modifier
        .wrapContentSize()
        .noRippleClickable(
          onClick()
        ) {
            //onValuChangeImplementation
        },
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
//your composable here
}

Thanks for joining me on this journey. I hope you found this information useful and informative. If there’s anything you’re curious about or if I missed anything important, please don’t hesitate to reach out and ask!

I’m here to help, and I promise to respond to every comment. Let’s keep the conversation going!

Until next time, I’m Jnr. Bye for now! 🖤

This article was originally published on proandroiddev.com

Job Offers

Job Offers


    Android Team Lead

    Komoot
    Remote EMEA
    • Full Time
    apply now

    Developer Relations Engineer

    Embrace
    United States
    • Full Time
    apply now

    Information Security Engineer

    MongoDB
    London, UK
    • Full Time
    apply now

OUR VIDEO RECOMMENDATION

,

Exploration of Touch & Input in Jetpack Compose

etpack Compose has a layered approach to user interaction handling, all the way from high-level onClick parameters to dealing directly with low-level touch input. In this talk we’ll cover all these levels, discussing composable parameters,…
Watch Video

Exploration of Touch & Input in Jetpack Compose

Jolanda Verhoef
Android Developer Relations Engineer
Google

Exploration of Touch & Input in Jetpack Compose

Jolanda Verhoef
Android Developer Re ...
Google

Exploration of Touch & Input in Jetpack Compose

Jolanda Verhoef
Android Developer Relatio ...
Google

Jobs

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
blog
Yes! You heard it right. We’ll try to understand the complete OTP (one time…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu