I'm working on a fairly new compose project. We us...

# compose

[Colton Idle]

I'm working on a fairly new compose project. We use bottom tabs in our android app, but out of the 4 tabs, 1 of them has text that's like one letter too long and overflows onto the next line. Are there any easy solutions here to just shrink the text down or something... or should I just grab a autoSizeText component from github or something. Seems heavy handed to bring in a new composable with a ton of features just for this one letter overflowing, but i guess that makes the most sense. idk. just wanted to get a feel to see if maybe im missing something else.

[Colton Idle]

for what its worth, ive considered just doing something like an ellipsis, and then checking if ellipsis are showing, then ill shrink the text down a notch. that kinda gets me to my solution in a few lines vs pulling a new composable in.

[Colton Idle]

maybe im just missing whether or not theres like a defacto library for this yet. every time ive just been copy pasting in solutions from stackoverflow or gists lol

[Stylianos Gakis]

1 of them has text that’s like one letter too long and overflows onto the next line

Wait till you test with the not standard font size 😄

I’ve filed this https://issuetracker.google.com/issues/330198163 which makes the problem even bigger than it really should be I think.

But realistically, we copied over the implementation and put a 1.3f cap on the font size increase here https://github.com/HedvigInsurance/android/blob/b5bf4698ac78da1f9753cb9e8344679012[…]re/designsystem/component/navigation/HedvigNavigationBarItem.kt
And we clip if it still somehow it not visible. It covers like 99.999% of the cases, I tested with a https://www.unihertz.com/products/jelly-2 and our longest text language 😅

[Colton Idle]

"support autosize text" is "In focus" on the compose roadmap. so maybe i should just paste something in and be done with it since i know it'll come soon out of the box. https://developer.android.com/jetpack/androidx/compose-roadmap

[Stylianos Gakis]

So your best bet if you are using the m3 one is to copy the impl, and adjust the spaces a bit so that it does not clip so early, eagerly. And then if it’s still not enough then either fold over the next line, force the font size to even be smaller. Not much more to do here

[Colton Idle]

nice. I have a unihertz jelly pro too!

[Stylianos Gakis]

Even with the autosize, you do not want each of the destinations to have a different size than the others. That might be awkward to do anyway even with this thing implemented

[Colton Idle]

+1'd that item. I also think this could probably be something fixed on the nav bar itself. lol

[Stylianos Gakis]

In the latest alphas what they do is that they wrap to a second line and move the indicator higher up. Don’t know what else they can realistically do here?

[Colton Idle]

oh i thought the issue was that there was double padding being applied. maybe i misunderstood the ticket

[Stylianos Gakis]

Oh yeah that is what the ticket is about

[Stylianos Gakis]

But I mean if despite the double padding you still got long texts, what else can they do in the library?

[Colton Idle]

thats true.

[Stylianos Gakis]

https://m3.material.io/components/navigation-bar/guidelines#5a0e52ea-eb3f-42ef-96a4-160c7faf3c93
Note here for the auto-resizing text suggestion you had, that they explicitly do not want you to resize only 1 of them

[Colton Idle]

but yeah. in this case it looks like there is plenty of space so its weird that it wraps.

[Colton Idle]

oh. thanks for the docs on that too. ill show that to my designer.

[Colton Idle]

maybe forking the bottom tabs so i can remove the extra padding will keep everyone happy for now. 😅

[Colton Idle]

not to tangent... but i recently saw android 14 has these specs for minimum screen size (thanks @Alex Vanyo)

https://source.android.com/docs/compatibility/14/android-14-cdd#221_hardware

looks like a device like the jelly pro is too small for android 14 😭

[Stylianos Gakis]

If you copy the impl you can do whatever you want, even let them have only 4.dp between each other for example. Or if for example only 1 of your texts are too long and all others are small, you can let that one go “out of bounds”. Which is exactly what we are doing here too 😄
Not too pretty but one of our texts is really longer than the others, we only support a handfull of languages, and I tested with a jelly with font size set to max possible, and it looks okay. If someone still has it break I mean I give up 😂
Like it does for freeform but like I don’t know what to do there, the only option is to show no texts if I still want it to look in any way reasonable.

[Stylianos Gakis]

☠️☠️☠️

[Colton Idle]

lol. it almost looks perfect! I think at some size breakpoint it probably doesn't make sense to show labels anymore and just show icons lol