1

I am working on ripple effect in jetpack compose. I provide my color and after clicking on view it show some time after that different type of color showing like dark grey on press state.

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
                        )
                    }
                }
            }
        }

Expected Output

enter image description here

Above image is see clearly ripple effect.

Actual output

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.

Can anyone guide me what is wrong here.

UPDATE

I 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.

Kotlin Learner
  • 3,995
  • 6
  • 47
  • 127

1 Answers1

3

I tried many options Box, Surface, using PointerInput to delay but maybe visually it doesn't work when you change background color with same ripple

Surface(
    modifier = Modifier
        .indication(
            interactionSource = interactionSource,
            rememberRipple(
                color = Color.Cyan
            )
        )
    ,
    shape = RoundedCornerShape(4.dp),
    contentColor = backgroundColor,
    border = BorderStroke(borderWidth, borderColor),
    onClick = {},
    interactionSource = interactionSource

    ) {
    Text(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        text = optionText,
        fontWeight = FontWeight.Medium,
        color = textColor
    )
}

With Color.Cyan

enter image description here

If you don't change color when pressed ripple is more apparent but your color is too light to apply for ripple as i tested with other colors.

enter image description here

with PointerInput I tried by changing is pressed to Boolean with initial false value

                    Modifier.pointerInput(Unit) {
                        detectTapGestures(onPress = { offset ->
                            isPressed = true
                            val press = PressInteraction.Press(offset)
//                            delay(50)
                            interactionSource.emit(press)
                            tryAwaitRelease()
                            interactionSource.emit(PressInteraction.Release(press))
                            isPressed = false
                        })
                    }
Thracian
  • 43,021
  • 16
  • 133
  • 222
  • Okk got it. I really appreciate it. – Kotlin Learner Aug 02 '22 at 19:49
  • Gray ripple is noticable if you don't set ripple color. Also even if change to `DuckEggBlue ` color after pressed if you use a darker color it's still noticeable. Ripple needs to be darker than original color. You can darken a color by converting it HSV or HSL. With HSL color you can lower lightness to have darker tone – Thracian Aug 02 '22 at 20:00
  • Sure, I'll do that. Thanks .. – Kotlin Learner Aug 02 '22 at 20:01
  • Did that work for you @vivekmodi. And you can add gifs if you want to. You can use a website to convert your video to gif to put on stackoverflow. i use ezgif.com for conversion, scaling, and cropping – Thracian Aug 03 '22 at 05:29
  • yes color is too light so I made to make darker and use your 1st option code and all are working fine to me. – Kotlin Learner Aug 03 '22 at 08:33
  • can you help me on [issue](https://stackoverflow.com/q/73250986/11560810). – Kotlin Learner Aug 05 '22 at 15:04