I'm using the M3 `LargeTopAppBar`, with `exitUntil...
# compose
m
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.
s
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.
m
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
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.
s
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
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.
m
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).
I'm trying to use
BoxWithConstraints
to detect the different available height, which feels hacky but could maybe work.
s
You could copy the implementation and modify it to have
title
have a parameter.
m
Solved it.
LargeTopAppBar
sets a different
LocalTextStyle
for the expanded and collapsed state, which I can detect:
Copy code
title = {
    val expandedTextStyle = MaterialTheme.typography.headlineMedium
    val isExpanded = LocalTextStyle.current == expandedTextStyle
    Text() // correct styling based on isExpanded
}