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

A better menu, can you find here
Screenshot_20200226-093218.jpg


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
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
Have Fun :)
 

Attachments

  • as_bottom_menu android.zip
    16.8 KB · Views: 1,149
  • as_bottom_menu_b4j.zip
    311.2 KB · Views: 566
  • as_bottom_menu ios.zip
    13.5 KB · Views: 422
  • ASBottomMenu.b4xlib
    9.8 KB · Views: 170
Last edited:

jcesar

Active Member
Licensed User
How can i get the menu height ?

I need put a panel high above the Botton menu.
Screenshot_20191008-171012.png
 

wizard699

Active Member
Licensed User
Ok I've isolated the problem.
In ASMenuBottom.bas the problem is from 772 line to 785 line

B4X:
xicon_1.SetLayoutAnimated(speed250,xpnl_tab_1.Width/2 - (25dip/1.25)/2,xpnl_tab_1.Height/2 - ((25dip/1.25) + 10dip)/2,25dip/1.25,25dip/1.25)
        xlbl_text_1.SetLayoutAnimated(speed250,0,(xpnl_tab_1.Height/2 - ((25dip/1.25) + 10dip)/2) + xicon_1.Height ,xpnl_tab_1.Width,14dip)
  
        xicon_2.SetLayoutAnimated(speed250,xpnl_tab_2.Width/2 - (25dip/1.25)/2,xpnl_tab_2.Height/2 - ((25dip/1.25) + 10dip)/2,25dip/1.25,25dip/1.25)
        xlbl_text_2.SetLayoutAnimated(speed250,0,(xpnl_tab_2.Height/2 - ((25dip/1.25) + 10dip)/2) + xicon_2.Height ,xpnl_tab_2.Width,14dip)
          
        xicon_3.SetLayoutAnimated(speed250,xpnl_tab_3.Width/2 - (25dip/1.25)/2,xpnl_tab_3.Height/2 - ((25dip/1.25) + 10dip)/2,25dip/1.25,25dip/1.25)
        xlbl_text_3.SetLayoutAnimated(speed250,0,(xpnl_tab_3.Height/2 - ((25dip/1.25) + 10dip)/2) + xicon_3.Height ,xpnl_tab_3.Width,14dip)
          
        xicon_4.SetLayoutAnimated(speed250,xpnl_tab_4.Width/2 - (25dip/1.25)/2,xpnl_tab_4.Height/2 - ((25dip/1.25) + 10dip)/2,25dip/1.25,25dip/1.25)
        xlbl_text_4.SetLayoutAnimated(speed250,0,(xpnl_tab_4.Height/2 - ((25dip/1.25) + 10dip)/2) + xicon_3.Height ,xpnl_tab_4.Width,14dip)
          
        xicon_5.SetLayoutAnimated(speed250,xpnl_tab_5.Width/2 - (25dip/1.25)/2,xpnl_tab_5.Height/2 - ((25dip/1.25) + 10dip)/2,25dip/1.25,25dip/1.25)
        xlbl_text_5.SetLayoutAnimated(speed250,0,(xpnl_tab_5.Height/2 - ((25dip/1.25) + 10dip)/2) + xicon_5.Height ,xpnl_tab_5.Width,14dip)

Investigating......

Ok the problem is only into xlbl_text_5 ..... searching solution...
 
Last edited:

wizard699

Active Member
Licensed User
FOUND IT!!!! The problem is in line 782 !!! There is xicon_3.Height instead of xicon_4.Height

This is the correct code to resolve problem in ASBottomMenu.bas ... only correct line 782. Subistute with this

B4X:
xlbl_text_4.SetLayoutAnimated(speed250,0,(xpnl_tab_4.Height/2 - ((25dip/1.25) + 10dip)/2) + xicon_4.Height ,xpnl_tab_4.Width,14dip)

This correction resolve problem when MIDDLE BUTTON is used as a TAB.
Nov we have to resolve the same problem when MIDDLE BUTTON is NOT USED ad a Tab.
But we are very close to the solution
 
Last edited:

wizard699

Active Member
Licensed User
Alexander, there are problems with MIDDLE BUTTON AS TAB unchecked into designer object properties. I'm searching the correct solution and then I send to you the correction. Ok?
 

Kevin Hartin

Active Member
Licensed User
I am having trouble with the display of the BottomMenu on my Samsung Galaxy 8+

As per the attached screenshots, I have tried Text only, Icon Only and Text&Icon and in each case get the same results. I have applied a 1px Red border to illustrate the problem.

All menus seem to be pushed down by about 40%. I tried to lift the view from the bottom of the page, but that only moves the red box, while the menu stays where it is.

Also, is there a way to remove the white line above the menu?

Thanks,
Kev
Screenshot_20191230-123237.jpg
Screenshot_20191230-123722.jpg
Screenshot_20191230-123852.jpg
 

Kevin Hartin

Active Member
Licensed User
Why you set the view high so small?

bottommenu.PartinglineVisible = false

I have tried all manner of heights for the view, but there is always clipping at the bottom. The following is 100px. As you can see the border in yellow is at 100px, but the menu items are not more than about 60px high, yet are still clipping at the bottom.
The white line I was referring to is the horizontal one above the menu items, not the vertical dividing lines

Screenshot_20191230-171625.jpg

the following screenshot is from another phone and shows even more clipping at the bottom, but still with the same wasted space above the menu items
image.png

for reference, the following are from the demo app, which still suffer some minor clipping at the bottom, but look presentable
Screenshot_20191230-134253.png
Screenshot_20191230-134309.png
 

IDDGroup

Member
Licensed User
is there a way to "Hide" a tab? (disable it)

One of my tabs goes to our website for purchasing items.

the problem is the amazon store does not allow this so i just need to hide it for that market.
 

janderkan

Active Member
Licensed User
In this thread from Feb 20,2019 you present AS Bottommenu V2 with latest update to V2.6
But in the top you have a link to a better menu from Feb 20,2020, AS Bottommenu V1 with latest update to V1.8
1587121021138.png

Why do you think V1 is better than V2 ?
Why use V2 instead of the better V1 ?
 

janderkan

Active Member
Licensed User
hi Please the TabChange (CurrentTab as int) event is not responding in b4i

please any help?
You have to change the NumberOfArguments to 1 in the bas file v2.6
B4X:
Private Sub tabchange_handler(currenttab As Int)
    If xui.SubExists(mCallBack, mEventName & "_TabChange",1) Then
        CallSub2(mCallBack, mEventName & "_TabChange",currenttab)
    End If
End Sub
 
Top