Reputation: 53
I am trying to adjust the height of the TopAppBar
in an Android app, using Jetpack Compose
. When I update the Modifier of the TopAppBar to adjust to height = 150.dp
, I see that the bar has a larger height but the text and navigation icon button disappear. When I don't do anything to the height, the text appears fine.
Scaffold(
topBar = { TopAppBar(
title = {
Text(
text = "Hello",
style = TextStyle(color = Color.White, fontSize = 24.sp)
)
},
navigationIcon = {
IconButton(onClick = {
navController.popBackStack()
}) {
Icon(Icons.Filled.ArrowBack, null, tint = Color.White)
}
},
colors = TopAppBarDefaults.largeTopAppBarColors(
containerColor = Color.Black,
titleContentColor = Color.White
),
modifier = Modifier.height(150.dp)
)
}
) {...}
I used the Layout Inspector on Android Studio to see where the text and icon going. In the Layout Insepctor, I see that both elements are still present, they just seem to be hidden or not showing for some reason. Here is what I see in the Layout Insepctor. Text in TopAppBar not showing
Upvotes: 1
Views: 1919
Reputation: 1491
Scaffold(
topBar = {
LargeTopAppBar(
title = {
Text(
text = "Hello",
color=Color.White,
style = TextStyle(color = Color.White, fontSize = 24.sp)
)
},
navigationIcon = {
IconButton(onClick = {
},) {
Icon(Icons.Filled.ArrowBack, null, tint = Color.White)
}
},
colors = TopAppBarDefaults.largeTopAppBarColors(
containerColor = Color.Black,
titleContentColor = Color.White, navigationIconContentColor = Color.White
),
modifier = Modifier.height(150.dp)
)
}
) {paddingValues -> paddingValues}
try to run before invalidate catch and restart.
Upvotes: 1