B4A Class [B4X] [XUI] AS Bottom Menu V2

A better menu, can you find here
1654032628385.png

First, 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. :)

This is the V2 of the ASBottomMenu, with more Features, less code than the V1, B4X optimized and more...

Why a new thread for this? Because i have develope the class from the ground new, the event names etc. have been changed. The V2 is not compatible with the V1.

Thanks @Brandsum for his help with the Wave function on this menu.

Features
  • cross-platform compatible
  • reponsive design
  • 2 Underline Animations
  • easy to use
  • you can use 2,3,4 or 5 tabs
  • middle button can be visible or hide
  • badgets
  • only Text, only icons or text with icons
  • and mutch more...
IOS Version with "Wave" enabled
IMG_0065 (1).jpg

Android Version
asbottom android 3.gif

New Slide Animation
asbottom android 4.gif

asbottom android 5.gif

bottom android.gif

B4J - design adapts automatically (in B4A and B4I too)
asbottom b4j.PNG

B4J - with 2 Badgets and only icons
asbottom b4j 2.PNG


ASBottomMenu
Author: Alexander Stolte
Version: 2.3

  • ASBottomMenu
    • Events:
      • MiddleButtonClick
      • MiddleButtonLongClick
      • Tab1Click
      • Tab2Click
      • Tab3Click
      • Tab4Click
      • Tab5Click
      • TabChange (CurrentTab as int)
    • Functions:
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • getBadgetColor1 As Int
      • getBadgetColor2 As Int
      • getBadgetColor3 As Int
      • getBadgetColor4 As Int
      • getBadgetColor5 As Int
      • getBadgetValue1 As Int
      • getBadgetValue2 As Int
      • getBadgetValue3 As Int
      • getBadgetValue4 As Int
      • getBadgetValue5 As Int
      • getCurrentTab As Int
      • getEnableBadget1 As Boolean
      • getEnableBadget2 As Boolean
      • getEnableBadget3 As Boolean
      • getEnableBadget4 As Boolean
      • getEnableBadget5 As Boolean
      • getIcon1 As B4XBitmap
      • getIcon2 As B4XBitmap
      • getIcon3 As B4XBitmap
      • getIcon4 As B4XBitmap
      • getIcon5 As B4XBitmap
      • getMiddleButtonAsTab As Boolean
      • getMiddleButtonIcon As B4XBitmap
      • getMiddleButtonSize As Double
      • getMiddleButtonVisible As Boolean
      • getPageClickColor As Int
      • getPartinglineColor As Int
      • getPartinglineVisible As Boolean
      • getSelectedPageIconColor As Int
      • getTabBackgroundColor As Int
      • getText1 As String
      • getText2 As String
      • getText3 As String
      • getText4 As String
      • getText5 As String
      • getTextOnly As Boolean
      • getTextVisible As Boolean
      • getUnderlineAnimation As String
      • getUnderlineColor As Int
      • getUnderlineVisible As Boolean
      • getWaveOnMiddleButton As Boolean
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • setBadgetColor1 (color As Int) As String
      • setBadgetColor2 (color As Int) As String
      • setBadgetColor3 (color As Int) As String
      • setBadgetColor4 (color As Int) As String
      • setBadgetColor5 (color As Int) As String
      • setBadgetValue1 (value As Int) As String
      • setBadgetValue2 (value As Int) As String
      • setBadgetValue3 (value As Int) As String
      • setBadgetValue4 (value As Int) As String
      • setBadgetValue5 (value As Int) As String
      • SetBitmapWithFitOrFill (vTargetView As B4XView, bmp As B4XBitmap) As String
      • setCurrentTab (tabnumber As Int) As String
      • setEnableBadget1 (Enable As Boolean) As String
      • setEnableBadget2 (Enable As Boolean) As String
      • setEnableBadget3 (Enable As Boolean) As String
      • setEnableBadget4 (Enable As Boolean) As String
      • setEnableBadget5 (Enable As Boolean) As String
      • setIcon1 (icon As B4XBitmap) As String
      • setIcon2 (icon As B4XBitmap) As String
      • setIcon3 (icon As B4XBitmap) As String
      • setIcon4 (icon As B4XBitmap) As String
      • setIcon5 (icon As B4XBitmap) As String
      • setMiddleButtonAsTab (enable As Boolean) As String
      • setMiddleButtonIcon (icon As B4XBitmap) As String
      • setMiddleButtonSize (size As Double, BorderWidth As Double) As String
        Standard Value is 80% of the view height ((80* view.height)/100
        and BorderWidth = 2dip
      • setMiddleButtonVisible (visible As Boolean) As String
      • setPageClickColor (color As Int) As String
      • setPartinglineColor (color As Int) As String
      • setPartinglineVisible (visible As Boolean) As String
      • setSelectedPageIconColor (color As Int) As String
      • setTabBackgroundColor (color As Int) As String
      • setText1 (text As String) As String
      • setText2 (text As String) As String
      • setText3 (text As String) As String
      • setText4 (text As String) As String
      • setText5 (text As String) As String
      • setTextOnly (only As Boolean) As String
      • setTextVisible (visible As Boolean) As String
      • setUnderlineAnimation (animation As String) As String
      • setUnderlineColor (color As Int) As String
      • setUnderlineVisible (visible As Boolean) As String
      • setWaveOnMiddleButton (enable As Boolean)
        not working
    • Properties:
      • BadgetColor1 As Int
      • BadgetColor2 As Int
      • BadgetColor3 As Int
      • BadgetColor4 As Int
      • BadgetColor5 As Int
      • BadgetValue1 As Int
      • BadgetValue2 As Int
      • BadgetValue3 As Int
      • BadgetValue4 As Int
      • BadgetValue5 As Int
      • CurrentTab As Int
      • EnableBadget1 As Boolean
      • EnableBadget2 As Boolean
      • EnableBadget3 As Boolean
      • EnableBadget4 As Boolean
      • EnableBadget5 As Boolean
      • Icon1 As B4XBitmap
      • Icon2 As B4XBitmap
      • Icon3 As B4XBitmap
      • Icon4 As B4XBitmap
      • Icon5 As B4XBitmap
      • MiddleButtonAsTab As Boolean
      • MiddleButtonIcon As B4XBitmap
      • MiddleButtonVisible As Boolean
      • PageClickColor As Int
      • PartinglineColor As Int
      • PartinglineVisible As Boolean
      • SelectedPageIconColor As Int
      • TabBackgroundColor As Int
      • Text1 As String
      • Text2 As String
      • Text3 As String
      • Text4 As String
      • Text5 As String
      • TextOnly As Boolean
      • TextVisible As Boolean
      • UnderlineAnimation As String
      • UnderlineColor As Int
      • UnderlineVisible As Boolean
      • WaveOnMiddleButton As Boolean
In the attachment are 3 examples. (B4A,B4I and B4J)
If you have bugs or new features, then write a comment ;)

If you like my work, then spend me a coffe or two :)

Change log:

  • V2
    • New Release
  • V2.1
    • Icon BugFix for B4J and B4A
  • V2.2
    • Add TabChange Event
    • Set Badget BorderWidth to 0dip
  • V2.3
    • Fix TabClick Event
  • V2.4
    • Fix TabClick-Bug click event was execute 8 times on start
  • V2.5
    • Fix setMiddleButtonSize is not working
  • V2.6
    • Removes a warning of a "Unused variable"
    • Removes Logs in Release mode
    • Add "getBase" to get the base view, to get for example the view height
  • V2.7
    • Add getBadgeLabel1-5
  • V2.8
    • Text labels are now public
  • V2.9
    • Add get and set MiddleButtonBackgroundColor - Changes the middle button color
  • V2.10
    • Add designer property UnselectedPageColor
    • Add DisableTab
    • Add EnableTab
    • Add Designer Property DisabledPageColor
Have Fun :)
 

Attachments

  • as_bottom_menu android.zip
    16.8 KB · Views: 1,562
  • as_bottom_menu_b4j.zip
    311.2 KB · Views: 947
  • as_bottom_menu ios.zip
    13.5 KB · Views: 723
  • ASBottomMenu.b4xlib
    10.2 KB · Views: 183
Last edited:

sigster

Active Member
Licensed User
Longtime User
Hi

how can I set button 2 ASBottomMenu1.SetIcon2 default when I open the app
 

sigster

Active Member
Licensed User
Longtime User
Button 1 is default selected when I open the app but I want button 2 to be selected

see screenshot


app.png
 

Alexander Stolte

Expert
Licensed User
set the "setCurrentTab" to 1.
But if you use this view without the middle button, i recommend this view:
 

sigster

Active Member
Licensed User
Longtime User
do you mean setCurrentTab 2 ?

I did try to use ASBottomMenu1.setCurrentTab(1) or 2

nothing change


B4X:
    ASBottomMenu1.SetIcon1(LoadBitmap(File.DirAssets,"home2.png"))
    ASBottomMenu1.SetIcon2(LoadBitmap(File.DirAssets,"chat.png"))
    ASBottomMenu1.MiddleButtonIcon = xui.LoadBitmap(File.DirAssets,"home2.png")
    ASBottomMenu1.UnderlineAnimation = "Normal"
    ASBottomMenu1.setMiddleButtonSize(65dip,2dip)
    ASBottomMenu1.MiddleButtonVisible = False
 
    ASBottomMenu1.setCurrentTab(1)


this is the button I want to be default when the app load, I manual select the button before take screenshot
app2.png
 
Last edited:

syerif

Member
Licensed User
Longtime User
A better menu, can you find here
View attachment 89133

First, 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. :)

This is the V2 of the ASBottomMenu, with more Features, less code than the V1, B4X optimized and more...

Why a new thread for this? Because i have develope the class from the ground new, the event names etc. have been changed. The V2 is not compatible with the V1.

Thanks @Brandsum for his help with the Wave function on this menu.

Features
  • cross-platform compatible
  • reponsive design
  • 2 Underline Animations
  • easy to use
  • you can use 2,3,4 or 5 tabs
  • middle button can be visible or hide
  • badgets
  • only Text, only icons or text with icons
  • and mutch more...
IOS Version with "Wave" enabled
View attachment 77557
Android Version
View attachment 77582
New Slide Animation
View attachment 77583
View attachment 77584
View attachment 77547
B4J - design adapts automatically (in B4A and B4I too)
View attachment 77548
B4J - with 2 Badgets and only icons
View attachment 77549

ASBottomMenu
Author: Alexander Stolte
Version: 2.3

  • ASBottomMenu
    • Events:
      • MiddleButtonClick
      • MiddleButtonLongClick
      • Tab1Click
      • Tab2Click
      • Tab3Click
      • Tab4Click
      • Tab5Click
      • TabChange (CurrentTab as int)
    • Functions:
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • getBadgetColor1 As Int
      • getBadgetColor2 As Int
      • getBadgetColor3 As Int
      • getBadgetColor4 As Int
      • getBadgetColor5 As Int
      • getBadgetValue1 As Int
      • getBadgetValue2 As Int
      • getBadgetValue3 As Int
      • getBadgetValue4 As Int
      • getBadgetValue5 As Int
      • getCurrentTab As Int
      • getEnableBadget1 As Boolean
      • getEnableBadget2 As Boolean
      • getEnableBadget3 As Boolean
      • getEnableBadget4 As Boolean
      • getEnableBadget5 As Boolean
      • getIcon1 As B4XBitmap
      • getIcon2 As B4XBitmap
      • getIcon3 As B4XBitmap
      • getIcon4 As B4XBitmap
      • getIcon5 As B4XBitmap
      • getMiddleButtonAsTab As Boolean
      • getMiddleButtonIcon As B4XBitmap
      • getMiddleButtonSize As Double
      • getMiddleButtonVisible As Boolean
      • getPageClickColor As Int
      • getPartinglineColor As Int
      • getPartinglineVisible As Boolean
      • getSelectedPageIconColor As Int
      • getTabBackgroundColor As Int
      • getText1 As String
      • getText2 As String
      • getText3 As String
      • getText4 As String
      • getText5 As String
      • getTextOnly As Boolean
      • getTextVisible As Boolean
      • getUnderlineAnimation As String
      • getUnderlineColor As Int
      • getUnderlineVisible As Boolean
      • getWaveOnMiddleButton As Boolean
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • setBadgetColor1 (color As Int) As String
      • setBadgetColor2 (color As Int) As String
      • setBadgetColor3 (color As Int) As String
      • setBadgetColor4 (color As Int) As String
      • setBadgetColor5 (color As Int) As String
      • setBadgetValue1 (value As Int) As String
      • setBadgetValue2 (value As Int) As String
      • setBadgetValue3 (value As Int) As String
      • setBadgetValue4 (value As Int) As String
      • setBadgetValue5 (value As Int) As String
      • SetBitmapWithFitOrFill (vTargetView As B4XView, bmp As B4XBitmap) As String
      • setCurrentTab (tabnumber As Int) As String
      • setEnableBadget1 (Enable As Boolean) As String
      • setEnableBadget2 (Enable As Boolean) As String
      • setEnableBadget3 (Enable As Boolean) As String
      • setEnableBadget4 (Enable As Boolean) As String
      • setEnableBadget5 (Enable As Boolean) As String
      • setIcon1 (icon As B4XBitmap) As String
      • setIcon2 (icon As B4XBitmap) As String
      • setIcon3 (icon As B4XBitmap) As String
      • setIcon4 (icon As B4XBitmap) As String
      • setIcon5 (icon As B4XBitmap) As String
      • setMiddleButtonAsTab (enable As Boolean) As String
      • setMiddleButtonIcon (icon As B4XBitmap) As String
      • setMiddleButtonSize (size As Double, BorderWidth As Double) As String
        Standard Value is 80% of the view height ((80* view.height)/100
        and BorderWidth = 2dip
      • setMiddleButtonVisible (visible As Boolean) As String
      • setPageClickColor (color As Int) As String
      • setPartinglineColor (color As Int) As String
      • setPartinglineVisible (visible As Boolean) As String
      • setSelectedPageIconColor (color As Int) As String
      • setTabBackgroundColor (color As Int) As String
      • setText1 (text As String) As String
      • setText2 (text As String) As String
      • setText3 (text As String) As String
      • setText4 (text As String) As String
      • setText5 (text As String) As String
      • setTextOnly (only As Boolean) As String
      • setTextVisible (visible As Boolean) As String
      • setUnderlineAnimation (animation As String) As String
      • setUnderlineColor (color As Int) As String
      • setUnderlineVisible (visible As Boolean) As String
      • setWaveOnMiddleButton (enable As Boolean)
        not working
    • Properties:
      • BadgetColor1 As Int
      • BadgetColor2 As Int
      • BadgetColor3 As Int
      • BadgetColor4 As Int
      • BadgetColor5 As Int
      • BadgetValue1 As Int
      • BadgetValue2 As Int
      • BadgetValue3 As Int
      • BadgetValue4 As Int
      • BadgetValue5 As Int
      • CurrentTab As Int
      • EnableBadget1 As Boolean
      • EnableBadget2 As Boolean
      • EnableBadget3 As Boolean
      • EnableBadget4 As Boolean
      • EnableBadget5 As Boolean
      • Icon1 As B4XBitmap
      • Icon2 As B4XBitmap
      • Icon3 As B4XBitmap
      • Icon4 As B4XBitmap
      • Icon5 As B4XBitmap
      • MiddleButtonAsTab As Boolean
      • MiddleButtonIcon As B4XBitmap
      • MiddleButtonVisible As Boolean
      • PageClickColor As Int
      • PartinglineColor As Int
      • PartinglineVisible As Boolean
      • SelectedPageIconColor As Int
      • TabBackgroundColor As Int
      • Text1 As String
      • Text2 As String
      • Text3 As String
      • Text4 As String
      • Text5 As String
      • TextOnly As Boolean
      • TextVisible As Boolean
      • UnderlineAnimation As String
      • UnderlineColor As Int
      • UnderlineVisible As Boolean
      • WaveOnMiddleButton As Boolean
In the attachment are 3 examples. (B4A,B4I and B4J)
If you have bugs or new features, then write a comment ;)

If you like my work, then spend me a coffe or two :)

Change log:

  • V2
    • New Release
  • V2.1
    • Icon BugFix for B4J and B4A
  • V2.2
    • Add TabChange Event
    • Set Badget BorderWidth to 0dip
  • V2.3
    • Fix TabClick Event
  • V2.4
    • Fix TabClick-Bug click event was execute 8 times on start
  • V2.5
    • Fix setMiddleButtonSize is not working
  • V2.6
    • Removes a warning of a "Unused variable"
    • Removes Logs in Release mode
    • Add "getBase" to get the base view, to get for example the view height
Have Fun :)
how to set unselected icon color?
 

james_sgp

Active Member
Licensed User
Longtime User
How to change the font size for the badges...its too large (see attached)

Capture.PNG
 

CryoGenID

Active Member
Licensed User
Longtime User
Hello Alexander,

again here is a great library from you... Really impressive :)
One question though:
How can I set the background color of the middle button via code? I can see the color in the designer but I don't know how to set it from code?
And how can I set the default color of the text in the default tab in the menu via code?
Per default it is green, I can set it via
B4X:
ASBottomMenu__main.SelectedPageIconColor= xui.Color_Cyan
but that only applies when I click it once...
Per default it looks like this:
1651072595609.png

When I clicked on it once, then it uses the color from "SelectedPageIconColor":
1651072635713.png

But I would like it to be in that color from the beginning...

Thanks :)

Best regards,

Chris
 
Last edited:

Alexander Stolte

Expert
Licensed User
Update
  • V2.9
    • Add get and set MiddleButtonBackgroundColor - Changes the middle button color
And how can I set the default color of the text in the default tab in the menu via code?
with SelectedPageIconColor is text and icon color are the same, there is no way to have a other text color than the icon color.
B4X:
SelectedPageIconColor
But I would like it to be in that color from the beginning...
There are only 2 colors, the unselected color and the selected color, if you don't want the selected color, you can disable it in the designer with EnableSelectedPageColor = False

Since it is a very old library, with some questionable decisions by me back then, I can only give limited support. Small things I can change, but deep things I don't want to change anymore.
 

CryoGenID

Active Member
Licensed User
Longtime User
Hello Alexander,

thanks so much for your quick reaction!
I find this library (optically) really beautiful!
The other library with a bottom menu looks (from the examples) not so beautiful...

Would a re-write of this library be possible or can I do everything from this lib with the other as well?

But regarding my question and your answer:
When I set "EnableSelectedPageColor" to OFF, then the green is gone, but the of course the selectedColor as well ;-)
No chance to set the "UnselectedPageColor" via Code somewhere or did I just miss it?

And one other question:
Can I also "disable" a menu item or would I need to do this manually by changing the font color and simply ignoring any clicks on it?

Again thanks so much :)

Best regards,

Chris
 

Alexander Stolte

Expert
Licensed User
Would a re-write of this library be possible or can I do everything from this lib with the other as well?
No and no.
The other lib. is without middle button. But you can also just put a button in the middle or on the far right.

Update
  • V2.10
    • Add designer property UnselectedPageColor
    • Add DisableTab
    • Add EnableTab
    • Add Designer Property DisabledPageColor
No chance to set the "UnselectedPageColor" via Code somewhere or did I just miss it?
UnselectedPageColor

Can I also "disable" a menu item or would I need to do this manually by changing the font color and simply ignoring any clicks on it?
DisableTab(1)
 

CryoGenID

Active Member
Licensed User
Longtime User
One other question:
What would I need to do so that the menu starts with no pre-selection?
All tabs are deactivated in the beginning via "DisableTab", but the first tab still shows up in Green with the white line beneath it:
1651154104487.png

Tab 2 is correctly deactivated...

Thanks :)

Best regards,

Chris
 

Alexander Stolte

Expert
Licensed User
What would I need to do so that the menu starts with no pre-selection?
All tabs are deactivated in the beginning via "DisableTab", but the first tab still shows up in Green with the white line beneath it:
does not work. (and also not easy to change, because this behavior is deep inside) makes absolutely no sense to me why you should do something like that, either you are on the 1st page or you are not on the 1st page, but then you also do not see the menu, because you are on another page.
 

CryoGenID

Active Member
Licensed User
Longtime User
Well in my case the main view controls the menu... So you do s.th. on the main view and based on the result of that, the tabs get activated (or not)... So the default startup state would be inactive for all tabs...

Hm... then I will have to think of some workaround ;-)

But again thanks for that lib, it is really great!
Besides the big button, I could do everything else with the newer lib as well if I understood you correctly (also designwise)?

Best regards,

Chris
 
Top