Apply darker ripple to Button only not Text inside : Jetpack Compose

Question

I have applied the ripple to the Button using RippleTheme but the problem is it is also getting applied over the text that is inside that Button.

Here is my code:

object RippleCustomTheme : RippleTheme {

    @Composable
    override fun defaultColor() =
        RippleTheme.defaultRippleColor(
            Color(0xFF1F7EFF),
            lightTheme = true
        )

    @Composable
    override fun rippleAlpha(): RippleAlpha =

        RippleAlpha(
            pressedAlpha = 1f,
            focusedAlpha = 0f,
            draggedAlpha = 0f,
            hoveredAlpha = 0f
        )
}

Here is how i applied it:

CompositionLocalProvider(LocalRippleTheme provides RippleCustomTheme) {
    Button(shape = RoundedCornerShape(28.dp),
        modifier = Modifier.size(120.dp),
        colors = ButtonDefaults.buttonColors(containerColor = DialPadButtonColor),
        onClick = { }) {
        
        Text(
            text = "1",
            fontSize = 25.sp,
            color = Color.Black,

        )
    }
}

The Output:

Problem:

The ripple is also applied over the text because it is greyed out. Is there any solution for that?

Answer 1

indication is drawn after drawWithContent() so it's always above content.

You can change this by using Modifier.drawWithContent yourself and drawing text or put your Button inside a Box and add another Text above it.

@Preview
@Composable
private fun ButtonRiplleTest() {
    Column {

        CompositionLocalProvider(LocalRippleTheme provides RippleCustomTheme) {
            Button(shape = RoundedCornerShape(28.dp),
                modifier = Modifier.size(120.dp),
                colors = ButtonDefaults.buttonColors(containerColor = Color.Blue),
                onClick = { }) {

                Text(
                    text = "1",
                    fontSize = 25.sp,
                    color = Color.Black,

                    )
            }

        }

        Spacer(modifier = Modifier.height(20.dp))

        val textMeasurer = rememberTextMeasurer()

        val style = MaterialTheme.typography.labelLarge.copy(fontSize = 25.sp, color = Color.Black)

        CompositionLocalProvider(LocalRippleTheme provides RippleCustomTheme) {
            Button(shape = RoundedCornerShape(28.dp),
                modifier = Modifier.size(120.dp).drawWithContent {
                    val textLayoutResult = textMeasurer.measure(
                        "1",
                        style = style
                    )
                    drawContent()
                    drawText(
                        textLayoutResult,
                        color = style.color,
                        topLeft = Offset(
                            x = (size.width-textLayoutResult.size.width)/2,
                            y = (size.height-textLayoutResult.size.height)/2,
                        )
                    )

                },
                colors = ButtonDefaults.buttonColors(containerColor = Color.Blue),
                onClick = { }) {}

        }


        Spacer(modifier = Modifier.height(20.dp))

        Box(
            contentAlignment = Alignment.Center
        ) {
            CompositionLocalProvider(LocalRippleTheme provides RippleCustomTheme) {
                Button(shape = RoundedCornerShape(28.dp),
                    modifier = Modifier.size(120.dp),
                    colors = ButtonDefaults.buttonColors(containerColor = Color.Blue),
                    onClick = { }) {

                    Text(
                        text = "1",
                        fontSize = 25.sp,
                        color = Color.Black,

                        )
                }

            }

            Text(
                text = "1",
                fontSize = 25.sp,
                color = Color.Black,

                )
        }
    }
}