https://kotlinlang.org logo
#compose
Title
# compose
c

Colton Idle

04/02/2024, 1:33 PM
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.
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.
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
s

Stylianos Gakis

04/02/2024, 1:39 PM
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 😅
c

Colton Idle

04/02/2024, 1:40 PM
"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
s

Stylianos Gakis

04/02/2024, 1:41 PM
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
c

Colton Idle

04/02/2024, 1:41 PM
nice. I have a unihertz jelly pro too!
fist bump 1
s

Stylianos Gakis

04/02/2024, 1:41 PM
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
c

Colton Idle

04/02/2024, 1:42 PM
+1'd that item. I also think this could probably be something fixed on the nav bar itself. lol
s

Stylianos Gakis

04/02/2024, 1:43 PM
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?
c

Colton Idle

04/02/2024, 1:44 PM
oh i thought the issue was that there was double padding being applied. maybe i misunderstood the ticket
s

Stylianos Gakis

04/02/2024, 1:45 PM
Oh yeah that is what the ticket is about
👍 1
But I mean if despite the double padding you still got long texts, what else can they do in the library?
c

Colton Idle

04/02/2024, 1:45 PM
thats true.
s

Stylianos Gakis

04/02/2024, 1:45 PM
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
c

Colton Idle

04/02/2024, 1:45 PM
but yeah. in this case it looks like there is plenty of space so its weird that it wraps.
oh. thanks for the docs on that too. ill show that to my designer.
maybe forking the bottom tabs so i can remove the extra padding will keep everyone happy for now. 😅
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 😭
s

Stylianos Gakis

04/02/2024, 1:53 PM
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.
☠️☠️☠️
c

Colton Idle

04/02/2024, 2:56 PM
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
3 Views