To fit the content (text) of the tab we opted for using `ScrollableTabRow` . We also support localis...

# compose

[Ahmed]

To fit the content (text) of the tab we opted for using ScrollableTabRow . We also support localisation, therefore, some strings are short. This makes the UI end up looking like where tabs are aligned to a side only. Something like

Not scrollable case:

—————————————————————————————————
Tab1  Tab2  Tab3  Tab4
—————————————————————————————————

Any ideas or workarounds on how to fit these tabs (same weight)?

[Ahmed]

This behaviour is also reproducible on configuration changes.

[Skaldebane]

Just tried using ScrollableTabRow , it's a poorly designed Material API. Doesn't help with any customization at all, doesn't expose its scroll state (why?!), no support for mouse scrolling (just a Linux quirk). Its code is simple though, so you should be able to copy it and modify the layout code to make children fill max space when they can fit.

And yes I get the same behavior. It's probably intentional behavior for this component, probably following M2 guidelines.

[Skaldebane]

Okay so I just made a version that works as you wanted.
When the total size of the tabs is less than the width of the ScrollableTabRow, it'll split the width between tabs evenly (I could probably change this so it does it proportionally; larger tabs get more of the space, but manual layout is hard and I'm lazy).
If the total size of the tabs is larger, it'll function as usual, and scrolling will take effect.
I'll send a little video demo and the code in a follow-up.

PS: What a damn perfect timing, I needed this for another project that I'll get to very soon, and didn't know about ScrollableTabRow , so it would've never occurred to me that I can easily solve it by... well stealing its code and changing it xD

[Skaldebane]

Just realized that I always force the tabs to be the same size, so they never actually shrink to fit content before scrolling. I'll try fixing that, can't stay lazy :S

[Skaldebane]

This is the current progress. Tabs always fill the container size, but they all are forced to larger sizes. While it looks fine sometimes (picture 1), you can notice that it's wasting some extra space in smaller items (picture 2), and causes the layout to start scrolling earlier than it should.

[Skaldebane]

Fixed. TIL about Measurable.maxIntrinsicWidth .

[Skaldebane]

when there's no scroll, tabs (proportionally) stretch to fill max size:

[Skaldebane]

Full code.
Use it like normal, just make sure you import this version instead of the Material one. My modifications are minimal, but there may be issues I'm not aware of, try it out and tell me how it goes.

ScrollableTabRow_kt.txt

[Ahmed]

Thanks @Skaldebane for the detailed response. I was wondering if I was missing something straightforward and simple, something that I may have overlooked to handle this case. Guess that I haven't. I'll try these modifications out.

[Altynbek Nurtaza]

I think there is an edge case where some tabs are smaller than minTabWidth, then the layoutWidth is a bit off. so consider leaving this part as is

var layoutWidth = padding * 2
var layoutHeight = 0
tabPlaceables.fastForEach {
    layoutWidth += it.width
    layoutHeight = maxOf(layoutHeight, it.height)
}

[Skaldebane]

Nice catch @Altynbek Nurtaza! The tabs I tested with were always larger than so I didn't notice it. It seems to break automatic scrolling as well.

[Skaldebane]

I've edited the original code.
@Ahmed update your code to this instead.