Set status bar color gradient matching the content background gradient in Jetpack Compose

Question

My issue is like the pic

I set up status bar color like this:

 val systemUiController = rememberSystemUiController()
    SideEffect {
        systemUiController.setStatusBarColor(
            color = Color(0xFFA784FB)
        )
    }

My top bar

@Composable
fun ProminentTopAppBarWithImage() {
    TopAppBar(
        modifier = Modifier.height(200.dp),
        contentPadding = PaddingValues(all = 0.dp) // (1)
    ) {
        Box(modifier = Modifier.fillMaxSize().background(SaveDoneBackGroundGradient)) { // (2)
            Row( // (4)
                modifier = Modifier
                    .fillMaxSize()
                    .padding(horizontal = 4.dp) // (5)
            ) {
                /*...*/
            }
        }
    }
}

Any solutions for this issue?

Answer 1

You can do something different.

// Turn off the decor fitting system windows
WindowCompat.setDecorFitsSystemWindows(window, false)

setContent {
    //...
}

Them apply to the status bar a Transparent color:

DisposableEffect(systemUiController, useDarkIcons) {
    // Update all of the system bar colors to be transparent, and use
    // dark icons if we're in light theme
    systemUiController.setStatusBarColor(
        color = Color.Transparent,
        darkIcons = useDarkIcons
    )
    onDispose {}
}

Then apply the gradient to TopAppBar content:

TopAppBar(
    modifier = Modifier.height(200.dp),
    contentPadding = PaddingValues(all = 0.dp) 
) {
    Box(Modifier.fillMaxSize().background(gradientGreenRed))
}

Answer 2

I think the only way for a status bar to have and match a gradient color of the content is to resort back to old window/drawable config.

Taken the idea from this post, you'll have to create an xml drawable that will match the colors and orientation of your gradient background you use in your composable container/layout.

res/drawable/gradient_horizontal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:angle="0"
        android:startColor="#9881de"
        android:endColor="#6b50ba"  />
</shape>

and have this window configuration, where you will set the drawable as the window background

fun gradientStatusBar(activity: Activity) {
    val window: Window = activity.window
    val background = ContextCompat.getDrawable(activity, R.drawable.gradient_horizontal)
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)

    window.statusBarColor = ContextCompat.getColor(activity,android.R.color.transparent)
    window.navigationBarColor = ContextCompat.getColor(activity,android.R.color.transparent)
    window.setBackgroundDrawable(background)
}

and then call it in your activity

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        gradientStatusBar(this) // call it here
        setContent {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(
                        brush = Brush.horizontalGradient(
                            colors = listOf(
                                Color(0xFF9881de),
                                Color(0xFF6b50ba)
                            )
                        )
                    )
            )
...

You'll get something like this

You'll just have to adjust both the drawable and your background gradient colors/orientation if you want to change everything and maintain a uniform look of your status bar and the content.