Conditional: grayscale

An element loses its color while a condition is true.

Grayscale drains the color from an element while a condition holds and brings it back when it ends. It is the “disabled” or “unavailable” look: an expired card, a sold-out product, an offline device.

Usage

The sample grays out a payment card once it has expired.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.jantursky.kapow.ConditionalEffect
import com.jantursky.kapow.conditionalEffect

@Composable
fun PaymentCard(expired: Boolean) {
    Box(
        Modifier
            .size(width = 230.dp, height = 130.dp)
            .conditionalEffect(expired, ConditionalEffect.grayscale())
            .background(Color(0xFFFF6B5A), RoundedCornerShape(16.dp)),
    )
}

Parameters

Reduced motion

The color goes and comes back at once, without the fade.

Notes

• The change fades in and out over 0.3 s, or over the time set with fadeIn(...) and fadeOut(...).
• The element is drawn into a graphics layer of its own with a color-matrix filter. The modifier only affects what is drawn after it in the chain and the element’s children, so put it before background and the content you want grayed.
• Grayscale only changes the look. Disable input yourself, for example with enabled = false on the control.

Live example