Connect with us

Code

Cloudy – Jetpack Compose blur effect library

Jetpack Compose blur process library, which supports all Android versions.

The `blur` modifier supports only Android 12 and higher, and `RenderScript` APIs are deprecated starting in Android 12. Cloudy is the backport of the blur effect for Jetpack Compose.

Usage

You can implement blur effect with Cloudy composable function as seen in the below:

Cloudy {
    Text(text = "This text is blurred")
}

You can change the degree of the blur effect by changing the radius parameter of Cloudy composable function. You can only set between 0..25 integer values.

Cloudy(radius = 15) {
    Column {
        Image(..)

        Text(
          modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
          text = posterModel.name,
          fontSize = 40.sp,
          color = MaterialTheme.colors.onBackground,
          textAlign = TextAlign.Center
        )

        Text(
          modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
          text = posterModel.description,
          color = MaterialTheme.colors.onBackground,
          textAlign = TextAlign.Center
        )
    }
}

Blur Effects Depending on States

If you need to load your network image or do something heavy business logic first, you should re-execute the blur effect depending on your state. Basically, you can re-execute the blur calculation by changing the radius value, but you can also re-execute the blurring process by giving the key1 parameter to trigger internal processes.

var glideState by rememberGlideImageState()
Cloudy(
  radius = 15,
  key1 = glideState, // re-execute the blurring process whenever the state value is changed.
) {
  GlideImage(
    modifier = Modifier.size(400.dp),
    imageModel = { poster.image },
    onImageStateChanged = { glideState = it }
  )
}

You can also utilize the key2 parameter to trigger the blurring process.

Accumulate Blur Radius

You can accumulate the blur radius and keep adding the degree of blur effect whenever you change the radius parameter by giving the allowAccumulate condition. For example, if you want to accumulate the degree of blur gradually, you can set the condition of the allowAccumulate parameter depending on your states like the below:

var animationPlayed by remember { mutableStateOf(false) }
val radius by animateIntAsState(
  targetValue = if (animationPlayed) 10 else 0,
  animationSpec = tween(
    durationMillis = 3000,
    delayMillis = 100,
    easing = LinearOutSlowInEasing
  )
)

// Accumulate the degree of blur gradually for the network image.
var glideState by rememberGlideImageState()
Cloudy(
  radius = radius,
  key1 = glideState,
  allowAccumulate = { it is CloudyState.Success && glideState is GlideImageState.Success }
) {
  GlideImage(
    modifier = Modifier.size(400.dp),
    imageModel = { poster.image },
    onImageStateChanged = { glideState = it }
  )
}
Cloudy on GitHub: https://github.com/skydoves/Cloudy
Platform: Android
⭐️: 293
Related Topics:
Advertisement

Trending