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:
So how can I set the statusBar
color same as the TopAppBar
?
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")
},
...