I'm using the M3

LargeTopAppBar

, with

exitUntilCollapsedScrollBehavior

so it collapses on scroll. My title is long and takes 2 lines in the expanded state which is expected, but it also takes 2 lines in the collapsed state and looks wrong (it should be truncated instead with an ellipsis, this is also what the design doc states). I'm not sure how to make it behave correctly. I can't change my

Text

based on the collapsed state because in the intermediate states the title is visible twice, both in the expanded and collapsed states (one fades out and other fades in), so changing it changes it for both.

I don't think having the title take two lines is expected in the M3 spec. Reading it briefly, I see that the container height for a large top app bar is a constant. The example also makes the title one line.

It explicitly states here that wrapping lines is expected and there is an image example too: https://m3.material.io/components/top-app-bar/guidelines#42b3110b-2f47-4640-8fd5-4506156e29f8

I think you'll need to make a custom widget to handle that use case. The spec for "Large top app bar" doesn't seem to support it. https://m3.material.io/components/top-app-bar/specs#167c551b-495a-4b86-b4a0-eb763ed8728a

Yeah, if I was able to determine in the

title

block whether I'm in the expanded or collapsed state, I could handle it correctly, but I can't (I can't rely on the external app bar state / scroll behavior state because both titles are shown at the same time during the animation).

You could copy the implementation and modify it to have

title

have a parameter.

Solved it.

LargeTopAppBar

sets a different

LocalTextStyle

for the expanded and collapsed state, which I can detect:

title = {
    val expandedTextStyle = MaterialTheme.typography.headlineMedium
    val isExpanded = LocalTextStyle.current == expandedTextStyle
    Text() // correct styling based on isExpanded
}