[FIXED] Jetpack Compose LargeTopAppBar Displays Title Twice

Issue

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.

rel="nofollow noreferrer">

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))
                   }
               }
           }
       }
   }
}

Solution

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

Answered By - Artem
Answer Checked By - Clifford M. (JavaFixing Volunteer)