I'm using the M3 `LargeTopAppBar`, with `exitUntilCollapsedScrollBehavior` so it collapses on scroll...

# compose

[Marcin Wisniowski]

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.

[Sean Proctor]

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.

[Marcin Wisniowski]

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

[Marcin Wisniowski]

The "do" and "don't" examples are basically both what I'm getting now, because of the bar collapsing from the "do" to the "don't" state.

[Sean Proctor]

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

[Sean Proctor]

Although in that section, it does say to use a large top app bar. Seems like it's pretty conflicting. You need some information in the title to determine which way it's being shown. I don't think that any is given.

[Marcin Wisniowski]

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

[Marcin Wisniowski]

I'm trying to use BoxWithConstraints to detect the different available height, which feels hacky but could maybe work.

[Sean Proctor]

You could copy the implementation and modify it to have title have a parameter.

[Marcin Wisniowski]

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
}