B4A Library [B4X] [XUI] AS Tab Menu (Bottom Menu)

Alexander Stolte

Well-Known Member
Licensed User
Hey B4X-Forum! New Year, new views! :)
The first one from me for this year is a better, simpler, faster and scalable Tab/Bottom-Menu.

i spend a lot of time in creating views, some views i need by my self, but some views not and to create a high quality view cost a lot of time. If you want to support me, then you can do it here by Paypal. :)
B4j: jXUI,jBitmapCreator,JavaObject
B4a: XUi,BitmapCreator
B4i: iXUI,iBitmapCreator
Features
  • cross-platform compatible
  • use it Horizontal or Vertical
  • reponsive design
  • 1 Underline Animations
  • easy to use
  • you can use 2,3,4,5,6,7,8,9,10, > endless tabs
  • only Text, only icons or text with icons
  • show badges
You need 8 Tabs? no problem! Create as many tabs as fit on the screen, perfect for tablets too.
Screenshot_20200224-203427__01.jpg
Resize it
AS Tab Menu Demo low.gif
Text with Icon
Screenshot_20200224-203427.jpg
Only Text
Screenshot_20200224-203500.jpg
Only Icon
Screenshot_20200224-203443.jpg
Change it on the fly
ezgif.com-resize.gifAS Tab Menu Demo 2.gif
Show Parting Lines
Screenshot_20200226-093218.jpg
Use it vertical
Screenshot_20200302-121054.jpgScreenshot_20200302-120951.jpg
Show badges
Screenshot_20200325-162119.jpgScreenshot_20200325-161959.jpgScreenshot_20200325-162212.jpg
You need to scroll? No problem look at this example.
AS Tab Menu with xCustomListView.gif
Examples
Add 8 Tabs Example (Text with Icon):
    ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test",ASTabMenu1.FontToBitmap(Chr(0xF015),False,30,xui.Color_White),"")
    ASTabMenu1.AddTab(xui.Color_ARGB(152,39, 174, 97),"Test1",ASTabMenu1.FontToBitmap(Chr(0xF179),False,30,xui.Color_White),"")
    ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test3",ASTabMenu1.FontToBitmap(Chr(0xF11B),False,30,xui.Color_White),"")
    ASTabMenu1.AddTab(xui.Color_ARGB(152,39, 174, 97),"Test4",ASTabMenu1.FontToBitmap(Chr(0xE859),True,30,xui.Color_White),"")
    ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test5",ASTabMenu1.FontToBitmap(Chr(0xF011),False,30,xui.Color_White),"")
    ASTabMenu1.AddTab(xui.Color_ARGB(152,39, 174, 97),"Test6",ASTabMenu1.FontToBitmap(Chr(0xF1E2),False,30,xui.Color_White),"")
    ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test7",ASTabMenu1.FontToBitmap(Chr(0xF1EB),False,30,xui.Color_White),"")
    ASTabMenu1.AddTab(xui.Color_ARGB(152,39, 174, 97),"Test8",ASTabMenu1.FontToBitmap(Chr(0xF239),False,30,xui.Color_White),"")
Add a Tab without an icon, just with text:
ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test",Null,"")
Change text font:
ASTabMenu.text_font = xui.CreateDefaultBoldFont(15)
ASTabMenu.CommitChanges
ASTabMenu
Author: Alexander Stolte
Version: 1.12

  • ASTabMenu
    • Events:
      • TabClick (index As Int)
    • Fields:
      • text_font As B4XFont
      • TextIcon_Padding As Float 'default is 1.3
    • Functions:
      • AddTab (background_color As Int, text As String, icon As B4XBitmap, tag As Object) As String
        adds a new tab
      • Badge_getColor (index As Int) As Int
      • Badge_getHeight As Float
      • Badge_getLabel (index As Int) As B4XView
        gets the badge label, to modify it to your own
      • Badge_getVisible (index As Int) As Boolean
      • Badge_setColor (index As Int, color As Int) As String
        gets or sets the badge color
      • Badge_setHeight (size As Float) As String
        gets or sets the badge height, per default it is 15dip
      • Badge_setText (index As Int, number As Int) As String
        sets the badge number, set it to -1 to have only the color
      • Badge_setVisible (index As Int, visible As Boolean) As String
        show or hide the badge on a tab
      • Badge_setVisibleEasy (index As Int, number As Int, color As Int) As String
        shows the badge with all important settings to save lines of code
      • Class_Globals As String
      • CommitChanges As String
        Refresh the view and commit changes to the view
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • FontToBitmap (text As String, IsMaterialIcons As Boolean, FontSize As Float, color As Int) As B4XBitmap
      • getBadge_Gravity As String
      • getBadge_MIDDLELEFT As String
      • getBadge_MIDDLERIGHT As String
      • getBadge_TOPLEFT As String
      • getBadge_TOPMIDDLE As String
      • getBadge_TOPRIGHT As String
      • getBaseView As B4XView
        gets the mbase
      • getCommitMode As String
      • getCommitMode_AUTOMATIC As String
      • getCommitMode_MANUALLY As String
      • getCurrentIndex As Int
        gets the current tab index
      • getCurrentTabUnderline As Boolean
        hide or shows the underline
      • getCurrentTabUnderlineAnimation As String
        gets or sets the underline animation
      • getCurrentTabUnderlineAnimation_NORMAL As String
      • getCurrentTabUnderlineAnimationDuration As Int
        gets or sets the duration of the underline animation
      • getCurrentTabUnderlineGravity As String
        gets or sets the gravity of the underline
      • getCurrentTabUnderlineGravity_BOTTOMRIGHT As String
      • getCurrentTabUnderlineGravity_TOPLEFT As String
      • getEnableSelectedTabTextColor As Boolean
        enable or disable the tab text color on clicking on a tab
      • getOrientation_AUTOMATIC As String
      • getOrientation_HORIZONTAL As String
      • getOrientation_VERTICAL As String
      • getPartingLineColor As Int
        gets or sets the color of the parting line
      • getPartingLineVisible As Boolean
        show or hide the parting line
      • getPartingLineWidth As Float
        gets or sets the thickness of the parting line
      • getSelectedTabTextColor As Int
        gets or sets the text color of the selected tab
      • getTabBackgroundColor (index As Int) As Int
      • getTabClickColor As Int
        gets or sets the tab click color
      • getTabIcon (index As Int) As B4XBitmap
        gets or sets the icon of a tab
      • getTabSize As Int
        Gets the Number of Tabs
      • getTabStyle As String
        gets or sets the tab style
      • getTabStyle_ICON As String
      • getTabStyle_TEXT As String
      • getTabStyle_TEXTICON As String
      • getTabTag (index As Int) As Object
        gets or sets the tag of a tab
      • getTabText (index As Int) As String
        gets or sets the text of a tab
      • getTabTextColor As Int
      • getUnderLineColor As Int
        gets or sets the color of the underline
      • getUnderLineHeight As Float
        gets or sets the thickness of the underline
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • RemoveAt (index As Int) As String
        Removes the tab on the given index, if the current index is higher then the number of views, then the current index is set to 0 and the first tab is clicked
      • setBadge_Gravity (badge_gravity As String) As String
        for example take this enum for parameter: Badge_MIDDLERIGHT
        Has no effect with only Text
      • setCommitMode (commit_mode As String) As String
      • setCurrentTabUnderline (show As Boolean) As String
      • setCurrentTabUnderlineAnimation (animation As String) As String
      • setCurrentTabUnderlineAnimationDuration (duration As Int) As String
      • setCurrentTabUnderlineGravity (underline_gravity As String) As String
      • setEnableSelectedTabTextColor (enable As Boolean) As String
      • setPartingLineColor (clr As Int) As String
      • setPartingLineVisible (visible As Boolean) As String
      • setPartingLineWidth (width As Float) As String
      • setSelectedTabTextColor (color As Int) As String
      • SetTab (index As Int, withClickEvent As Boolean, withHalo As Boolean) As String
        sets the selected tab
      • setTabBackgroundColor (index As Int, colour As Int) As String
        sets or gets the background color of a tab
      • setTabClickColor (color As Int) As String
      • setTabIcon (index As Int, icon As B4XBitmap) As String
      • setTabStyle (style As String) As String
      • setTabTag (index As Int, tag As Object) As String
      • setTabText (index As Int, text As String) As String
      • setTabTextColor (color As Int) As String
        gets or sets the non selected tab text color
      • setUnderLineColor (clr As Int) As String
      • setUnderLineHeight (height As Float) As String
    • Properties:
      • Badge_Gravity As String
        for example take this enum for parameter: Badge_MIDDLERIGHT
        Has no effect with only Text
      • Badge_MIDDLELEFT As String [read only]
      • Badge_MIDDLERIGHT As String [read only]
      • Badge_TOPLEFT As String [read only]
      • Badge_TOPMIDDLE As String [read only]
      • Badge_TOPRIGHT As String [read only]
      • BaseView As B4XView [read only]
        gets the mbase
      • CommitMode As String
      • CommitMode_AUTOMATIC As String [read only]
      • CommitMode_MANUALLY As String [read only]
      • CurrentIndex As Int [read only]
        gets the current tab index
      • CurrentTabUnderline As Boolean
        hide or shows the underline
      • CurrentTabUnderlineAnimation As String
        gets or sets the underline animation
      • CurrentTabUnderlineAnimation_NORMAL As String [read only]
      • CurrentTabUnderlineAnimationDuration As Int
        gets or sets the duration of the underline animation
      • CurrentTabUnderlineGravity As String
        gets or sets the gravity of the underline
      • CurrentTabUnderlineGravity_BOTTOMRIGHT As String [read only]
      • CurrentTabUnderlineGravity_TOPLEFT As String [read only]
      • EnableSelectedTabTextColor As Boolean
        enable or disable the tab text color on clicking on a tab
      • Orientation_AUTOMATIC As String [read only]
      • Orientation_HORIZONTAL As String [read only]
      • Orientation_VERTICAL As String [read only]
      • PartingLineColor As Int
        gets or sets the color of the parting line
      • PartingLineVisible As Boolean
        show or hide the parting line
      • PartingLineWidth As Float
        gets or sets the thickness of the parting line
      • SelectedTabTextColor As Int
        gets or sets the text color of the selected tab
      • TabClickColor As Int
        gets or sets the tab click color
      • TabSize As Int [read only]
        Gets the Number of Tabs
      • TabStyle As String
        gets or sets the tab style
      • TabStyle_ICON As String [read only]
      • TabStyle_TEXT As String [read only]
      • TabStyle_TEXTICON As String [read only]
      • TabTextColor As Int
        gets or sets the non selected tab text color
      • UnderLineColor As Int
        gets or sets the color of the underline
      • UnderLineHeight As Float
        gets or sets the thickness of the underline
  • Tabs
    • Fields:
      • badge_visible As Boolean
      • Icon As B4XBitmap
      • Index As Int
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TabText As String
      • Tag As Object
    • Functions:
      • Initialize
        Initializes the fields to their default value.
ToDo's
  • BitmapCreator Effects
  • Add Stretch underline animation
  • Underline Top or Bottom property
  • Add Horizontal, Vertical and Automatic function
  • Underline Option: Circle, instead of a line, a circle/dot
  • Refresh Mode - Automatic and manually (because in some cases the Base_Resize is called very often when you change something in the view, it can improve performance if you have to do this manually, after you change a lot of properties in code)
Ideas
  • Animation: Only Icon, if you click on it, then the text from the Tab appears
Changelog
  • 1.0
    • Release
  • 1.01
    • Add RemoveAt - Removes a tab by a given index
      • RemoveAt in action.gif
    • Add Property PartingLineVisible - shows an parting line between the tabs
      • Screenshot_20200226-093218.jpg
      • Add get and set PartingLineColor
      • Add get and set PartingLineWidth
      • Add get and set PartingLineVisible
    • Add get and set UnderLineColor
    • Add get and set UnderLineHeight
    • Add getTabIcon -gets the icon of a given tab
    • Add setTabIcon -sets a new icon to a tab
    • Add getTabText -gets the text ov a given tab
    • Add setTabText -sets a new text to a tab
  • 1.02
    • Add getTabTag
    • Add setTabTag
  • 1.03
    • Add Property Orientation - indicates the mode in which the view is, horizontal or vertical
    • The menu can now be used vertical
    • Add Property CurrentTabUnderlineGravity - sets the underline gravity, on vertical mode = Top and Bottom and on horizontal mode = Left and Right
    • Screenshot_20200302-121054.jpgScreenshot_20200302-120951.jpgezgif.com-resize.gif
  • 1.04
    • Add getCurrentIndex - gets the current tab index
    • Add getTabBackgroundColor and setTabBackgroundColor - gets or sets the tab background color
  • 1.05
    • Adds a short description about a property
    • Add get and set Badge_Visible - shows or hide a badge on a tab
      • Screenshot_20200325-161959.jpg
      • Screenshot_20200325-162119.jpgScreenshot_20200325-162212.jpgScreenshot_20200325-162239.jpg
    • Add get and set Badge_Height - set the size of the badge
    • Add set Badge_Text - sets the badge number, set it to -1 to have only the color
    • Add get Badge_getLabel - gets the badge label, to modify it to your own
    • Add get and set Badge_Color - gets or sets a badge color
    • Add set Badge_setVisibleEasy - shows the badge with all important parameters to save lines of code
    • 1.06
      • Badge Bug Fixing
      • Add get and set Badge_Gravity
      • Add enums. for the Badge_Gravity
        • Badge_MIDDLERIGHT
        • Badge_MIDDLELEFT
        • Badge_TOPRIGHT
        • Badge_TOPMIDDLE
        • Badge_TOPLEFT
    • 1.07
      • Icon Size is now smaller
      • Badge Bug Fixing
    • 1.08
      • Add Commit Mode Designer Property
        • CommitMode_MANUALLY - you need to call CommitChanges if you make changes
        • CommitMode_AUTOMATIC - The view is refreshing automatically after you make changes on the view
      • Add CommitChanges Property
    • 1.09
      • Add Public Variable: text_font - change the font of the text
    • 1.10
      • TabClick Bug Fix if withHalo = false
  • 1.11
    • Add TextIcon_Padding public variable - if you need more space between text and icon
      • default is 1.3
  • 1.12
    • B4I Underline Bug Fix
Have Fun :)
 

Attachments

Last edited:

Alexander Stolte

Well-Known Member
Licensed User
1.01
  • Add RemoveAt - Removes a tab by a given index

    • RemoveAt in action.gif
  • Add Property PartingLineVisible - shows an parting line between the tabs
    • Screenshot_20200226-093218.jpg
    • Add get and set PartingLineColor
    • Add get and set PartingLineWidth
    • Add get and set PartingLineVisible
  • Add get and set UnderLineColor
  • Add get and set UnderLineHeight
  • Add getTabIcon -gets the icon of a given tab
  • Add setTabIcon -sets a new icon to a tab
  • Add getTabText -gets the text ov a given tab
  • Add setTabText -sets a new text to a tab
 

Jorge M A

Active Member
Licensed User
Hi Alexander!
Thank you for sharing this control so we can evaluate it. It's fantastic!
One question, how can I get the Tag through the Tab Clicked Index?
 

Martin D.

Member
Licensed User
Hi, thanks for this awesome view. Would it be too time-consuming to make this menu vertical as an option ? Text and slider would be vertical, images would be rotated.
 

Kope

Member
Licensed User
Hi, Thanks for the Menu. Please how do one change the Green background color and how can one get to set his preferred icon which as .png ?

thank you
 

Alexander Stolte

Well-Known Member
Licensed User
how do one change the Green background color
The first Parameter on the "AddTab" is the background color of this Tab.
ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test",Null,"")

how can one get to set his preferred icon which as .png
Change this
ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test",ASTabMenu1.FontToBitmap(Chr(0xF015),False,15,xui.Color_White),"")
to this
ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test",LoadBitmap(File.DirAssets,"mypng.png"),"")
 

Kope

Member
Licensed User
The first Parameter on the "AddTab" is the background color of this Tab.
ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test",Null,"")


Change this
ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test",ASTabMenu1.FontToBitmap(Chr(0xF015),False,15,xui.Color_White),"")
to this
ASTabMenu1.AddTab(xui.Color_ARGB(255,39, 174, 97),"Test",LoadBitmap(File.DirAssets,"mypng.png"),"")
Thank You
 

Alexander Stolte

Well-Known Member
Licensed User
vertical as an option
  • 1.03
    • Add Property Orientation - indicates the mode in which the view is, horizontal or vertical
    • The menu can now be used vertical
    • Add Property CurrentTabUnderlineGravity - sets the underline gravity, on vertical mode = Top and Bottom and on horizontal mode = Left and Right
    • Screenshot_20200302-121054.jpgScreenshot_20200302-120951.jpgezgif.com-resize.gif
 

Cebuvi

Active Member
Licensed User
Hi,
very good work.

Is it possible to change the color of the text and/or the background of a tab to show it as enabled or disabled?

Thank you.
 

Alexander Stolte

Well-Known Member
Licensed User
Is it possible to change the color of the text and/or the background of a tab to show it as enabled or disabled?
look in the designer for "Selected Tab Text Color" or in the code via ASTabMenu_vertical.SelectedTabTextColor = xui.Color_Yellow for the active color
and look in the designer for "Tab Text Color" or in the code via ASTabMenu_vertical.TabTextColor = xui.Color_Red for the non active color.
 

Cebuvi

Active Member
Licensed User
But that way I change the color of all the tab. I want to change the color of just a specific tab.
 
Top