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

Alexander Stolte

Expert
Licensed User
Longtime User
I'm using ASTabMenu with "Horizontal" and "text only" mode selected in Designer Custom Properties
mBase width is 360dip and height is 40dip yet the menu comes as vertical
Look in the designer, per default the Orientation is "Automatic" switch to "Horizontal". if "Automatic" is selected, then it selects the orientation based on the size of the view.
1636109449077.png
 

epiCode

Active Member
Licensed User
Look in the designer, per default the Orientation is "Automatic" switch to "Horizontal". if "Automatic" is selected, then it selects the orientation based on the size of the view.
View attachment 121261
it works fine when automatic is selected
but when horizontal is selected, even though base is wide and not tall, it switches to vertical orientation
 

Mashiane

Expert
Licensed User
Longtime User
Wow. Very impressive, thanks a lot for this. I have been able to be as close to the Android App as possible. Just one question please.

My ASTabMenu is sitting on top of a red image, this I have been able to make it red with white text, white badges. This works perfectly, however...

B4X:
ASTabMenu_horizontal.Badge_setVisibleEasy(3,5,xui.Color_WHITE)

Q1. Thing is I need to make the badge text color to be black. Is it possible to achieve that?
Q2. Is it possible to increase the size of the badge slightly?
Q3. In most cases, where badge numbers exceed 1 digits, e.g. 11, one would just indicate the badge as "+9", is that possible to do on the badge?

Thanks a lot, you were right, this is much more easier to use and customize. Congratulations.
 
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
Q1. Thing is I need to make the badge text color to be black. Is it possible to achieve that?
B4X:
Badge_getLabel(0).TextColor = black
Q2. Is it possible to increase the size of the badge slightly?
B4X:
Badge_setHeight(0) = 5dip
Q3. In most cases, where badge numbers exceed 1 digits, e.g. 11, one would just indicate the badge as "+9", is that possible to do on the badge?
Currently this is not possible, because I decided against it at that time, because then at 100+ then a 9+ would stand at once.
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.27
    • TextIconPadding can now be changed for each tab
B4X:
ASTabMenu_horizontal.TextIcon_Padding = 1.3 'all tabs after this has a padding of 1.3
ASTabMenu_horizontal.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test",ASTabMenu_horizontal.FontToBitmap(Chr(0xF015),False,30,xui.Color_White),"")

ASTabMenu_horizontal.TextIcon_Padding = 1.4 'all tabs after this has a padding of 1.4
ASTabMenu_horizontal.AddTab(xui.Color_ARGB(152,39, 174, 97),"Teeeeeeeeeest1",ASTabMenu_horizontal.FontToBitmap(Chr(0xF179),False,30,xui.Color_White),"")
Remember my request.
are you now happy?
 

VittorioBarile

Member
Licensed User
Update
  • 1.27
    • TextIconPadding can now be changed for each tab
B4X:
ASTabMenu_horizontal.TextIcon_Padding = 1.3 'all tabs after this has a padding of 1.3
ASTabMenu_horizontal.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test",ASTabMenu_horizontal.FontToBitmap(Chr(0xF015),False,30,xui.Color_White),"")

ASTabMenu_horizontal.TextIcon_Padding = 1.4 'all tabs after this has a padding of 1.4
ASTabMenu_horizontal.AddTab(xui.Color_ARGB(152,39, 174, 97),"Teeeeeeeeeest1",ASTabMenu_horizontal.FontToBitmap(Chr(0xF179),False,30,xui.Color_White),"")

are you now happy?
Hi,
i'm @Lello1964 's colleague.
i tryed to use this in Vertical ASTabMenu, but it doesn't work:

modded.png


B4X:
ASTabMenu_vertical.AddTab(0xFFABBED2,"Prenot.",ASTabMenu_vertical.FontToBitmap(Chr(0xF015),False,26,Main.xui.Color_White),"")
    ASTabMenu_vertical.TextIcon_Padding = 2
    ASTabMenu_vertical.CommitChanges
    
    ASTabMenu_vertical.AddTab(0xFF778899,"Magazzino",ASTabMenu_vertical.FontToBitmap(Chr(0xF187),False,26,Main.xui.Color_White),"")
    
    ASTabMenu_vertical.AddTab(0xFFABBED2,"Setup",ASTabMenu_vertical.FontToBitmap(Chr(0xE8B8),True,26,Main.xui.Color_White),"")
    ASTabMenu_vertical.AddTab(0xFF778899,"Esci",ASTabMenu_vertical.FontToBitmap(Chr(0xF011),False,26,Main.xui.Color_White),"")

Could you help me?
 

VittorioBarile

Member
Licensed User
B4X:
ASTabMenu_vertical.text_font = xui.CreateDefaultBoldFont(15) 'default value
ASTabMenu_vertical.CommitChanges 'commit changes for all tabs

the change is applied to all tabs, I need to change only one, some tabs text size 8 and some text size 14.
could I ask to you if you can do it too 🙏
 

pliroforikos

Active Member
Licensed User
Hello i'm using a astabmenu with 3 B4XPages. When i click on a tab it goes from page to page but i have problem with icons. Thery are getting focus.
If someone can tell me what i am doing wrong i'll be greatfull.

B4XMainPage:
#Region Shared Files
#CustomBuildAction: folders ready, %WINDIR%\System32\Robocopy.exe,"..\..\Shared Files" "..\Files"
'Ctrl + click to sync files: ide://run?file=%WINDIR%\System32\Robocopy.exe&args=..\..\Shared+Files&args=..\Files&FilesSync=True
#End Region

'Ctrl + click to export as zip: ide://run?File=%B4X%\Zipper.jar&Args=Project.zip

Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private ASTabMenu_horizontal As ASTabMenu
    Private menuFunctions As TabMenuFunctions
    Public pg1 As page1
    Public pg2 As page2
End Sub

Public Sub Initialize
    
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("frm_main")
    B4XPages.SetTitle(Me,"AS Tab Menu Example V1.20")
    pg1.Initialize
    B4XPages.AddPage("Page 1", pg1)
    pg2.Initialize
    B4XPages.AddPage("Page 2", pg2)
    menuFunctions.Initialize
    mainMenu
End Sub


Sub mainMenu
    ASTabMenu_horizontal.SelectedTabTextColor = xui.Color_Red
    ASTabMenu_horizontal.BeginUpdate
    ASTabMenu_horizontal.AddTab(xui.Color_White,"Menu1", _
        menuFunctions.FontToBitmap(menuFunctions.UnicodeToString(0xF1028),True,30,xui.Color_BLACK),"")
    ASTabMenu_horizontal.AddTab(xui.Color_White,"Menu2", _
        menuFunctions.FontToBitmap(Chr(0xF179),False,30,xui.Color_BLACK),"")
    ASTabMenu_horizontal.AddTab(xui.Color_White,"Menu3", _
        menuFunctions.FontToBitmap(Chr(0xF11B),False,30,xui.Color_BLACK),"")
    
'    ASTabMenu_horizontal.SetTab(0, True, True)
    ASTabMenu_horizontal.EndUpdate

    Sleep(0)
    
    ASTabMenu_horizontal.CurrentTabUnderlineGravity = ASTabMenu_horizontal.CurrentTabUnderlineGravity_BOTTOMRIGHT
    ASTabMenu_horizontal.TabStripMode = False
End Sub


'You can see the list of page related events in the B4XPagesManager object. The event name is B4XPage.
Sub ASTabMenu_horizontal_TabClick(index As Int)
    Select index
        Case 0
            Log("TabClick: " & index)
        Case 1
            Log("TabClick: " & index)
            B4XPages.ShowPageAndRemovePreviousPages("page 1")
        Case 2
            Log("TabClick: " & index)
            B4XPages.ShowPageAndRemovePreviousPages("page 2")
    End Select
End Sub

B4XPage1:
Sub Class_Globals
    Private Root As B4XView 'ignore
    Private xui As XUI 'ignore
    Private ASTabMenu_horizontal As ASTabMenu
    Private menuFunctions As TabMenuFunctions
End Sub

'You can add more parameters here.
Public Sub Initialize As Object
    Return Me
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    'load the layout to Root
    Root.LoadLayout("frm_page1")
    B4XPages.SetTitle(Me,"page1")

    menuFunctions.Initialize
    mainMenu
End Sub


Sub mainMenu
    ASTabMenu_horizontal.SelectedTabTextColor = xui.Color_Red
    ASTabMenu_horizontal.BeginUpdate
    ASTabMenu_horizontal.AddTab(xui.Color_White,"Menu1", _
        menuFunctions.FontToBitmap(menuFunctions.UnicodeToString(0xF1028),True,30,xui.Color_BLACK),"")
    
    ASTabMenu_horizontal.AddTab(xui.Color_White,"Menu2", _
        menuFunctions.FontToBitmap(Chr(0xF179),False,30,xui.Color_BLACK),"")
    
    ASTabMenu_horizontal.AddTab(xui.Color_White,"Menu3", _
        menuFunctions.FontToBitmap(Chr(0xF11B),False,30,xui.Color_BLACK),"")
    
'    ASTabMenu_horizontal.SetTab(1, True, True)
    ASTabMenu_horizontal.EndUpdate

    Sleep(0)
    
    ASTabMenu_horizontal.CurrentTabUnderlineGravity = ASTabMenu_horizontal.CurrentTabUnderlineGravity_BOTTOMRIGHT
    ASTabMenu_horizontal.TabStripMode = False
End Sub


'You can see the list of page related events in the B4XPagesManager object. The event name is B4XPage.
Sub ASTabMenu_horizontal_TabClick(index As Int)
    Select index
        Case 0
            Log("TabClick: " & index)
            B4XPages.ShowPageAndRemovePreviousPages("MainPage")
        Case 1
            Log("TabClick: " & index)
        Case 2
            Log("TabClick: " & index)
            B4XPages.ShowPageAndRemovePreviousPages("page 2")
    End Select
    
End Sub

B4XPage2:
Sub Class_Globals
    Private Root As B4XView 'ignore
    Private xui As XUI 'ignore
    Private ASTabMenu_horizontal As ASTabMenu
    Private menuFunctions As TabMenuFunctions
End Sub

'You can add more parameters here.
Public Sub Initialize As Object
    Return Me
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    'load the layout to Root
    Root.LoadLayout("frm_page2")
    B4XPages.SetTitle(Me,"page2")

    menuFunctions.Initialize
    mainMenu
End Sub


Sub mainMenu

    ASTabMenu_horizontal.SelectedTabTextColor = xui.Color_Red
    ASTabMenu_horizontal.BeginUpdate
    ASTabMenu_horizontal.AddTab(xui.Color_White,"Menu1", _
        menuFunctions.FontToBitmap(menuFunctions.UnicodeToString(0xF1028),True,30,xui.Color_BLACK),"")
    
    ASTabMenu_horizontal.AddTab(xui.Color_White,"Menu2", _
        menuFunctions.FontToBitmap(Chr(0xF179),False,30,xui.Color_BLACK),"")
    
    ASTabMenu_horizontal.AddTab(xui.Color_White,"Menu3", _
        menuFunctions.FontToBitmap(Chr(0xF11B),False,30,xui.Color_BLACK),"")
    
'    ASTabMenu_horizontal.SetTab(2, True, True)
    ASTabMenu_horizontal.EndUpdate

    Sleep(0)
    
    ASTabMenu_horizontal.CurrentTabUnderlineGravity = ASTabMenu_horizontal.CurrentTabUnderlineGravity_BOTTOMRIGHT
    ASTabMenu_horizontal.TabStripMode = False
End Sub


'You can see the list of page related events in the B4XPagesManager object. The event name is B4XPage.
Sub ASTabMenu_horizontal_TabClick(index As Int)
    Select index
        Case 0
            Log("TabClick: " & index)
            B4XPages.ShowPageAndRemovePreviousPages("MainPage")
        Case 1
            Log("TabClick: " & index)
            B4XPages.ShowPageAndRemovePreviousPages("page 1")
        Case 2
            Log("TabClick: " & index)
    End Select
    
End Sub
 

Lello1964

Well-Known Member
Licensed User
Longtime User
Hi Alexander, thanks for faster update.
I'im using lib in my Apk, i've a new request if possible :

. Set text size and color for each item in menu
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.31
    • Add AddTab2 - You fill manual the Tabs properties
    • Add GetTabProperties - Change the tab properties for with a index
I think I should completely redevelop the view.

Set text size and color for each item in menu
B4X:
ASTabMenu_vertical.GetTabProperties(0).BackgroundColor = xui.Color_Red
ASTabMenu_vertical.GetTabProperties(0).xFont = xui.CreateDefaultBoldFont(20)
ASTabMenu_vertical.CommitChanges
 
Last edited:

Lello1964

Well-Known Member
Licensed User
Longtime User
I've tryied latest version :

ASTabMenu_vertical.GetTabProperties(1).BackgroundColor = Main.xui.Color_LightGray OK
ASTabMenu_vertical.GetTabProperties(1).xFont = Main.xui.CreateDefaultBoldFont(18)
doesn't work
ASTabMenu_vertical.GetTabProperties(1).TextColor = Main.xui.Color_White doesn't work
ASTabMenu_vertical.CommitChanges

Add InternAddTab - You fill manual the Tabs properties
cannot find
 

Alexander Stolte

Expert
Licensed User
Longtime User
Add InternAddTab - You fill manual the Tabs properties cannot find
AddTab2
ASTabMenu_vertical.GetTabProperties(1).xFont = Main.xui.CreateDefaultBoldFont(18) doesn't work
ASTabMenu_vertical.GetTabProperties(1).TextColor = Main.xui.Color_White doesn't work
Download again, thanks.
 
Top