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

Alexander Stolte · Nov 5, 2021

mohsyn said:
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.

epiCode · Nov 5, 2021

Alexander Stolte said:
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

Alexander Stolte · Nov 6, 2021

Update

1.25
- BugFix Orientation = Horizontal was Vertical

Mashiane · Nov 11, 2021

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.

Alexander Stolte · Nov 11, 2021

Mashiane said:
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

Mashiane said:
Q2. Is it possible to increase the size of the badge slightly?

B4X:

Badge_setHeight(0) = 5dip

Mashiane said:
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.

Lello1964 · Nov 11, 2021

Lello1964 said:
Pls remeber my request.

Remember my request.

Alexander Stolte · Nov 11, 2021

Update

1.26
- Badges display now the 9+ after 99 -> 9+

Alexander Stolte · Nov 11, 2021

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),"")

Lello1964 said:
Remember my request.

are you now happy?

Lello1964 · Nov 11, 2021

Many many many thanks.

VittorioBarile · Nov 12, 2021

Alexander Stolte said:

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:

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?

Alexander Stolte · Nov 12, 2021

Update

1.28
- TextIcon_Padding is now more logical
  - +1dip and the icon goes up
  - -1dip and the icon goes down

VittorioBarile · Nov 15, 2021

Lello1964 said:
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 · Dec 4, 2021

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

Alexander Stolte · Dec 20, 2021

Update

1.29
- BaseResize is now Public

Lello1964 · Mar 6, 2022

May you add LongClick event ?

Alexander Stolte · Mar 6, 2022

Update

1.30
- Add Event TabLongClick

Lello1964 · Mar 6, 2022

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 · Mar 7, 2022

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.

Lello1964 said:
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

Lello1964 · Mar 7, 2022

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 · Mar 7, 2022

Lello1964 said:
Add InternAddTab - You fill manual the Tabs properties cannot find

AddTab2

Lello1964 said:
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.

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

Expert

Active Member

Expert

Expert

Expert

Well-Known Member

Expert

Expert

Well-Known Member

Member

Expert

Member

Active Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert