How to apply blur effect to content under ActionBar in Jetpack Compose?

Question

So far I have a simple Scafold with a transparent ActionBar & StatusBar, and my content scrolls nicely under both bars, including a scrollBehavior to change the top color to a transparent black. Here's the relevant code:

Main Activity

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        enableEdgeToEdge()

        ...

Main Composable

...

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = {
                Text(currentScreen.route)
            },
            scrollBehavior = scrollBehavior,
            colors = TopAppBarDefaults.topAppBarColors(
                containerColor = Color.Transparent,
                scrolledContainerColor = Color.Black.copy(alpha = 0.75f),
                navigationIconContentColor = Color.Black,
                titleContentColor = MaterialTheme.colorScheme.primary,
                actionIconContentColor = Color.Black
            )
        )
    },
) { padding ->
    Box {
        Background()
        MainNavHost(
            modifier = Modifier.fillMaxSize(),
            navController = navController,
            contentPadding = padding
        )
    }
}

It works and I'm happy with the result, but it'd be great if there was a way to apply a blur effect to the content that gets hidden under the ActionBar, similar to what iOS does natively.

Is there any method to achieve this effect?

Answer 1

Finally, Haze library addressed exactly my scenario.