Cloudy

☁️ Compose blur effect library, which falls back on to a CPU-based implementation to support older API levels.

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.

Download

Gradle

Add the dependency below to your module's build.gradle file:

dependencies {
    implementation "com.github.skydoves:cloudy:0.1.2"
}

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 }
  )
}

Blur Effect with Network Images

You can easily implement blur effect with Landscapist, which is a Jetpack Compose image loading library that fetches and displays network images with Glide, Coil, and Fresco. For more information, see the Transformation section.

Find this repository useful? ❤️

Support it by joining stargazers for this repository. ⭐
Also, follow me on GitHub for my next creations! 🤩

License

Designed and developed by 2022 skydoves (Jaewoong Eum)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.