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

A better menu, can you find here

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 or with a coffee.

Spoiler: Dependencies/Libraries you need for this view

B4j: jXUI,jBitmapCreator
B4a: XUi,Reflection
B4i: iXUI

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.

Resize it

Text with Icon

Only Text

Only Icon

Change it on the fly

Show Parting Lines

Use it vertical

Show badges

You need to scroll? No problem look at this example.

Examples

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

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

ASTabMenu.text_font = xui.CreateDefaultBoldFont(15)
ASTabMenu.CommitChanges

ASTabMenu
Author: Alexander Stolte
Version: 1.23

• ASTabMenu
  • Events:
    • TabClick (index As Int)
  • Fields:
    • text_font As B4XFont
    • TextIcon_Padding As Float
  • 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
      

      FontAwesome To Bitmap

      Unlike an older "TextToBitmap" sub that you can find in the forum, this code vertically centers the icon. It can also be used in B4J and B4i (only need to change the font line). Sub Activity_Create(FirstTime As Boolean) 'usage example Activity.AddMenuItem3("Android", "Test"...

      www.b4x.com
    • 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
    • getHaloDuration As Int
    • 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
    • getTabStripMode As Boolean
      sets or gets the TabStripMode, if true the underline width is the full tab
    • 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.
    • RemoveAllTabs As String
    • 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
    • setBadge_setLeftPadding (padding As Float) As String
    • 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
    • setHaloDuration (duration As Int) 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
    • setTabStripMode (enable As Boolean) 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
    • ViewEnable (enable As Boolean) As String
    • VisibleAt (index As Int, visible As Boolean) 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_setLeftPadding
    • 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
    • HaloDuration As Int
    • 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
    • TabStripMode As Boolean
      sets or gets the TabStripMode, if true the underline width is the full tab
    • 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
    • Visible As Boolean
  • Functions:
    • Initialize
      Initializes the fields to their default value.

ToDo's

• BitmapCreator Effects
• Add Stretch underline animation
• Underline Option: Circle, instead of a line, a circle/dot

Ideas

• Animation: Only Icon, if you click on it, then the text from the Tab appears

Changelog

Spoiler: changelog other versions

• 1.0
  • Release
• 1.01
  • Add RemoveAt - Removes a tab by a given index
    • 
  • Add Property PartingLineVisible - shows an parting line between the tabs
    • 
    • 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
  • 
• 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
    • 
    • 
      
      View attachment 90590
  • 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
• 1.13
  • Add VisibleAt -Shows or Hide a tab
  • Add Support for Icons or Text mixed
    • View attachment 97525
  • Add TabStripMode - if true, then the underline width/height is the full tab
    • View attachment 97526
  • Example is now based on B4XPages
• 1.14
  • Add ViewEnable - enable or disable the view
• 1.15
  • B4A only - BugFix if the text is too long
  • B4A only - new dependency "Reflection"
  • B4I only - ViewEnable BugFix
• 1.16
  • Add RemoveAllTabs
• 1.20
  • Add get/set HaloDuration
  • Add setBadge_setLeftPadding
  • B4I Better handling of icons - looks now better
  • B4A and B4J The view can now also have round corners - added SetCircleClip
    • on B4J you need to set setCornerRadius
  • B4A and B4I New Icon Tint Function, the quality of icons with a new color is now better
  • B4A and B4I BitmapCreator is no longer required
• 1.21
  • BugFixes
• 1.22
  • Adds BorderPadding - if you want a border, then set the BorderWidth here for the padding
• 1.23 (read more)
  • Add BeginUpdate - Call this if you remove or add tabs, no events or animations during this
  • Add EndUpdate - Call this if you finished adding or removing tabs
  • BugFixes
• 1.24
  • core iif function is now used
• 1.25
  • BugFix Orientation = Horizontal was Vertical
• 1.26
  • Badges display now the 9+ after 99 -> 9+
• 1.27
  • TextIconPadding can now be changed for each tab
• 1.28
  • TextIcon_Padding is now more logical
    • +1dip and the icon goes up
    • -1dip and the icon goes down
• 1.29
  • BaseResize is now Public
• 1.30
  • Add Event TabLongClick
• 1.31
  • Add AddTab2 - You fill manual the Tabs properties
  • Add GetTabProperties - Change the tab properties for with a index
• 1.33
  • text_font renamed to TextFont
  • BugFixes
• 1.34
  • Add Badge_setTopPadding
  • Add Badge_setTextColor
• 1.35
  • B4I BugFix

Have Fun

 

[Rubsanpe]

Sorry, i changed in B4A the Border Color=#000000, Border Width=1 and Corner Radious=10 and i can't see neither change on screen.

Rubén

 

[Alexander Stolte]

i see

 

[Alexander Stolte]

Update

• 1.21
  • BugFixes

 

[Rubsanpe]

i see

Ok thanks, I have seen the problem now. It does not apply the chosen color to the border of the control. It uses a very light gray and on a white background it is not visible. If I put a dark color below the control then the trimmed border shows correctly.

Designer control configuration

White background

Black background

Thanks

Rubén

 

[Alexander Stolte]

i see this, but after trying around a bit, i can't find a solution for it...

 

[Alexander Stolte]

The problem is that the corner radius is hidden by the tab panel because it is on top. What I could do is add a padding that keeps the tabs left, right top and bottom space free for the border.

 

[Rubsanpe]

Hi. No problem for me. I only want tell you it. I changed menú background color and it look great. Thank you.

Rubén

 

[Alexander Stolte]

Update

• 1.22
  • Adds BorderPadding - if you want a border, then set the BorderWidth here for the padding

1. Set the BorderWidth in the designer or per code
2. Set the BorderWidth to the BorderPadding
   1. ASTabMenu_horizontal.BorderPadding = 2dip

 

[Rubsanpe]

Thank you.

Rubén

 

[AlexMaa]

IF disable - ASTabMenu_horizontal.TabStripMode = false!
When you click on the second menu - the bar - is not displayed correctly!

 

[VittorioBarile]

is it possible to catch the LongClick interaction?

Or i need to workaround with:

[B4X] [XUI] xCustomListView - ItemLongClick missing

 

[AlexMaa]

I suspect there is a mistake somewhere here? although I may be wrong.

            If g_TabStripMode = False Then
        
                Dim tmp_top As Float = xlbl_text.Top + xlbl_text.Height
                If g_TabStyle = "Text" Or g_TabStyle = "TextIcon" Then 'only Text or text and icons
                    Dim textwidth As Int =  Max(1dip,MeasureTextWidth(xlbl_text.Text,xlbl_text.Font))
            
                    If g_CurrentTabUnderlineGravity <> getCurrentTabUnderlineGravity_BOTTOMRIGHT Then
                        If g_TabStyle = "TextIcon" Then
                            tmp_top = xpnl_targettab.Height/2 - icon_height/2
                        Else
                            tmp_top = xpnl_targettab.Height/2 - xlbl_text.Height/2
                        End If
                    End If
                    
--->                    xpnl_underline.SetLayoutAnimated(g_CurrentTabUnderlineAnimationDuration,xpnl_targettab.Left + xpnl_targettab.Width/2 - textwidth/2,tmp_top,textwidth,ul_height)
                Else If g_TabStyle = "Icon" Then 'only Icon
                    If g_CurrentTabUnderlineGravity = getCurrentTabUnderlineGravity_BOTTOMRIGHT Then
                        tmp_top = xpnl_tabbase.Height/2 + 15dip
                    Else
                        tmp_top = xpnl_tabbase.Height/2 - icon_height/2.5
                    End If
                    xpnl_underline.SetLayoutAnimated(g_CurrentTabUnderlineAnimationDuration,xpnl_targettab.Left + xpnl_targettab.Width/2 - underlinewidthbyonlyicon/2,tmp_top,underlinewidthbyonlyicon,ul_height)
                End If

 

[Lello1964]

[SOLVED] This lib doesn't work with B4A rel. #11 Beta.

 

[Alexander Stolte]

This lib doesn't work with B4A rel. #11 Beta.

what is not working????

 

[Lello1964]

I'm sorry, solved reloading lib and saving again in library folder.

 

[Daica]

I think I found a "bug" with the library.
If you do these steps, the menu's TabClick event will fire, even if you do not click it

1. Add Items to the menu (more than 1)
2. Click on any item that is not the first item
3. Remove all items from menu
4. Add items back
5. Click event will fire, even though user is not physically clicking on menu.

Maybe you could do a "ignore event" option?
AsTabMenu1.IgnoreClickEvent = True or something? not sure

 

[Alexander Stolte]

Right Premium Deluxe would be to pack the project from the gif still in the attachment, then I save at least time until I am on this stand ^^

 

[Daica]

Right Premium Deluxe would be to pack the project from the gif still in the attachment, then I save at least time until I am on this stand ^^

Attached, sorry I thought I had attached it.

In the project, I added my "fix" to it. You can remove the line "ASTabMenu1.IgnoreClickEvent = True" to see what I mean like the GIF.
I'm a noob so my "fix" is simple, but would prefer an actual fix from the creator

 

[Alexander Stolte]

Update

• 1.23
  • Add BeginUpdate - Call this if you remove or add tabs, no events or animations during this
  • Add EndUpdate - Call this if you finished adding or removing tabs
  • BugFixes

Example:

ASTabMenu1.BeginUpdate
ASTabMenu1.RemoveAllTabs
ASTabMenu1.AddTab(Colors.RGB(18, 21, 61),"Item 1",ASTabMenu1.FontToBitmap(Chr(0xE56A),True,40,xui.Color_White),"")
ASTabMenu1.AddTab(Colors.RGB(18, 21, 61),"Item 2",ASTabMenu1.FontToBitmap(Chr(0xE3B0),True,40,xui.Color_White),"")
ASTabMenu1.AddTab(Colors.RGB(18, 21, 61),"Item 3",ASTabMenu1.FontToBitmap(Chr(0xE5C9),True,40,xui.Color_White),"")
ASTabMenu1.EndUpdate

I'm a noob so my "fix" is simple, but would prefer an actual fix from the creator

I work full time with vb.net and use the devexpress framework, there it works with "BeginUpdate" and "EndUpdate" when you change things, so I added that too.

 

[Rams007]

How do you use this as a top menu?