https://kotlinlang.org logo
Join Slack
Powered by
Hey guys, I asked this stack overflow but didn't g...
# compose
k
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.
Copy code
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
                        )
                    }
                }
            }
        }
I cannot add image, instead i added my youtube video. Please have a look.
Copy code
val DuckEggBlue = Color(0xFFF0FCFC)
This is my color which I am using.
tried from this doc
Copy code
@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
Copy 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.
o
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
If you see the IMPL for MaterialRippleTheme
Copy code
@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!
k
I tried this in my surface but nothing works
Copy code
Surface(
    onClick = {
        println("Item Click")
    },
    shape = RoundedCornerShape(4.dp),
    border = BorderStroke(borderWidth, borderColor),
    interactionSource = interactionSource
    indication = rememberRipple(bounded = false),
)
@oianmol I am doing correct?
but still don't work..
o
Looks like this constructor is deprecated, the one which takes in an indication.
the rememberRipple() also takes in a color
can you give it color by yourself ?
k
ok trying now
o
Copy code
@Composable
public fun rememberRipple(
    bounded: Boolean = true,
    radius: Dp = Dp.Unspecified,
    color: Color = Color.Unspecified
)
k
building my application
o
Is the code committed somewhere ?
k
No it's my college private repository.
I'll make a copy
o
Also ideally you don't need to do anything special for a color, it depends on the contentColor which is calculated from
Copy code
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
    }
}
k
and share with you
give me few min
o
also you don't need to give your 
interactionSource
since Surface makes one for you
Also is this Compose Desktop or Mobile ? 🤔
k
It's moblie
@oianmol this is github repo.
o
Copy code
rememberRipple(bounded = true, color = TealBlue)
k
yes it working now. what is the use of 
bounded = true
?
o
It has something to do with the origin for the ripple
Copy code
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
    }
}
k
okk now I got it.
I really appreciate it.
o
Anytime bro!
10 Views
Open in Slack
PreviousNext
Powered by