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

ggpanta · Mar 20, 2020

Cebuvi said:
But that way I change the color of all the tab. I want to change the color of just a specific tab.

You can add something like this in the menu (ASTabMenu.bas):

B4X:

Public Sub setTabBG (index As Int, colour As Int)
    Dim tmp_tab As B4XView = xpnl_tabbase.GetView(index)
    tmp_tab.Color = colour
End Sub

After, using:

B4X:

MainTabMenu.setTabBG(0, Colors.Green)

Will change the bg colour of the selected tab.

ggpanta · Mar 20, 2020

@Alexander Stolte

These are some additions of mine you might find useful:

B4X:

Public Sub setTabBG (index As Int, colour As Int)
    Dim tmp_tab As B4XView = xpnl_tabbase.GetView(index)
    tmp_tab.Color = colour
End Sub

Public Sub getTabCount() As Int
    Return xpnl_tabbase.NumberOfViews
End Sub

Public Sub getTabSelected() As Int
    For i = 0 To getTabCount -1
        Dim tmp_tab As B4XView = xpnl_tabbase.GetView(i)
        Dim tmp_Text As B4XView = tmp_tab.GetView(0)
     
        If tmp_Text.TextColor == g_SelectedTabTextColor Then
            Return i
        End If
    Next
    Return -1
End Sub

Public Sub setTabUnderlineSize(width As Int)
        Dim tmp_tab As B4XView = xpnl_underline
        
        If width = -1 Then
            width = xpnl_tabbase.GetView(0).Width / 2
        End If
        
        tmp_tab.Left = xpnl_tabbase.GetView(getTabSelected).Left + ( xpnl_tabbase.GetView(getTabSelected).Width - width ) / 2
        tmp_tab.Width = width
End Sub

Note: The getTabSelected obviously will break if the user does not have a different text colour for the active/selected tab, but it suits me and I didn't want to change the tab creation to add an indicator in the component to keep my changes compatible with future updates of yours.

This is a very nice menu btw thanks for making it

M.G.R · Mar 20, 2020

Please how to change icons?

M.G.R · Mar 20, 2020

and how to add an URL for every tab?
sorry i am new in this

ggpanta · Mar 20, 2020

M.G.R said:
Please how to change icons?

You add the icon either while creating the Tab:

B4X:

TabMenu.AddTab(xui.Color_ARGB(255, 154, 197, 239), "Home", TabMenu.FontToBitmap(Chr(0xF015), False, 15, xui.Color_White), "")

or by using .setTabIcon():

B4X:

TabMenu.setTabIcon(0, TabMenu.FontToBitmap(Chr(0xF015), False, 15, xui.Color_White))

M.G.R said:
and how to add an URL for every tab?
sorry i am new in this

Where exactly would you like to add the URL ? Note that using a URL for the text of each tab will make it look a bit ugly on most devices since it will be too long.

M.G.R · Mar 20, 2020

ggpanta said:
Where exactly would you like to add the URL ? Note that using a url for the text of each tab will make it look a bit ugly on most devices since it will be too long.

no, i mean when i click on home icon for example, i go to home page, and if i click on Categorise, i go to Categorise section on my site
i use webview

also how to make the size bigger between icon and text

Alexander Stolte · Mar 20, 2020

M.G.R said:
and how to add an URL for every tab?

Use the tag property to put a url to a tab, you can set a tag by adding a new tab or at runtime with the property ".setTabTag"
The tag is the last parameter in the add tab function:


ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test",Null,"PutYourURLHere")

Alexander Stolte · Mar 20, 2020

M.G.R said:
also how to make the size bigger between icon and text

On line 230 is the relevant code for this:

B4X:

    If isHorizontal = True Then
            xlbl_text.SetLayoutAnimated(0,0,xpnl_base.Height/2,xpnl_base.Width,txt_height)
                ximg_icon.SetLayoutAnimated(0,xpnl_base.Width/2 - icon_height/2 ,xpnl_base.Height/2 - icon_height/1.5,icon_height,icon_height)
            Else
                xlbl_text.SetLayoutAnimated(0,0,xpnl_base.Height/2,xpnl_base.Width,txt_height)
                ximg_icon.SetLayoutAnimated(0,xpnl_base.Width/2 - icon_height/2 ,xpnl_base.Height/2 - icon_height/1.5,icon_height,icon_height)
                End If

change the "icon_height/1.5" to "icon_height/1.6"

Alexander Stolte · Mar 20, 2020

ggpanta said:
getTabSelected()

Oh i forgot the CurrentIndex property. I have a better code for it because I already have it with me internally

ggpanta said:
getTabCount()

use the: "TabSize" property

ggpanta said:
setTabUnderlineSize

Use this property: "UnderLineHeight"

Update
V1.04
-Add getCurrentIndex - gets the current tab index
-Add getTabBackgroundColor and setTabBackgroundColor - gets or sets the tab background color

M.G.R · Mar 20, 2020

Alexander Stolte said:
Use the tag property to put a url to a tab, you can set a tag by adding a new tab or at runtime with the property ".setTabTag"
The tag is the last parameter in the add tab function: ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test",Null,"PutYourURLHere")

i have put my URL but when i click on tab it do nothing

B4X:

    ASTabMenu_horizontal.AddTab(xui.Color_ARGB(255,17, 127, 64),"Home",LoadBitmap(File.DirAssets,"Home.png"),"https://www.google.com")

do i miss anything?

Alexander Stolte · Mar 20, 2020

M.G.R said:
do i miss anything?

yes, the tag property is a place to store informations for a tab. If you click on a Tab then you can get the tag from the selected tab from the index and put the url into your webview.

Jorge M A · Mar 20, 2020

You need to handle it yourself in TabClick event.
EDIT: Alexander beat me for a microseconds....

M.G.R · Mar 20, 2020

Jorge M A said:
You need to handle it yourself in TabClick event.

Great, its worked now

B4X:

If index = 1 Then
        WebView1.LoadUrl("https://www.yahoo.com")
    End If
    
    If index = 2 Then
        WebView1.LoadUrl("https://www.msn.com")
    End If

Thank you Jorge M A, Thank you Alexander Stolte

M.G.R · Mar 20, 2020

Another quesion,
How to upgrade to V1.04 ?
did i lose all my settings?

Jorge M A · Mar 21, 2020

M.G.R said:
did i lose all my settings?

I don't think so. Less so in this version that adds methods and not properties.
Update the library, open your project, open your layout with the designer and save the file.
You should have no problem running it.

Alexander Stolte · Mar 21, 2020

M.G.R said:
did i lose all my settings?

you never lose your settings, not even if I add another property to the designer.

jose luis gudino · Mar 22, 2020

I congratulate you, excellent library
Thank you
(ASTabMenu
Author: Alexander Stolte
Version: 1.02 )

giannimaione · Mar 22, 2020

is there a scrollview property?
how to solve ASTabMenu (vertical mode) when there are many .AddTab ;
now i use ASTabMenu 1.04 for B4J

Alexander Stolte · Mar 22, 2020

giannimaione said:
is there a scrollview property?

this is not planned for this view, because then there would be another dependency on the xcustomlistview.

giannimaione said:
how to solve ASTabMenu (vertical mode) when there are many .AddTab ;

what do you mean?

giannimaione · Mar 22, 2020

is there a scrollview property?
your answer:

Alexander Stolte said:
this is not planned for this view, because then there would be another dependency on the xcustomlistview.

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

Member

Member

Member

Member

Member

Member

Expert

Expert

Expert

Member

Expert

Well-Known Member

Member

Member

Well-Known Member

Expert

Active Member

Well-Known Member

Expert

Well-Known Member

Privacy & Transparency

Privacy & Transparency