I want to add a TopAppBar
to my Compose app, so I did the following:
@OptIn(ExperimentalMaterial3Api::class)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
AlternoTubeTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Scaffold(
topBar = {
TopAppBar(
title = {
Text(
stringResource(id = R.string.app_name),
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
)
},
content = { innerPadding ->
MyAppTheme(modifier = Modifier.padding(innerPadding))
}
)
}
}
}
}
The issue is, when I run the app, there is no color to my TopAppBar
:
Whereas on the preview images, the app bar does have colors:
What can I try next to get the right colors?
With M3 the default value of the background color in the TopAppBar
is defined in the TopAppBarDefaults.smallTopAppBarColors()
with the containerColor
attribute. The default value is the surface
color defined in your theme.
Check your theme or you can override it using something like:
TopAppBar(
title = {
Text(
stringResource(id = R.string.app_name),
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = Yellow)
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.