Hey guys, I asked this stack overflow but didn't get the answer. I am working on ripple effect in je...

# compose

[KotlinLeaner]

Hey guys, I asked this stack overflow but didn't get the answer. I am working on ripple effect in jetpack compose. I provide my color and after clicking on view it show some time correct color after that different type of color showing like dark grey on press state.

[KotlinLeaner]

binding.itemComposable.setContent {
            Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(12.dp)) {
                val options = getOptions()
                options.forEachIndexed { _, optionText ->
                    val interactionSource = remember { MutableInteractionSource() }
                    val isPressed by interactionSource.collectIsPressedAsState()
                    val backgroundColor = if (isPressed) DuckEggBlue else OffWhite
                    val textColor = if (isPressed) TealBlue else Slate
                    val borderWidth = if (isPressed) 1.dp else 0.dp
                    val borderColor = if (isPressed) Aqua else OffWhite
                    Surface(
                        onClick = {
                            logE("Item Click")
                        },
                        shape = RoundedCornerShape(4.dp),
                        border = BorderStroke(borderWidth, borderColor),
                        interactionSource = interactionSource
                    ) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(backgroundColor)
                                .padding(16.dp),
                            text = optionText,
                            style = Typography.h3,
                            fontWeight = FontWeight.Medium,
                            color = textColor
                        )
                    }
                }
            }
        }

[KotlinLeaner]

I cannot add image, instead i added my youtube video. Please have a look.

val DuckEggBlue = Color(0xFFF0FCFC)

This is my color which I am using.

[KotlinLeaner]

tried from this doc

@Immutable
private object SecondaryRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = RippleTheme.defaultRippleColor(
        contentColor = DuckEggBlue,
        lightTheme = true
    )

    @Composable
    override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
        contentColor = DuckEggBlue,
        lightTheme = true
    )
}

In my code

CompositionLocalProvider(LocalRippleTheme provides SecondaryRippleTheme) {
            Text(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(OffWhite)
                    .padding(16.dp),
                text = optionText,
                style = Typography.h3,
                fontWeight = FontWeight.Medium,
                color = textColor
            )
    }

but nothing works. It still grey ripple effect.

[oianmol]

you need to work with Indication, so there's something called rememberRipple() which takes in the ripple color also, ideally it would take the colors from the default ripple theme! @KotlinLeaner

[oianmol]

If you see the IMPL for MaterialRippleTheme

@Composable
    override fun defaultColor() = RippleTheme.defaultRippleColor(
        contentColor = LocalContentColor.current,
        lightTheme = MaterialTheme.colors.isLight
    )

    @Composable
    override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
        contentColor = LocalContentColor.current,
        lightTheme = MaterialTheme.colors.isLight
    )

It takes in the contentColor!

[KotlinLeaner]

I tried this in my surface but nothing works

Surface(
    onClick = {
        println("Item Click")
    },
    shape = RoundedCornerShape(4.dp),
    border = BorderStroke(borderWidth, borderColor),
    interactionSource = interactionSource
    indication = rememberRipple(bounded = false),
)

@oianmol I am doing correct?

[KotlinLeaner]

but still don't work..

[oianmol]

Looks like this constructor is deprecated, the one which takes in an indication.

[oianmol]

the rememberRipple() also takes in a color

[oianmol]

can you give it color by yourself ?

[KotlinLeaner]

ok trying now

[oianmol]

@Composable
public fun rememberRipple(
    bounded: Boolean = true,
    radius: Dp = Dp.Unspecified,
    color: Color = Color.Unspecified
)

[KotlinLeaner]

building my application

[oianmol]

Is the code committed somewhere ?

[KotlinLeaner]

No it's my college private repository.

[KotlinLeaner]

I'll make a copy

[oianmol]

Also ideally you don't need to do anything special for a color, it depends on the contentColor which is calculated from

fun Colors.contentColorFor(backgroundColor: Color): Color {
    return when (backgroundColor) {
        primary -> onPrimary
        primaryVariant -> onPrimary
        secondary -> onSecondary
        secondaryVariant -> onSecondary
        background -> onBackground
        surface -> onSurface
        error -> onError
        else -> Color.Unspecified
    }
}

[KotlinLeaner]

and share with you

[KotlinLeaner]

give me few min

[oianmol]

also you don't need to give your interactionSource since Surface makes one for you

[oianmol]

Also is this Compose Desktop or Mobile ? 🤔

[KotlinLeaner]

It's moblie

[KotlinLeaner]

@oianmol this is github repo.

[oianmol]

rememberRipple(bounded = true, color = TealBlue)

[KotlinLeaner]

yes it working now. what is the use of bounded = true ?

[oianmol]

It has something to do with the origin for the ripple

[oianmol]

internal fun Density.getRippleEndRadius(bounded: Boolean, size: Size): Float {
    val radiusCoveringBounds =
        (Offset(size.width, size.height).getDistance() / 2f)
    return if (bounded) {
        radiusCoveringBounds + BoundedRippleExtraRadius.toPx()
    } else {
        radiusCoveringBounds
    }
}

[KotlinLeaner]

okk now I got it.

[KotlinLeaner]

I really appreciate it.

[oianmol]

Anytime bro!