I create an jetpack compose app target at api 35 which has bottom navigation.In MainActivity.kt, I have

enableEdgeToEdge(
        statusBarStyle = SystemBarStyle.light(Color.TRANSPARENT, Color.TRANSPARENT)
    )

All the root composable in each screen, I have :

 Column(
    modifier = Modifier
        .fillMaxSize()
        .windowInsetsPadding(WindowInsets.statusBars)
) {
    val tabIndex = aboutUsViewModel.tabIndex.observeAsState()
    TabRow(selectedTabIndex = tabIndex.value!!) {
     ....
    }
}

However, the statusbar is white in color like that: statusbar is white in color

So how to make it transparent?Any advice is appreciated.

I create an jetpack compose app target at api 35 which has bottom navigation.In MainActivity.kt, I have

enableEdgeToEdge(
        statusBarStyle = SystemBarStyle.light(Color.TRANSPARENT, Color.TRANSPARENT)
    )

All the root composable in each screen, I have :

 Column(
    modifier = Modifier
        .fillMaxSize()
        .windowInsetsPadding(WindowInsets.statusBars)
) {
    val tabIndex = aboutUsViewModel.tabIndex.observeAsState()
    TabRow(selectedTabIndex = tabIndex.value!!) {
     ....
    }
}

However, the statusbar is white in color like that: statusbar is white in color

So how to make it transparent?Any advice is appreciated.

• android-jetpack-compose
• statusbar
• edge-to-edge

• Please edit the question to also provide your setContent block and how your screens are called. Better yet, can you refactor your code to a minimal reproducible example that is entirely contained in the setContent block? – tyg Commented yesterday

2 Answers 2

Your status bar is indeed transparent but there is nothing to show, so it remains white. You need to have a composable below this one or you can set a background before insets padding for example:

Column(
    modifier = Modifier
        .fillMaxSize()
        //set a background you want to see below your transparent status bar for example:
        .background(Color.Green)
        .windowInsetsPadding(WindowInsets.statusBars)
) {

I don't Know What You exactly Want but I am using Scaffold.

See The Code:-

 Scaffold(
        topBar = {
            // Use Tab Row Here Like This
            TabRow(
                selectedTabIndex = tabIndex.value!!,
                modifier = modifier
                    .fillMaxWidth()
                    .background(color = Your_bg_Color_of_TabRow)
                    .statusBarsPadding()
            ) {
                 ....
            }
        },
        modifier = modifier
            .fillMaxSize()
    ) { innerPadding -> 

       /*  Your Content in the Scaffold  */

       Column(
          modifier = Modifier
           .fillMaxSize()
           .padding(paddingValues = innerPadding)
      ) {
           /*   Your Content Below the TopBar (Tab Row)    */
      }         

}

we use statusBarsPadding() modifier for Add Padding in our Tab Row otherwise Our Tab Row will Collapse with the Status Bar. we also have the navigationBarsPadding() modifier for Add Padding in Our BottomBar Content for avoiding Collapse with the Bottom Navigation Bars. The Built-in TopAppBar or BottomAppBar have built-in Padding with the App Bars. if we are Making Our Custom Bar Content so we have to Add These modifier for a Specific App Bar.

Make Sure You Add background Modifier Before the statusBarsPadding() Modifier because the Modifier add that modifier First that we provide first then it add another modifiers.

we provide background color that will Also Provide that Color with Status Bar.

innerPadding is Also a Padding Between Our App Bars that Scaffold Provide. If we Don't Provide it in Our Content of Scaffold Then Our Content will Collapse with Our App Bars Content. if You only want to provide innerPadding to a specific Area Like only top. Then we can Do Like This:-

Column(
   modifier = modifier
       .padding(top = innerPadding.calculateTopPadding(), bottom = 0.dp, start = 0.dp, end = 0.dp)
) {

}

providing innerPadding to a specific Area will don't collapse your Content with that App Bars like providing top innerPadding will don't collapse You Content with Your Top Bar Content.

I hope You will achieve what You want With This Approach.