[B4X] [XUI] AS Tab Menu (Bottom Menu/Navigation)

Alexander Stolte

Expert
Licensed User
Longtime User
May have example of use : AddTab2 ?
B4X:
    Dim xTab As Tabs
    xTab.Initialize
    xTab.BackgroundColor = xui.Color_Black
    xTab.BadgeVisible = True
    xTab.Icon = Null
    xTab.Index = -1 'is overwritten internally
    xTab.TabText = "Test"
    xTab.TextColor = xui.Color_White
    xTab.TextIconPadding = 2dip
    xTab.Visible = True
    xTab.xFont = xui.CreateDefaultBoldFont(12)
    ASTabMenu_horizontal.AddTab2(xTab)
 

Alexander Stolte

Expert
Licensed User
Longtime User
How to make the text thin or not in bold format?
B4X:
ASTabMenu_vertical.text_font = xui.CreateDefaultBoldFont(15)
Add this code before you add tabs
or
B4X:
ASTabMenu_vertical.GetTabProperties(0).xFont = xui.CreateDefaultBoldFont(15)
ASTabMenu_vertical.CommitChanges
if you only want to change one specific tab
 

Ilya G.

Active Member
Licensed User
Longtime User
My tab text became bold after updating to version 1.32

1647974547409.png
 

gigi0ne

Member
Licensed User
Longtime User
a quick question,

if I want the same menu on several pages (not all)
do I have to recreate it for each page or can I somehow
always use the same one?

thank you
 

Alexander Stolte

Expert
Licensed User
Longtime User
if I want the same menu on several pages (not all)
do I have to recreate it for each page or can I somehow
always use the same one?
You can add a code module with a function "CreateTabMenu" and then just pass the menu per parameter and make the settings you want to have there.
 

CryoGenID

Active Member
Licensed User
Longtime User
Hello Alexander,

here I am again (sorry ;-) )...
  1. Can I also enable/disable a tab in the menu somehow? Or would I need to hide it or manually change the colors of the icon and text?
  2. And regarding the badge:
    How can I set the fontsize (or set it to automatic)? Currently only one digit fits into the badge, but I would ideally need to fit more digits (e.g. 4)...
  3. Setting the default text color:
    I set it via "TabTextColor", but it only gets applied correctly when I click a tab (it doesn't matter which one) once...
    B4X:
    asTabMenu__main.BeginUpdateasTabMenu__main.AddTab(...)
    asTabMenu__main.AddTab(...)
    asTabMenu__main.TabTextColor = settings__UI__color__accent__default__text ' Default tab text color
    asTabMenu__main.SelectedTabTextColor = settings__UI__color__accent__default ' Tab text color when selected
    asTabMenu__main.setTabText(0, "Test0")
    asTabMenu__main.setTabText(1, "Test1")
    asTabMenu__main.CommitChanges
    asTabMenu__main.EndUpdate

Thanks :)

Best regards,

Chris
 
Last edited:

AlexMaa

Member
Licensed User
Longtime User
Hello Alexander,

suggestion,
1) add padding Badge on top

B4X:
Private g_BadgeTopPadding As Float = 0
......

Public Sub setBadge_setTopPadding(padding As Float)
    g_BadgeTopPadding = padding
End Sub
.....

else If g_badge_gravity = getBadge_TOPLEFT Then
    xlbl_badge.SetLayoutAnimated(0,xpnl_base.Width/2 - icon_height/1.2 + g_BadgeLeftPadding,xpnl_base.Height/2 - icon_height + g_BadgeTopPadding,badge_height,badge_height)
else If g_badge_gravity = getBadge_TOPMIDDLE Then
    xlbl_badge.SetLayoutAnimated(0,xpnl_base.Width/2 - badge_height/2 + g_BadgeLeftPadding,xpnl_base.Height/2 - icon_height + g_BadgeTopPadding,badge_height,badge_height)
else If g_badge_gravity = getBadge_TOPRIGHT Then
    xlbl_badge.SetLayoutAnimated(0,xpnl_base.Width/2 + icon_height/1.2 - badge_height + g_BadgeLeftPadding, xpnl_base.Height/2 - icon_height + g_BadgeTopPadding ,badge_height,badge_height)

2) and text color Badge
B4X:
TabMenu.Badge_setVisibleEasy(1, 10, xui.Color_Red, xui.Color_White)
.....

Public Sub Badge_setVisibleEasy(index As Int,number As Int, color As Int, textсolor As Int)
    Badge_setColor(index, color, textсolor)
    Badge_setText(index,number)
    Badge_setVisible(index,True)
End Sub

'gets or sets the badge color
Public Sub Badge_setColor(index As Int, color As Int, textсolor As Int)
    Dim tmp_base As B4XView = xpnl_tabbase.GetView(index)
    Dim xlbl_badge As B4XView = tmp_base.GetView(2)
    xlbl_badge.Color = color
    xlbl_badge.TextColor = textсolor
End Sub


Sorry and Thanks :)
Best regards
 

CryoGenID

Active Member
Licensed User
Longtime User
Alexander,

could you also change the badge so that I can display e.g. an FontAwesome Icon instead of a number?

Thanks so much!

Best regards,

Chris
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.34
    • Add Badge_setTopPadding
    • Add Badge_setTextColor
change the badge so that I can display e.g. an FontAwesome Icon instead of a number?
B4X:
ASTabMenu_horizontal.Badge_getLabel(0).Font = xui.CreateFontAwesome(15)
ASTabMenu_horizontal.Badge_getLabel(0).Text = Chr(0xF179)
 

angel_

Well-Known Member
Licensed User
Longtime User
Update
  • 1.34
    • Add Badge_setTopPadding
    • Add Badge_setTextColor

B4X:
ASTabMenu_horizontal.Badge_getLabel(0).Font = xui.CreateFontAwesome(15)
ASTabMenu_horizontal.Badge_getLabel(0).Text = Chr(0xF179)
Could you add this?:

 

Alexander Stolte

Expert
Licensed User
Longtime User
Tonight, or tomorrow I'll release a completely new TabMenu. (AS_TabMenuAdvanced)
This is completely newly developed and each tab can be customized. The property handling is like my other new views, easier through Types.
Tabs can be disabled, tabs can have different icons. (SelectedIcon, UnselectedIcon, DisabledIcon).
1654005415265.png

But the tabmenu can only be used in horizontal mode, I don't have plans for a vertical mode this time.
 
Top