https://kotlinlang.org logo
#compose
Title
# compose
a

Artem Bezlyubchenko

06/15/2022, 4:07 PM
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
Copy code
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")
                }
            }
        }
    }
}
n

Nat Strangerweather

06/15/2022, 4:18 PM
Maybe it can help you too! 🙂
a

Artem Bezlyubchenko

06/15/2022, 4:47 PM
@Nat Strangerweather thanks, but it doesn’t help(
@Nat Strangerweather just in case, may u share your imports, please?
n

Nat Strangerweather

06/15/2022, 4:50 PM
Copy code
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
a

Artem Bezlyubchenko

06/15/2022, 4:54 PM
yeah, I checked it. Looks similar to yours and to docs
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
69 Views