androidandroid-jetpack-compose

How to set statusbar color same to TopAppBar when using safeDrawingPadding?


I'm trying to add spacing when the device has a notch in it, so I wrap my content in a Scaffold with safeDrawingPadding() on it.

That creates the space on the notch, the issue is that space is while, instead I would it have the same TopAppBar color.

Here is my code:

@Composable
fun Theme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) DarkColorPalette else LightColorPalette

    MaterialTheme(
        colors = colors,
        typography = Typography,
        content = content
    )
}

The Activity:

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

        val tableNumber = intent.getStringExtra("tableNumber") ?: ""
        enableEdgeToEdge(
            statusBarStyle = SystemBarStyle.light(
                resources.getColor(R.color.colorPrimary, theme),
                resources.getColor(R.color.colorPrimary, theme)
            )
        )
        setContent {
            VisualPOSMobileTheme {
                PaymentScreen(tableNumber = tableNumber,
                    onPaymentProceed = { amount, tipAmount ->
                        println("Proceed Payment: Total = $amount, Tip = $tipAmount")
                    },
                    onBackClick = { finish() })
            }
        }
    }
}

The PaymentScreen:

  Scaffold(
        modifier = Modifier.safeDrawingPadding(),
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Pagamento")
                },
                navigationIcon = {
                    IconButton(onClick = onBackClick) {
                        Icon(
                            painter = painterResource(R.drawable.ic_baseline_arrow_back_ios_new_24),
                            contentDescription = "Indietro"
                        )
                    }
                },
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = Color.White,
                elevation = 4.dp
            )
        },
    ...

I have tried to set the statusBar color in enableEdgeToEdge but it has no effect.

Here is how it does looks like:

Photo of the activity showing the white space between edge of the screen and the TopAppBar

So how can I set the statusBar color same as the TopAppBar?


Solution

  • I resolve the issue by wrapping my Scaffold inside a Box with background color set to primary

    Here is the code:

      Box(
            modifier = Modifier
                .fillMaxSize()
                .background(color = MaterialTheme.colors.primary)
                .safeDrawingPadding()
        ) {
            Scaffold(
                topBar = {
                    TopAppBar(
                        title = {
                            Text(text = "Pagamento")
                        },
        ...