Amrita Venkatraman
Amrita Venkatraman

Reputation: 53

Text disappearing when adjusting height of TopAppBar on Android Jetpack Compose

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

Answers (1)

Mohammad Hanif Shaikh
Mohammad Hanif Shaikh

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}

enter image description here

try to run before invalidate catch and restart.

Upvotes: 1

Related Questions