Blur effect with solid/gradient colored backgrounds

[JooyeonSong]

Hello again,
I have another question.
Is it correct that the blur effect doesn't work when the background is a solid color? I tried applying blur with a gradient background, and it doesn't seem to be working. I've also checked the Modifier order.
Could I be missing something else here? I've also attached the sample code that I previously shared.
I look forward to your reply. Thanks!

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.zIndex
import dev.chrisbanes.haze.HazeDefaults
import dev.chrisbanes.haze.HazeState
import dev.chrisbanes.haze.hazeEffect
import dev.chrisbanes.haze.hazeSource
import dev.chrisbanes.haze.rememberHazeState
import kotlin.math.roundToInt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyScreenWithBackgroundImage()
        }
    }
}

@Composable
fun MyScreenWithBackgroundImage() {
    val hazeState = rememberHazeState(HazeDefaults.blurEnabled())
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        Color.Red,
                        Color.Yellow,
                        Color.Green,
                        Color.Cyan,
                        Color.Blue,
                        Color.Magenta
                    )
                )
            )
            .hazeSource(hazeState) // not working...
    ) {
        Image(
            painter = painterResource(id = R.drawable.background),
            contentDescription = "background image",
            modifier = Modifier
                .fillMaxSize()
                .hazeSource(hazeState),
            contentScale = ContentScale.Crop
        )

        Text(
            text = "Hello, Compose!", style = MaterialTheme.typography.headlineMedium,
            color = MaterialTheme.colorScheme.onPrimaryContainer,
            modifier = Modifier
                .offset(20.dp, 20.dp)
                .padding(16.dp)
                .hazeSource(hazeState, zIndex = 2f) //not working...
        )
        DraggableRotatedScaledImage(hazeState)
        DraggableText(hazeState)
    }
}

@Composable
fun DraggableRotatedScaledImage(hazeState: HazeState) {
    var imageOffset by remember { mutableStateOf(Offset.Zero) }

    Image(
        painter = painterResource(id = R.drawable.star),
        contentDescription = "Draggable Rotated and Scaled Image",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consume()
                    imageOffset += dragAmount
                }
            }
            .offset {
                IntOffset(
                    imageOffset.x.roundToInt(),
                    imageOffset.y.roundToInt()
                )
            }
            .hazeSource(hazeState, zIndex = 1f) //not working...
            .graphicsLayer {
                rotationZ = 45f
            }
            .size(200.dp)
            .padding(16.dp)
    )
}

@Composable
fun DraggableText(hazeState: HazeState) {
    var offset by remember { mutableStateOf(Offset.Zero) }

    Text(
        text = "Drag Here",
        color = Color(0xFFFFFFFF),
        fontSize = 20.sp,
        style = MaterialTheme.typography.bodyLarge,
        modifier = Modifier
            .offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) }
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consume()
                    offset = offset + dragAmount
                }
            }
            .background(Color(0x1A000000))
            .hazeEffect(state = hazeState) {
                blurRadius = 20.dp
            }
            .zIndex(2f) // Ensure the text is above the image
            .padding(16.dp)
    )
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MaterialTheme {
        MyScreenWithBackgroundImage()
    }
}

[chrisbanes]

You're nesting the hazeSource and hazeEffect content which does not work. You need to split them apart so that they're siblings.

[JooyeonSong]

I've tried what you suggested, but it still doesn't seem to be working. Am I missing something? I'd really appreciate it if you could take another look.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyScreenWithBackgroundImage()
        }
    }
}

@Composable
fun MyScreenWithBackgroundImage() {
    val hazeState = rememberHazeState(HazeDefaults.blurEnabled())

    Box(modifier = Modifier.fillMaxSize())
    {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(
                    brush = Brush.verticalGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Yellow,
                            Color.Green,
                            Color.Cyan,
                            Color.Blue,
                            Color.Magenta
                        )
                    )
                )
                .hazeSource(hazeState)
                .zIndex(0f)// not working...
        )
        Text(
            text = "Hello, Compose!", style = MaterialTheme.typography.headlineMedium,
            color = MaterialTheme.colorScheme.onPrimaryContainer,
            modifier = Modifier
                .hazeSource(hazeState, zIndex = 2f) // The blur effect doesn't seem to be working on this part either
                .offset(20.dp, 20.dp)
                .padding(16.dp)
        )
        DraggableRotatedScaledImage(hazeState)
        DraggableText(hazeState)
    }

}

@Composable
fun DraggableRotatedScaledImage(hazeState: HazeState) {
    var imageOffset by remember { mutableStateOf(Offset.Zero) }

    Image(
        painter = painterResource(id = R.drawable.star),
        contentDescription = "Draggable Rotated and Scaled Image",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consume()
                    imageOffset += dragAmount
                }
            }
            .offset {
                IntOffset(
                    imageOffset.x.roundToInt(),
                    imageOffset.y.roundToInt()
                )
            }
            .hazeSource(hazeState, zIndex = 1f)
            .graphicsLayer {
                rotationZ = 45f
            }
            .size(200.dp)
            .padding(16.dp)
    )
}

@Composable
fun DraggableText(hazeState: HazeState) {
    var offset by remember { mutableStateOf(Offset.Zero) }

    Text(
        text = "Drag Here",
        color = Color(0xFFFFFFFF),
        fontSize = 20.sp,
        style = MaterialTheme.typography.bodyLarge,
        modifier = Modifier
            .offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) }
            .background(Color(0x1A000000))
            .hazeEffect(state = hazeState) {
                blurRadius = 20.dp
            }
            .zIndex(4f)
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consume()
                    offset = offset + dragAmount
                }
            }
            .padding(16.dp)
    )

}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MaterialTheme {
        MyScreenWithBackgroundImage()
    }
}

[chrisbanes]

Again, modifier order 😄: #652

API 28

api28.mov

API 34

api34.mov