androidandroid-jetpack-composeandroid-jetpackandroid-compose-buttonandroid-jetpack-compose-button

Can I put animation fade in with duration between button state enable and disable in jetpack compose?


This is how i create my button in compose

 Button(
        modifier = modifier,
        enabled = enabled.value,
        onClick = {}
    ) {
        Text(text = text)
    }

Solution

  • The background color of the Button is based on the colors defined in the ButtonDefaults.buttonColors().

    A workaround is to define the same color to disabledBackgroundColor and backgroundColor.
    Something like:

    var isButtonEnabled by remember { mutableStateOf(true) }
    val animateStateButtonColor = animateColorAsState(
        targetValue = if (isButtonEnabled) Color.Blue else Teal200,
        animationSpec = tween(2000, 0, LinearEasing)
    ) 
    
    Button(
        colors = ButtonDefaults.buttonColors(
            backgroundColor = animateStateButtonColor.value,
            disabledBackgroundColor = animateStateButtonColor.value,
        ),
        enabled = isButtonEnabled,
        onClick = { /* ... */ }
    ) {
        Text(text = "Button")
    }