Does anyone know if it's possible to ellipsize a text in a `LargeTopAppBar` when it's collapsed (fir...

# compose-android

[sindrenm]

Does anyone know if it's possible to ellipsize a text in a LargeTopAppBar when it's collapsed (first image), but not when it's expanded? Material 3 guidelines prohibit multi-line small app bar texts (understandable), but allows them for large ones (second image), but I would like to transition between the two on scroll (video).

from-large-to-small.cropped.mp4

[sindrenm]

The LargeAppBar docs set maxLines = 1 in their example, but that would ellipsize the text in the expanded version, too.

https://developer.android.com/jetpack/compose/components/app-bars#large

[sindrenm]

Okay, I found an ish solution with

val behavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
val maxLines = if (behavior.state.collapsedFraction > .7f) 1 else 2

The start and end results are like I want them to be, but because the two texts are at some point visible at the same time during the transition, it does look a little wonky. If anyone knows anything better, then I'd love to hear it.

maxlines-change.cropped.webm

[ascii]

Dunno why LargeTopAppBar does that, never used it myself. I have done something similar in my own "CollapsingAppBar" layout.

Based on collapsedFraction, I lerp title's y coord (placeable) and also its text size & maxLines. Given that's it's your own layout, you have full control over what you want to do with it.

Could point you to the code if you'd like to see it, but it's fairly straightforward.

[sindrenm]

Yeah, it's a little strange. If you have the source somewhere, that would be interesting to see.

[ascii]

https://github.com/oxygen-updater/oxygen-updater/blob/55bffca51e33222986e3defa3d992312ef11b49b/app/src/main/java/com/oxygenupdater/ui/AppBar.kt#[…]1
Includes some code lifted out of M3

[sindrenm]

Nice, thanks! I'll have a looksies. 👀