Reputation: 71

How do you remove the button ripple effect from the jetpack compose?

My code is as follows.

The onclick parameter is essential for the button, but is there a way to remove the ripple effect when turning on?


@Composable
fun MyButton() {

    Button(
        shape = RoundedCornerShape(4.dp),
        enabled = isEnabled,
        interactionSource = interactionSource,
        colors = ButtonDefaults.buttonColors(
            disabledBackgroundColor = getButtonDisableColor(style.styleMode),
            backgroundColor = getButtonColor(isPressed, style.styleMode)
        ),
        border = getButtonBorderColor(isEnabled, isPressed, style.styleMode),
        modifier = Modifier
            .fillMaxWidth()
            .height(style.buttonHeight)
            .padding(4.dp),
        onClick = onClick
    ) {
        Text(text = "content", fontSize = 16.dp, style = TextStyle(), color = Color.Red)
    }
}

Upvotes: 3

Answers (4)

Kumar

Reputation: 1605

Like @Влад Докин said, you need to implement your own button. You can use Box() for that.

@Composable
fun ButtonNoRipple(context: Context = LocalContext.current.applicationContext) {

    // This is used to disable the ripple effect
    val interactionSource = remember {
        MutableInteractionSource()
    }

    Box(
        modifier = Modifier
            .padding(start = 32.dp, end = 32.dp)
            .background(color = Color.Red)
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .clickable(
                indication = null, // Assign null to disable the ripple effect
                interactionSource = interactionSource
            ) {
                Toast
                    .makeText(context, "No Ripple Click", Toast.LENGTH_SHORT)
                    .show()
            },
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "No Ripple",
            fontSize = 20.sp,
            color = Color.White,
            fontWeight = FontWeight.Medium
        )
    }
}

Edit:

Here is an article that shows multiple ways to disable ripple effect in Jetpack Compose.

Upvotes: 2

Влад Докин

Reputation: 1

To my opinion, answers given here is only hiding the problem. As i see to remove ripple from button, you need to implement your own button. If you look to the sources of Button composable, you would see what ripple effect is a part of button, and you cant remove it from outside. (I think it's a part of material design to show ripple on elements you can click)

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    val contentColor by colors.contentColor(enabled)
    Surface(
        modifier = modifier,
        shape = shape,
        color = colors.backgroundColor(enabled).value,
        contentColor = contentColor.copy(alpha = 1f),
        border = border,
        elevation = elevation?.elevation(enabled, interactionSource)?.value ?: 0.dp,
        onClick = onClick,
        enabled = enabled,
        role = Role.Button,
        interactionSource = interactionSource,
        indication = rememberRipple()
    ) {
        CompositionLocalProvider(LocalContentAlpha provides contentColor.alpha) {
            ProvideTextStyle(
                value = MaterialTheme.typography.button
            ) {
                Row(
                    Modifier
                        .defaultMinSize(
                            minWidth = ButtonDefaults.MinWidth,
                            minHeight = ButtonDefaults.MinHeight
                        )
                        .padding(contentPadding),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically,
                    content = content
                )
            }
        }
    }
}

We're looking here for Surface param "indication", and if you want to remove ripple, just make your own button and set it to "null".

Upvotes: 0

Sergei S

Reputation: 3097

compose 1.0.3

Shin Dong Hwi's solution is good, but works partially for me. I can still see the shadow around the button

How to fix? It is necessary to set the elevation value to zero

Button(
    onClick = {},
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color.Cyan,
        contentColor = Color.Cyan
    ),
    elevation = ButtonDefaults.elevation(
        defaultElevation = 0.dp,
        pressedElevation = 0.dp,
        disabledElevation = 0.dp
    )
) {
    Text(text = "Text", color = Color.Black)
}

Upvotes: 1

Shin Dong Hwi

Reputation: 71

I'm solved, set Content Color!

colors = ButtonDefaults.buttonColors(
            disabledBackgroundColor =getButtonDisableColor(style.styleMode),
            backgroundColor = getButtonColor(isPressed, style.styleMode),
            contentColor = !!! 
        )

Upvotes: 2

How do you remove the button ripple effect from the jetpack compose?

Answers (4)

Edit:

Related Questions