[B4X] [XUI] AS Bottom Menu V2

Alexander Stolte

Expert
Licensed User
Longtime User
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,820
  • as_bottom_menu_b4j.zip
    311.2 KB · Views: 1,187
  • as_bottom_menu ios.zip
    13.5 KB · Views: 940
  • ASBottomMenu.b4xlib
    10.2 KB · Views: 439
Last edited:

RWK

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

Have Fun :)

YES, we have :) Great Stuff

one thing..... the redirecting of tabMouseClicking is missing:

B4X:
#...
Else B4J

Private Sub tab_1_MouseClicked (EventData As MouseEvent)
    
    tab_1_handler(True,250,150)
    
'i added

    If EventData.PrimaryButtonPressed = True Then
        If xui.SubExists(mCallBack, mEventName & "_Tab1LClick",0) Then
            CallSub(mCallBack, mEventName & "_Tab1LClick")
        End If
    Else if EventData.MiddleButtonPressed = True Then
        If xui.SubExists(mCallBack, mEventName & "_Tab1MClick",0) Then
            CallSub(mCallBack, mEventName & "_Tab1MClick")
        End If
    else if EventData.SecondaryButtonPressed = True Then
        If xui.SubExists(mCallBack, mEventName & "_Tab1RClick",0) Then
            CallSub(mCallBack, mEventName & "_Tab1RClick")
        End If       
    End If
End Sub

#End If

to catch the Click event in Main:

B4X:
Sub ASBottomMenu1_Tab1LClick
    ASBottomMenu1.BadgetValue1 = ASBottomMenu1.BadgetValue1 + 1
    Log("Tab1LClick")
End Sub

Sub ASBottomMenu1_Tab1MClick
    ASBottomMenu1.BadgetValue1 = 0
    Log("Tab1MClick")
End Sub

Sub ASBottomMenu1_Tab1RClick
    ASBottomMenu1.BadgetValue1 = ASBottomMenu1.BadgetValue1 - 1
    Log("Tab1RClick")
End Sub

or just add _TabClick as declared in Designer Properties


Grüße
Rainer
 

Brandsum

Well-Known Member
Licensed User
Hello Brandsum, great! Good luck and please post here if you have success, this will be awesome!

___ _
/ __\_ __ __ _ _ __ __| |___ _ _ _ __ ___
/__\// '__/ _` | '_ \ / _` / __| | | | '_ ` _ \
/ \/ \ | | (_| | | | | (_| \__ \ |_| | | | | | |
\_____/_| \__,_|_| |_|\__,_|___/\__,_|_| |_| |_|
Sure!! ;)
 

incendio

Well-Known Member
Licensed User
Longtime User
Nice !!

Why the icon not showed ?

Tested on Jelly Bean and Oreo with B4A 8.8
 

Attachments

  • screen.jpg
    screen.jpg
    108.1 KB · Views: 643

Alberto Iglesias

Well-Known Member
Licensed User
Longtime User
the new version (2.1) is not working for me.... I need to implemente tabxClick on this class?

and about the animation of slider?

B4X:
    currentpage = 1
       
    Dim cx As Int = asbm_page_1.Left + asbm_page_1.Width/2
   
    asbm_slider.SetLayoutAnimated(500,cx - asbm_slider.Width/2 ,asbm_slider.Top,asbm_slider.Width,asbm_slider.Height)
    asbm_slider.SetColorAnimated(0,asbm_slider.Color,s_Color1)
 

Alexander Stolte

Expert
Licensed User
Longtime User

Alexander Stolte

Expert
Licensed User
Longtime User

RWK

Member
Licensed User
Hallo Alex,

the redirection of the Click Events for the Events Tab1Click to Tab5Click are still missing.

For the MiddleButton Clicks you are doing it in the asbuttonmenu.bas
B4X:
Private Sub middle_button_click_handler
    
    If xui.SubExists(mCallBack, mEventName & "_MiddleButtonClick",0) Then
        CallSub(mCallBack, mEventName & "_MiddleButtonClick")
    End If
    
End Sub

But in the Tab Click Handler they are missing

B4X:
Private Sub tab_1_MouseClicked (EventData As MouseEvent)
    
    
    tab_1_handler(True,250,150)
        
End Sub

B4X:
'this is missing for Event Tab1Click to Tab5Click in Tab_x_Mouseclicked or in the tab_x_handler

    If xui.SubExists(mCallBack, mEventName & "_Tab1Click",0) Then
        CallSub(mCallBack, mEventName & "_Tab1Click")
    End If

Grüße
Rainer
 
Top