Hello guys, may anyone help me with `MediumTopAppBar` | `LargeTopAppBar` please. It shows two lines ...

# compose

[Artem Bezlyubchenko]

Hello guys, may anyone help me with MediumTopAppBar | LargeTopAppBar please.
It shows two lines on toolbar.

I’m using Material3 and I don’t use old material components…

Code is in the thread

[Artem Bezlyubchenko]

import androidx.compose.animation.rememberSplineBasedDecay
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PlanDetails(

) {
    val decayAnimationSpec = rememberSplineBasedDecay<Float>()
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(
        decayAnimationSpec,
        rememberTopAppBarScrollState()
    )

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                title = {
                    Text(text = "test title")
                },
                scrollBehavior = scrollBehavior,
                colors = TopAppBarDefaults.largeTopAppBarColors(
                    containerColor = Color.Yellow,
                    scrolledContainerColor = Color.Blue,
                    titleContentColor = Color.Black
                )
            )
        }
    ) {
        LazyColumn(
            contentPadding = it,
            modifier = Modifier.fillMaxSize()
        ) {
            item {
                Button(onClick = { /*TODO*/ }) {
                    Text(text = "test")
                }
            }
        }
    }
}

[Nat Strangerweather]

I've just replied to an identical question on SO. https://stackoverflow.com/questions/72633230/jetpack-compose-largetopappbar-displays-title-twice

[Nat Strangerweather]

Maybe it can help you too! 🙂

[Nat Strangerweather]

[Artem Bezlyubchenko]

@Nat Strangerweather thanks, but it doesn’t help(

[Artem Bezlyubchenko]

@Nat Strangerweather just in case, may u share your imports, please?

[Nat Strangerweather]

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import <http://androidx.compose.material.icons.filled.Menu|androidx.compose.material.icons.filled.Menu>
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.example.myapplication.ui.theme.MyApplicationTheme

[Nat Strangerweather]

If you look here you will find the correct imports: https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LargeTopAppBar(kotlin.Funct[…]al3.TopAppBarScrollBehavior)

[Artem Bezlyubchenko]

yeah, I checked it. Looks similar to yours and to docs

[Artem Bezlyubchenko]

For future usage:
If you have two lines visible using MediumTopAppBar and LargeTopAppBar, be careful about:
1. Use only material3 components (for example - Text), not material components
2. Remove defaultTextColor of titleLarge and bodyLarge