[B4X] [XUI] AS Bottom Menu V2

Alexander Stolte · Feb 20, 2019

A better menu, can you find here

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

Android Version

New Slide Animation

B4J - design adapts automatically (in B4A and B4I too)

B4J - with 2 Badgets and only icons

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

mcqueccu · Feb 20, 2019

Can you implement reverse wave and animation like this example here https://cdn.dribbble.com/users/824356/videos/14191/mockup_3.mp4

Alexander Stolte · Feb 20, 2019

mcqueccu said:
Can you implement reverse wave and animation like this example here https://cdn.dribbble.com/users/824356/videos/14191/mockup_3.mp4

this is too high for me and my "skills"

ciprian · Feb 20, 2019

Brilliant.

RWK · Feb 20, 2019

Alexander Stolte said:
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 · Feb 21, 2019

mcqueccu said:
Can you implement reverse wave and animation like this example here https://cdn.dribbble.com/users/824356/videos/14191/mockup_3.mp4

That's a nice illustration. I will give a try. Will inform if I succeed.

Alberto Iglesias · Feb 21, 2019

Hello Brandsum, great! Good luck and please post here if you have success, this will be awesome!

___ _
/ __\_ __ __ _ _ __ __| |___ _ _ _ __ ___
/__\// '__/ _` | '_ \ / _` / __| | | | '_ ` _ \
/ \/ \ | | (_| | | | | (_| \__ \ |_| | | | | | |
\_____/_| \__,_|_| |_|\__,_|___/\__,_|_| |_| |_|

Brandsum · Feb 21, 2019

Alberto Iglesias said:
Hello Brandsum, great! Good luck and please post here if you have success, this will be awesome!

___ _
/ __\_ __ __ _ _ __ __| |___ _ _ _ __ ___
/__\// '__/ _` | '_ \ / _` / __| | | | '_ ` _ \
/ \/ \ | | (_| | | | | (_| \__ \ |_| | | | | | |
\_____/_| \__,_|_| |_|\__,_|___/\__,_|_| |_| |_|

Sure!!

Alexander Stolte · Feb 21, 2019

mcqueccu said:
Can you implement reverse wave and animation like this example here https://cdn.dribbble.com/users/824356/videos/14191/mockup_3.mp4

here for IOS.

here for Android.

Brandsum · Feb 22, 2019

Alexander Stolte said:
here for IOS.

here for Android.

Cool!

But there are some limitations. As I've already started yesterday, I'll post my work when it's done.

incendio · Feb 22, 2019

Nice !!

Why the icon not showed ?

Tested on Jelly Bean and Oreo with B4A 8.8

Alexander Stolte · Feb 22, 2019

incendio said:
Why the icon not showed ?

hmm, it works for me, you are using the example without any changes?

EDIT: oh no, i see the misstake... maybe i have upload the wrong menu version... i check that

Alexander Stolte · Feb 22, 2019

Fixed
- V2.1

Icon BugFix for B4J and B4A

incendio · Feb 22, 2019

Worked fine now, thanks

Alberto Iglesias · Feb 22, 2019

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 · Feb 22, 2019

Alberto Iglesias said:
the new version (2.1) is not working for me

what is not working?

Alberto Iglesias said:
I need to implemente tabxClick on this class?

what do you mean?

Alberto Iglesias said:
and about the animation of slider?

what is with the slider??

Alberto Iglesias · Feb 22, 2019

Hello Alexander,

I'm still using the version 1.0, because if I update to 2.1, I lost the click events on the buttons and as @RWK said, he need to implement, this is correct?

thanks

Alexander Stolte · Feb 22, 2019

Alberto Iglesias said:
I'm still using the version 1.0, because if I update to 2.1, I lost the click events on the buttons and as @RWK said, he need to implement, this is correct?

Alexander Stolte said:
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.

Alexander Stolte · Feb 28, 2019

- V2.2

Add TabChange Event
Set Badget BorderWidth to 0dip

RWK · Mar 1, 2019

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

[B4X] [XUI] AS Bottom Menu V2

Expert

Attachments

Well-Known Member

Expert

Active Member

Member

Well-Known Member

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Attachments

Expert

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Attachments

Expert

Expert

Member