Jetpack Compose LargeTopAppBar Displays Title Twice

user_3479061 0
Viewed 372

I'm trying to build a Jetpack Compose app with Scaffold and a LargeTopAppBar. I currently have a very simple UI with only the LargeTopAppBar in a Scaffold, but when I run my app I see two small titles at the top of the screen.

enter image description here

Any ideas why this is happening or how to fix it? My activity code is as follows

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : MonetCompatActivity() {

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

        lifecycleScope.launchWhenCreated {
            monet.awaitMonetReady()
            setContent {
                TVTimeTheme(monetCompat = monet) {
                    val decayAnimationSpec = rememberSplineBasedDecay<Float>()
                    val topAppBarScrollState = rememberTopAppBarScrollState()
                    val scrollBehavior = remember(decayAnimationSpec) {
                       TopAppBarDefaults.exitUntilCollapsedScrollBehavior(
                          decayAnimationSpec, topAppBarScrollState
                       )
                    }

                    Scaffold (
                        topBar = {
                            LargeTopAppBar(
                                title = { Text(text = "movies") },
                                scrollBehavior = scrollBehavior
                            )
                        }
                   ) { innerPadding ->
                       Box(modifier = Modifier.padding(innerPadding))
                   }
               }
           }
       }
   }
}
android-jetpack-compose android
4 Answers

These helped me:

  • Use only material3 components (androidx.compose.material3.*) in TabBar, not material (androidx.compose.material.*) components
  • Remove defaultTextColor of titleLarge and bodyLarge in your typography
user_26877340

I think it's because you have not put your navigation icon yet. Try this:

Scaffold(
        topBar = {
            LargeTopAppBar(
                title = { Text("movies") },
                navigationIcon = {
                    IconButton(onClick = {  }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "menu icon"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { }) {
                        Icon(
                            imageVector = Icons.Filled.Favorite,
                            contentDescription = "favorite icon"
                        )
                    }
                },
            )
        },
        content = {innerPadding ->
            Box(modifier = Modifier.padding(innerPadding))

        }

    )

Source enter image description here

user_55137880

I ran across this issue when I set the color within the Text composable, instead of the titleContentColor associated with the TopAppBar composable.

I was doing this:

MediumTopAppBar(
    title = {
        Text(
            text =  "Example",
            color = MaterialTheme.colorScheme.secondary
        )
    },
    ...
)

Instead, use the titleContentColor field on the MediumTopAppBar composable itself. That looks like this:

MediumTopAppBar(
    title = {
        Text(
            text =  "Example",
        )
    },
    colors = TopAppBarDefaults.largeTopAppBarColors(
        titleContentColor = MaterialTheme.colorScheme.secondary
    )
)

Easy mistake to make but stumped me for a good 10 minutes or so!

user_57209310

Just make sure that whether you use import androidx.compose.material3.Text instead of import androidx.compose.material.Text

user_67958450
Related