Customization of Material 3 LargeTopAppBar

Question

I'm currently working on a Header in Compose that uses LargeTopAppBar from Material 3. The issue is, that the title is not very customizable and neither is the scrolling animation(that uses nestedScroll). I would like to add a subtitle underneath the title that will not be shown in the smallTitle once the AppBar is collapsed. I would also like to know if there was a way to customize the actual animation of the title.

I know Material 3 is still in an Alpha but I would be very curious to see if there was some solution or workaround. Thanks in advance!

I am having this same issue. It appears as though `LargeTopAppBar` simply uses the same child composable whether it's collapsed or expanded, right? I feel like this is a huge limitation. This is in comparison to the legacy UI `CollapsingToolbarLayout`, which can literally show anything in our Toolbar when it's expanded, I could create a Toolbar that was a simple white toolbar with a title when collapsed that fades into a large toolbar with background, title, subtitle, image when it's expanded. — JHowzer, Mar 26 '23 at 19:07

Arthur Kasparian · Accepted Answer · 2022-08-22T15:34:21.883

LargeTopAppBar is a material3 composable which has its limitations in terms of customizability, but is easy to use.

If you need something different you can simply create a composable function for the topBar parameter in your screen scaffold which will implement all of the features you need.

Scaffold (
    topBar = { customTopBar() }
) { innerPadding ->
    YourScreen(modifier = modifier.padding(innerPadding))
}

In case you've already used a Scaffold in your code, you can simply use a when() statement and pass the appropriate composable for each screen!

For the subtitle you could use a simple column with two Texts,

Column {
    Text(text = "Title")

    if ( /* topBar state condition */ )
        Text(text = "Subtitle")
}

and for the rest of the app bar you can have a Row that includes all elements (depending on your bar), like so:

Row(
    verticalAlignment = Alignment.CenterVertically
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Row {
        IconButton(...) // For the back button

        // Your title and subtitle Column()
        Column {
            Text(text = "Title")

            if ( /* topBar state condition */ )
                Text(text = "Subtitle")
        }
    }

    // Rest of the IconButtons if needed
    Row {
        IconButton(...)
        IconButton(...)
    }
}

Apologies as I am not well versed in Jetpack Compose animation, but it should be easy enough to implement as their library is very simple to use, and you can always check the docs on their website.

Material3 elements are still in alpha but using simple surface/box/etc... elements you can make most custom designs that are needed.

Hope I was able to help!

Customization of Material 3 LargeTopAppBar

1 Answers1