TabView acts differently in editor than on android phone

0 votes
asked Sep 12, 2016 in Help by Marius

Hello

Having some issues with tab view when viewing on android phone.

On editor the tabs look good, fits all 3 tab pages on the single screen. Trying in different solutions inside the editor also works fine, however when i go to android phone the tab view gets much much wider that it goes outside the screen. It still works, it just does not look good or feel good anymore.

I am using Screen Space Camera (because i have some animated sprites),

My scale with screen size settings are:

Ref resolution: 360 x 640
UI Scale mode: Scale with screen size
Screen match mode: Expand

See attached pictures for comparison.

Editor

Android Galaxy S6

 

Am i doing something wrong or is it a bug related to my settings?

 

1 Answer

0 votes
answered Sep 19, 2016 by admin (31,720 points)
Hi Marius,

It looks like it might be something to do with how the TabView factors in scaling when calculating the tab and tab bar widths. In the meantime, you should be able to get the tabs to fit to the screen by raising the 'Shrink Tabs To Fit Threshold' to about 300 - let me know if that works :)

~ Declan.
commented Sep 19, 2016 by Marius
Hi Declan

Yes that seemed to make it alot better. What does this do? Will this fix it unified for all screen sizes and both Android/iOS devices?

It looks good on my Samsung S6, but hard for me to test other devices.
commented Sep 20, 2016 by admin (31,720 points)
The problem seems to be that the TabBar thinks the tabs need to be bigger than they actually do, and converts to a scrolling bar instead of a fixed one. (This is due to a some odd scaling issues that I'm still working on).

The 'shrink tabs to fit threshold' adjusts how 'close' the tabs' total width need to be to the width of the bar to be a fixed bar - so if the number is quite large, it will almost always force the tabs to fit, even if they get squished in the process. With a reference scaling resolution of 360x640, and only 3 tabs, this shouldn't be a problem - in fact, if you bump it up to 600, it will work for resolutions ranging from as low as 360x640 to as high as 2160x3840 (it might work with a larger range, but you'll likely not find a phone that has a resolution outside of that).

That should provide a decent workaround to make the TabBar work how you want it to for the devices you're targeting :)

~ Declan.
Welcome to MaterialUI support! Ask us anything :)
...