[B4X] [XUI] AS Bottom Menu V2

Alexander Stolte · May 11, 2020

carycai said:
I want 3 or 4 tabs,how to do？

look in the designer, there is a property for this.

sigster · Jun 3, 2020

Hi

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

Alexander Stolte · Jun 3, 2020

I don't understand the question.
The Icons are not default you need to set it in the code. Look at the example.

sigster · Jun 3, 2020

Button 1 is default selected when I open the app but I want button 2 to be selected

see screenshot

Alexander Stolte · Jun 3, 2020

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

[B4X] [XUI] AS Tab Menu (Bottom Menu/Navigation)

A better menu, can you find here Hey B4X-Forum! New Year, new views! :) The first one from me for this year is a better, simpler, faster and scalable Tab/Bottom-Menu. 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...

www.b4x.com

sigster · Jun 4, 2020

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

syerif · Oct 14, 2020

Alexander Stolte said:
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 · Nov 8, 2020

How to change the font size for the badges...its too large (see attached)

Alexander Stolte · Nov 8, 2020

Update

V2.7
- Add getBadgeLabel1-5

james_sgp said:
How to change the font size for the badges...its too large (see attached)

B4X:

ASMenu.BadgetLabel_1.Font = XUI.CreateDefaultFont(10)

james_sgp · Nov 8, 2020

Thanks very much...

Alexander Stolte · Nov 11, 2021

Update

V2.8
- Text labels are now public

CryoGenID · Apr 27, 2022

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:

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

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

Thanks

Best regards,

Chris

Alexander Stolte · Apr 27, 2022

Update

V2.9
- Add get and set MiddleButtonBackgroundColor - Changes the middle button color

CryoGenID said:
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

CryoGenID said:
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 · Apr 27, 2022

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 · Apr 27, 2022

CryoGenID said:
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

CryoGenID said:
No chance to set the "UnselectedPageColor" via Code somewhere or did I just miss it?

UnselectedPageColor

CryoGenID said:
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 · Apr 28, 2022

Thanks Alexander,
I will test it right away

Best regards,

Chris

CryoGenID · Apr 28, 2022

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:

Tab 2 is correctly deactivated...

Thanks

Best regards,

Chris

Alexander Stolte · Apr 28, 2022

CryoGenID said:
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 · Apr 28, 2022

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

Alexander Stolte · Apr 28, 2022

CryoGenID said:
Besides the big button, I could do everything else with the newer lib as well if I understood you correctly (also designwise)?

yes, you can customize each tab invidually to your needs
But there are also a few questionable things in it that I would do differently today.

[B4X] [XUI] AS Bottom Menu V2

Expert

Active Member

Expert

Active Member

Expert

Active Member

Active Member

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Active Member

Expert

Active Member

Expert

Privacy & Transparency

Privacy & Transparency