Skip to content

Instantly share code, notes, and snippets.

@delacrixmorgan
Created December 29, 2022 11:08
Show Gist options
  • Save delacrixmorgan/f1f0e3ecbed41ea1f6d1a858895ea78e to your computer and use it in GitHub Desktop.
Save delacrixmorgan/f1f0e3ecbed41ea1f6d1a858895ea78e to your computer and use it in GitHub Desktop.
Compose UI - No Ripple Theme

By default, Android has ripple effect for all clickable objects. If you want to disable the ripple effect, you will need to wrap it in a LocalRippleTheme.

private object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Unspecified

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0f, 0.0f, 0.0f, 0.0f)
}

CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
    Button(
        enabled = isEnabled,
        onClick = {},
        shape = RoundedCornerShape(12.dp),
        interactionSource = interactionSource,
        colors = ButtonDefaults.buttonColors(
            containerColor = if (pressed) activeYellowColor else secondaryYellowColor,
            disabledContainerColor = lightGreyColor
        ),
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 8.dp)
    ) {
        Text(
            text = "Primary Button without Ripple",
            modifier = Modifier
                .padding(vertical = 6.dp),
            style = LocalTextStyle.current.merge(
                TextStyle(
                    fontSize = 16.sp,
                    lineHeight = 22.sp,
                    color = if (isEnabled) secondaryTealColor else greyColor,
                    fontFamily = maisonNeueFamily,
                    fontWeight = FontWeight.Bold
                )
            )
        )
    }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment