androidandroid-jetpack-compose

Disable ripple effect of DropdownMenu and DropdownMenuItem in Jetpack Compose


In Jetpack Compose, how can I disable ripple effect (or adjust it) when clicking on DropdownMenu (and DropdownMenuItem also)

I tried using Modifier.clickable with indication = null but it didn't work:

DropdownMenu(
    expanded = expanded,
    onDismissRequest = { expanded = false },
    modifier = Modifier
        .clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = null,
            onClick = { }
        )
    )

Do you have any solutions?


Solution

  • After a long time without finding a solution. I recently came up with one that works, not sure if it's the best practice but at least it helped me solve the problem.

    Not just in the case of DropdownMenuItem, but all Composables that have an interactionSource parameter.

    I created a custom MutableInteractionSource class:

    class NoRippleInteractionSource : MutableInteractionSource {
        override val interactions: Flow<Interaction> = emptyFlow()
        override suspend fun emit(interaction: Interaction) {}
        override fun tryEmit(interaction: Interaction) = true
    }
    

    Then passed it into the interactionSource parameter:

    interactionSource = NoRippleInteractionSource()