I want to remove ripple effect from button, but still have onSurface color on it.
For example, this is button before pressing
i want to achieve this after pressing button.
Here is my current code.
val MyRippleConfiguration =
RippleConfiguration(color = Color.Red, rippleAlpha = RippleAlpha(0f,0f,0f,0f))
CompositionLocalProvider(LocalRippleConfiguration provides MyRippleConfiguration){
Button(
modifier = Modifier.fillMaxWidth().padding(4.dp).bounceClickEffect(),
onClick = {
}) {
Text(
text = "Sign up free",
color = colorResource(id = R.color.black),
fontWeight = FontWeight.Bold,
fontSize = 16.sp
)
}
}
fun Modifier.bounceClickEffect() = composed {
var isPressed by remember { mutableStateOf(false) }
val scale by animateFloatAsState(if (isPressed) 0.98f else 1f)
this
.graphicsLayer {
scaleX = scale
scaleY = scale
}
.pointerInput(isPressed) {
awaitPointerEventScope {
isPressed = if (isPressed) {
waitForUpOrCancellation()
false
} else {
awaitFirstDown(false)
true
}
}
}
}
i tried to change values of RippleAlpha object but i were unable to achieve it.
I were able to achieve the questions in two ways.
Here is the solution in my case.
var color by remember { mutableStateOf(Color.White) }
TextButton(modifier = Modifier
.bounceClickEffect(Color.Transparent, Color.Transparent)
.pointerInteropFilter {
when (it.action) {
MotionEvent.ACTION_DOWN -> {
color = Color.Gray
}
MotionEvent.ACTION_UP -> {
color = Color.White
}
}
true
},onClick ={
}, colors = ButtonDefaults.textButtonColors(containerColor = Color.Transparent)){
Text(text="Log in", fontSize = 16.sp,fontWeight = FontWeight.Bold, color = color)
}
Second solution is to use animateColorAsState on Modifier
fun Modifier.bounceClickEffect(pressedColor:Color,releasedColor:Color) =
composed {
var isPressed by remember { mutableStateOf(false) }
val scale by animateFloatAsState(if (isPressed) 0.98f else 1f)
val backgroundColor by animateColorAsState(if (isPressed) pressedColor else
releasedColor)
this
.graphicsLayer {
scaleX = scale
scaleY = scale
}
.background(
color = backgroundColor,
shape = RoundedCornerShape(20.dp)
) // Apply color to background
.pointerInput(isPressed) {
awaitPointerEventScope {
isPressed = if (isPressed) {
waitForUpOrCancellation()
false
} else {
awaitFirstDown(false)
true
}
}
}
.height(40.dp)
}
I just specify a lighter shade at the beginning then a darker shade