FMX Tabcontrol Tab Hight

[grantful 3]

I am working on an app that runs on ios and android.

I can not set the tabcontrol tabHight to 70.

 

If I set the tabcontrol1 tab hight to 70 and compile it there it goes back to 0.

On form create i try to set it.  TabControl1.TabHeight:= 70;

 

I am trying to find something on

Mobile Tutorial: Using Tab Components to Display Pages (iOS and Android) - RAD Studio (embarcadero.com)

 

I think i am missing something on how it works.

 

any help with this is greatly appreciated.

Thanks

[Dave Nottage 563]

14 minutes ago, grantful said:

I think i am missing something on how it works

Do you have AutoSize on the tab item set to False?

[grantful 3]

Thanks Dave. I dont know how i missed that 🙂

[grantful 3]

I did go and uncheck the autosize on each tab item.

I can see the change now in the ide but when i install on ios and android it still is small.

Any thoughts ?

Thanks for the help

 

[Martifan 5]

On mobile platforms like iOS and Android, setting the TabHeight property directly on the TabControl doesn't work as expected. The tab height is determined automatically based on the platform and controls used.

Instead, to increase the tab height you need to modify the TabControl's style. Here are a couple options to try:

1. Set the TabControl's StyleLookup property to 'tabcontrolstyle' and modify that style in the Styles Designer. Increase the height of the tab elements in the style.
2. Clone the default TabControl style, give it a new name like 'TabControlStyleBig', and modify the tab height there. Then set your TabControl.StyleLookup to that new style name.
3. Set the TabControl's Style property directly in code instead of using StyleLookup. Modify the Tab tabOffset and Tab tabHeight style elements.

For example:
 

TabControl1.Style.StyleElements := [seTab, seClient];
TabControl1.Style.SetElementStyle(TabControl1.Style.GetElement(seTab), [], [tsTabHeight, 70]);

The key is that the tab height can't just be directly set on mobile - you have to go through the control's style. Check the documentation on TTabControlStyles and styling for more details.

[grantful 3]

Thanks so much for the help i will try this.

 

[sjordi 42]

On 7/30/2023 at 3:59 AM, Martifan said:

On mobile platforms like iOS and Android, setting the TabHeight property directly on the TabControl doesn't work as expected. The tab height is determined automatically based on the platform [...]

The key is that the tab height can't just be directly set on mobile - you have to go through the control's style. Check the documentation on TTabControlStyles and styling for more details.

Thanks for the tip. I'll try to apply this to the font size. Under iOS, the font is so small in the tabs that it's barely readable when setting it to Platform Behavior.

[Rollo62 539]

I usually don't rely on the TabControl UI for multi-plattform.

The TabControl itself works fine, but I remove its visual Tabs and use separate navigation controls to switch between Tabs, for example simple TButton's in a separate TLayout.

That way I have full control over behaviour and appearance and the UI and the navigation can even separated from the tab-control itself,

or even easily replaced by different visual impressions for different device categories ( phone, tablet, desktop).

Edited August 2, 2023 by Rollo62

[sjordi 42]

That's actually how I worked around the native TabControl since I was using only the tabs, not the panels as I use frames instead.
I switched to 4 buttons in a horizontal grid layer at the bottom of the other layer containing a listbox.

Was just curious if the font problem would be solved. I'll try it on a test blank app.

[Rollo62 539]

11 hours ago, sjordi said:

That's actually how I worked around the native TabControl since I was using only the tabs, not the panels as I use frames instead.

Same do I

 

The advantage of frames is, that you can mimic any complex component even with many complex controls, and other frames, inside.

Offering the ability to visually create and separately test them nice and easy, without the need to install them in the IDE on every change.

The only drawback is, that you cannot drag-and-drop (although you could, but this RAD approach seems not reliable too me), but you have to use them at runtime instead.

But for me this is a benefit, not a drawback 🙂

 

[sjordi 42]

It's also a huge improvement on ressource management.

You load only the form/frame you need instead of 10 tabs when using only 1.