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:

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
 

itgirl

Active Member
Licensed User
Amazing class thanks, i just found a little bug if you enable EnableMiddleButtonAsTab and you click on already active tab the underline get little messy the solution i found is in underline_slide_animation_withtext_2

B4X:
        If enable_middlebutton_astab = True Then
            Dim tmp As Double = xpnl_underline.Left - totab.Left  - 40dip/4
        Else
            Dim tmp As Double = xpnl_underline.Left - totab.Left  - 40dip/2
        End If
amazing work with calculations by the way ;)
 

oparra

Well-Known Member
Licensed User
if you want to see the halo effect on the middle button

B4X:
Private Sub Middle_Button_Click_Handler
    If xui.SubExists(mCallBack, mEventName & "_MiddleButtonClick",0) Then
        CallSub(mCallBack, mEventName & "_MiddleButtonClick")
    End If
    RippleEffect(PanelMiddlebutton, Ripple_Effect_Color, 250)
End Sub

B4X:
'https://www.b4x.com/android/forum/threads/b4x-xui-simple-halo-animation.80267/#content
Private Sub RippleEffect (Parent As B4XView, Color As Int, Duration As Int)
    Dim cvs As B4XCanvas
    Dim p As B4XView = xui.CreatePanel("")
    Dim InnerRadius As Int = Parent.Height * 1.30
    If Parent.Width <> Parent.Height Then InnerRadius = Max(Parent.Width, Parent.Height) * 1.60
    p.SetLayoutAnimated(0, 0, 0, InnerRadius, InnerRadius)
    cvs.Initialize(p)
    cvs.DrawCircle(cvs.TargetRect.CenterX, cvs.TargetRect.CenterY, cvs.TargetRect.Width / 2, Color, True, 0)
    Dim bmp As B4XBitmap = cvs.CreateBitmap
    p.RemoveViewFromParent
    Dim iv As ImageView
    iv.Initialize("")
    Dim p As B4XView = iv
    Dim Radius As Int = InnerRadius/2
    Dim x As Int = Parent.Width/2
    Dim y As Int = Parent.Height/2
    p.SetBitmap(bmp)
    Parent.AddView(p, x, y, 0, 0)
    p.SetLayoutAnimated(Duration, x - Radius, y - Radius, Radius * 2, Radius * 2)
    p.SetVisibleAnimated(Duration, False)
    Sleep(Duration)
    p.RemoveViewFromParent
End Sub
 

AllanH

Member
Licensed User
Great bottom tab

However, changing the current tab in code does not change the current tab visually.
I've amended the code below to call the relevant click but this is a bit untidy and could probably be better written.


B4X:
Public Sub setCurrentTab(tabnumber As Int)
  
    If tabnumber = 1 Or tabnumber = 2 Or tabnumber = 3 Or tabnumber = 4 Or tabnumber = 5 Then
      
        If current_tab <> tabnumber Then
          current_tab = tabnumber
      
      'extra code below:
      Select tabnumber
          Case 1
                tab_1_Click   
          Case 2
                tab_2_Click
            Case 3
                tab_3_Click
            Case 4
              tab_4_Click     
            Case 5
                tab_5_Click
        End Select
        End If
      
        Else
          
            Log("Tab Number not in range")
      
    End If
  
End Sub
 

Alexander Stolte

Expert
Licensed User
I tried to use setMiddleButtonSize but have no effect
I see it, the issue is in the Base_Resize Sub, i fix it.
I add a private global variable for the middle button size, this should fix the issue.

Can you try it now? i cant test it with B4I, because my Apple Dev. account has expired for 2 months.

V2.5
  • Fix setMiddleButtonSize is not working
 

Kope

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

please any help?
 

Gabino A. de la Gala

Active Member
Licensed User
I had problems with the SetCurrentTab and finally I solved it by modifying one of the procedures.

Here I leave it.

B4X:
Public Sub setCurrentTab(tabnumber As Int)
        Select Case tabnumber
            Case 1
                tab_1_handler(True,250,150)
                current_tab = tabnumber
            Case 2
                tab_2_handler(True,250,150)
                current_tab = tabnumber
            Case 3
                tab_3_handler(True,250,150)
                current_tab = tabnumber
            Case 4
                tab_4_handler(True,250,150)
                current_tab = tabnumber
            Case 5
                tab_5_handler(True,250,150)
                current_tab = tabnumber
            Case Else
                Log("Tab Number not in range")
        End Select
End Sub

I suppose that in later versions I can solve it in a more appropriate way.

A greeting.
 

Guenter Becker

Active Member
Licensed User
Hallo,
zuerst mal: gute Arbeit, Danke.
Dann ein paar Fragen mit der Bitte um Antwort:
- wie kann die Value Anzeige ausgeblendet werden?
- wie kann die Textanzeige aus/eingeblendet werden?
- Was nützt mir die Aufzählung zahlreicher Funktionen, wenn ich sie nicht aurufen kann?

Danke für die Arbeit, würde das View schon gerne verwenden aber die Beschreibung ist schon dürftig.
Viele Grüße Günter

P.S.
If it is neccessary to give my comment/questiones in English pleas inform me.
 

Alexander Stolte

Expert
Licensed User
wie kann die Value Anzeige ausgeblendet werden?
- wie kann die Textanzeige aus/eingeblendet werden?
ist das beides nicht das gleiche?
is not that the same?

Was nützt mir die Aufzählung zahlreicher Funktionen, wenn ich sie nicht aurufen kann?
Was soll das für eine Frage sein?
What's that for a question?
 

JMB

Active Member
Licensed User
Hi there.

I've just downloaded this and I get the following errors:

B4X:
Unknown member: underlineanimation
Unknown member: textvisible
Unknown member: textonly
Cannot access private member: middlebuttonvisible
Unknown member: middlebuttonastab
Unknown member: middlebuttonicon

Any clues as to why this may be?

Thanks,

JMB
 

JMB

Active Member
Licensed User
Hi Alexander, any clues as to what the problem may be?

Thanks.

JMB
 

JMB

Active Member
Licensed User
My apologies, Alexander. My mistake.

I thought the ASBottomMenu.bas file was part of the example. I downloaded that file and linked to it and now there are no problems.

Thanks for your patience.

JMB
 
Top