How to make status bar color same as top app bar color in material 3 in jetpack compose

Question

I want to make status bar as same as top app bar color in material 3 jetpack compose project and also want to achieve tonal elevation while scrolling. How to achieve this?

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        SmallTopAppBar(
            scrollBehavior = scrollBehavior,

I want same for the status bar too.

Code Poet · Answer 1 · 2023-05-06T13:03:22.083

You would normally use the Accompanist System UI Controller for Jetpack Compose for this.

For instance, you can use it in this way:

setContent {
            MyTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val systemUiController = rememberSystemUiController()
                    val useDarkIcons = !isSystemInDarkTheme()

                    SideEffect {
                        systemUiController.setStatusBarColor(
                            color = Color(0xff655D8A),
                            darkIcons = !useDarkIcons
                        )
                    }
                  }
                }

Add this dependency to your app build.gradle:

implementation "com.google.accompanist:accompanist-systemuicontroller:0.31.1-alpha"

How to make status bar color same as top app bar color in material 3 in jetpack compose

1 Answers1