CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-navigation-barandroid-jetpack-compose-material3
Renattele Renattele
Renattele Renattele

Reputation: 2276

Wrong ripple in material3 NavigationBar in Jetpack Compose

When I use Material3 NavigationBar in Jetpack Compose I get wrong rectangular ripple effect like this:

enter image description here

Material3 library version: 1.0.0-alpha06 Code:

NavigationBar(modifier = Modifier.navigationBarsPadding()) {
                NavigationBarItem(
                    selected = ...,
                    onClick = {
                        navController.navigate(ScreenComponents(context).mainScreen) {
                            launchSingleTop = true
                        }
                    },
                    icon = {
                        ...
                    },
                    alwaysShowLabel = false,
                    label = {
                        Text(text = ..., color = MaterialTheme.colorScheme.onSurface)
                    }
                )
                // ...

Upvotes: 3

Views: 2886

Answers (4)

Hawklike
Hawklike

Reputation: 1171

I managed to remove a ripple effect on the pill by specifying a custom interaction source:

private object NoRippleInteractionSource : MutableInteractionSource {

    override val interactions: Flow<Interaction> = emptyFlow()

    override suspend fun emit(interaction: Interaction) {}

    override fun tryEmit(interaction: Interaction) = true
}

and passing this interaction source as an argument:

NavigationBarItem(
    interactionSource = NoRippleInteractionSource,
    selected = isSelected,
    onClick = onClick,
    ...
)

Upvotes: 2

Henry Twist
Henry Twist

Reputation: 5980

They seem to have changed the guideline images since the answer from @Gabriele Mariotti and now the ripple only appears on the 'pill'.

Guidelines

There is an easy way to disable the ripple entirely, but not to isolate it to the pill. Hopefully they update this before the M3 composables come out of alpha.

private object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Transparent

    @Composable
    override fun rippleAlpha() = RippleAlpha(0F, 0F, 0F, 0F)
}

CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
        NavigationBar {
            ...

Upvotes: 3

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363429

It is not a bug. It follows the material guidelines.

enter image description here

Upvotes: 4

Richard Ory
Richard Ory

Reputation: 234

In NavigationBarItem I use this modifier to change the shape of the ripple

modifier = Modifier
    .padding(4.dp)
    .background(MaterialTheme.colorScheme.background, RoundedCornerShape(24.dp))
    .clip(RoundedCornerShape(24.dp))

Upvotes: 2

Related Questions