Blur Image – Android Jetpack Compose

Android Jetpack Compose – Blur Image

We can display given image with blur effect, in Android Jetpack Compose.

To display an image with blurred effect using Image composable in Android Jetpack Compose, assign modifier parameter with the Modifier.blur(). Using Modifier.blur, you can specify the radius of blur along X-axis, radius of blur along Y-axis, and edge treatment.

The following is a simple code snippet to display an image with blur effect using Image composable.

Image(
    painter = painterResource(id = R.drawable.sample_image),
    contentDescription = "Big Elephant",
    modifier = Modifier
        .blur(
            radiusX = 5.dp,
            radiusY = 5.dp,
            edgeTreatment = BlurredEdgeTreatment.Unbounded
        )
)

Example Android Application for Blurred Image

In the following example, we display the following image, as a blurred image, using an Image composable.

sample-image.jpg

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(20.dp),
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.sample_image),
                        contentDescription = "Big Elephant",
                        modifier = Modifier
                            .blur(
                                radiusX = 5.dp,
                                radiusY = 5.dp,
                                edgeTreatment = BlurredEdgeTreatment.Unbounded
                            )
                    )
                }
            }
        }
    }
}

Screenshot

You can play with the radiusX, radiusY, and edgeTreatment, to set the image blur as per your requirement.

Summary

In this tutorial, we have seen how to display an image with blurred effect using Image composable in Android Jetpack Compose, with an example.