AppTabs icons and label too big on Android

[ErikKalkoken]

Checklist

• I have searched the issue tracker for open issues that relate to the same problem, before opening a new one.
• This issue only relates to a single bug. I will open new issues for any other problems.

Describe the bug

The icon and labels of AppTabs on Android are rendered much larger then for it's native pendant the Navigation Bar. This is not ideal, because it means that in comparison much more vertical space is occupied by the bar and less space available for the actual content of a tab. It also makes a Fyne app look very different from the a native app. The total number of icons appears to be the same though (maximum of 5 for both).

This might be a bug where Fyne's renderer fails to determine the correct icon and label size from Android.

How to reproduce

• Package and deploy a Fyne app with AppTabs to Android
• Run a Fyne app with AppTabs in the mobile simulator ((e.g. go run -tags mobile .)

Screenshots

For example here is how the AppTabs are rendered on Android:

For comparison this is how the an app using the native Navigation Bar looks on Android:

Example code

package main

import (
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/container"
	"fyne.io/fyne/v2/theme"
	"fyne.io/fyne/v2/widget"
)

func main() {
	a := app.New()
	w := a.NewWindow("Mobile UI")
	master := container.NewAppTabs(
		container.NewTabItemWithIcon("Home", theme.HomeIcon(), widget.NewLabel("Character")),
		container.NewTabItemWithIcon("Sheet", theme.AccountIcon(), widget.NewLabel("Sheet")),
		container.NewTabItemWithIcon("More", theme.MenuIcon(), widget.NewLabel("More")),
	)
	master.SetTabLocation(container.TabLocationBottom)
	w.SetContent(master)
	w.ShowAndRun()
}

Fyne version

v2.5.3

Go compiler version

1.23.4

Operating system and version

Waydroid 1.4.3 with Android Version 11

Additional Information

See also related discussion on Discord: https://discord.com/channels/953020122690359327/953030515152281650/1330254101774209034

[andydotxyz]

I agree we should match whatever "expected" tab size is on the platform.
I think the text size in general is OK - it's just that normal Android tabs (and iOS) have a smaller font size which we could match (caption size probably?)

[ErikKalkoken]

I looked at the current implementation and compared them to the specs for Material Design 3. It is easy to change, but I am not sure what solution to implement and would very much appreciate feedback and guidance.

Icon size

Icons are currently rendered with 2 x inline icon size (SizeNameInlineIcon), which is 20 units in the default theme, so size is 40 units.

Specs say 24dp

Label

Rendered with normal text size (SizeNameText, which is 14 units. And bold styling.

Specs say label size should be 12pt, compared to 14pt for normal text (on medium size devices). And normal styling.

Render comparison

Here is a comparison between the current implementation and a modification with these adjustments to match the specs:

• Icon: 1 x inline icon size
• Label: 12 units, normal

current	adjusted

Implementation discussion

Here are a couple of different solutions for implementing this change:

Solution A - Change for mobile

The easiest would be to detect when tabs are rendered for mobile and then apply these changes.

The label font size could be added as new size to the theme. Using the existing caption size would not be ideal, because it is smaller with 11 units and then the proportion would no longer match the specs.

However, this would change the appearance of app tabs for all Fyne apps on mobile, which would be a big change.

Solution B - Allow custom styling

Another option would be to add the ability for custom styling to AppTabs. For example by adding exported fields for icon size, label size and label style on the AppTab type.

This would be a smaller change, since it not impact any existing Fyne apps. However developers could then change the appearance of this widget in different ways, which might no longer fit to the current theme.

Solution C - Optional "small" variant

We could also add a "small" variant to AppTabs, which could be enabled though a public field on the type and would then render AppTabs with the above adjustments. The label size should then also be added to the theme to make it theme-able (same as Solution A).

This change would not impact existing Fyne apps and restrict the appearance of the widgets to two options only: the current and a small variant. However, the small variant could then also be used in desktop apps.

Sources

• Fyne - container/tabs/tabButtonRenderer.iconSize()
• Material Design 3 - Navigation Bar - Specs
• Material Design 3 - Typography - Type scales

[andydotxyz]

Ignore solution B - if the widget uses theme then a custom style can be accomplished by ThemeOverride container.

As far as I can see option A is right, and it's essentially just a theme change which we do from time to time.

It could be mobile specific - or perhaps apply somehow to desktop in the horizontal arrangements as well? That I think is open to discussion :)

[Jacalz]

I think the size problem is equally viable on the Linux mobile simulator as on Android if I remember correctly.

[andydotxyz]

This could relate to #3746 if theme is included in the solution.