B4A Class [B4X] [XUI] AS BottomMenu

A better menu, can you find here


A complete New and better Version of this View is available now. (V2)

I'm very happy to share my first customview with the community.
I develop Cross Platform Apps, it was too much code and too much effort to assemble my own bottom menu from many views. So I decided to build a class that I just need to add one view in the designer with less work.

-You have many options to customize the menu.
-easy to use
-compatible with B4A,B4I and B4J
-you can hide the middle Button
-4 Tabs or 2 Tabs

It is optimized for B4A and B4I, on B4J it is still a little buggy, but i dont need it for B4J.

Android, B4J ,2Tabs

since Version 1.2 it is possible to replace the big middle button with further page (page5) more information about it, in #13

IOS Android

Since Version 1.6 it is possible to add Text:

AS Bottom Menu

Author: Alexander Stolte
Version: 1.6

• ASBottomMenu
  • Events:
    • MiddleButtonClick
    • MiddleButtonLongClick
    • Page1Click
    • Page2Click
    • Page3Click
    • Page4Click
    • Page5Click
  • Functions:
    • ChangeMiddleButtonSize (size As Double, BorderWidth As Double) As String
      Standard Value are the height of the view/1.2. Standard BorderWidth are 3dip.
    • Class_Globals As String
    • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
    • EnableBadget1 (Enable As Boolean) As String
      If True, the Badget is Visible, if not, the Badget is hidden.
    • EnableBadget2 (Enable As Boolean) As String
      If True, the Badget is Visible, if not, the Badget is hidden.
    • EnableBadget3 (Enable As Boolean) As String
      If True, the Badget is Visible, if not, the Badget is hidden.
    • EnableBadget4 (Enable As Boolean) As String
      If True, the Badget is Visible, if not, the Badget is hidden.
    • EnableBadget5 (Enable As Boolean) As String
      If True, the Badget is Visible, if not, the Badget is hidden.
    • EnableSelectedPageColor (enable As Boolean) As String
      If True then the Icon will change the Color on the current Page.
    • EnableText (Enable As Boolean) As String
    • GetBase As B4XView
    • HideBadgetValue (badget As Int, Hide As Boolean) As String
      If True only the badget color is display without value inside. badget as int = 1-4 allowed.
    • 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
      Set the Background Color of the 1. Badget
    • SetBadgetColor2 (color As Int) As String
      Set the Background Color of the 2. Badget
    • SetBadgetColor3 (color As Int) As String
      Set the Background Color of the 3. Badget
    • SetBadgetColor4 (color As Int) As String
      Set the Background Color of the 4. Badget
    • SetBadgetColor5 (color As Int) As String
      Set the Background Color of the 5. Badget
    • SetBadgetValue1 (value As Int) As String
      Set on the 1. Badge the Value. Bigger then 9, a "9+" is Displayed
    • SetBadgetValue2 (value As Int) As String
      Set on the 2. Badge the Value. Bigger then 9, a "9+" is Displayed
    • SetBadgetValue3 (value As Int) As String
      Set on the 3. Badge the Value. Bigger then 9, a "9+" is Displayed
    • SetBadgetValue4 (value As Int) As String
      Set on the 4. Badge the Value. Bigger then 9, a "9+" is Displayed
    • SetBadgetValue5 (value As Int) As String
      Set on the 5. Badge the Value. Bigger then 9, a "9+" is Displayed
    • SetCurrentPage (page As Int) As String
      Set the current Page 1-4
    • 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
    • SetMenuBackgroundColor (color As Int) As String
      Set the Background color behind the Buttons.
    • SetMiddleButtonBackgroundColor (color As Int) As String
      Set the Middle Button Background Color
    • SetMiddleButtonIcon (icon As B4XBitmap) As String
      Set the Icon of the Middle Button
    • SetMiddleButtonVisible (Visble As Boolean) As String
    • SetPageClickColor (color As Int) As String
      The Color of Halo Effect during Page Click.
    • SetPartingLineColor (color As Int) As String
      Set the Color of the Line over the Buttons.
    • SetPartingLinesColor (Color As Int) As String
      Change The Parting Lines Color
    • SetSelectedPageColor (color As Int) As String
      Set the color of the icon which is selected
    • SetSlider1Color (color As Int) As String
      Set the slider Color, if the slider slides to the 1. button.
    • SetSlider2Color (color As Int) As String
      Set the slider Color, if the slider slides to the 2. button.
    • SetSlider3Color (color As Int) As String
      Set the slider Color, if the slider slides to the 3. button.
    • SetSlider4Color (color As Int) As String
      Set the slider Color, if the slider slides to the 4. button.
    • SetSlider5Color (color As Int) As String
      Set the slider Color, if the slider slides to the 4. button.
    • SetTabPartingLinesVisible (Visible As Boolean) As String
      Set the Tab Parting Lines Visible. This lines are right or left on the tab vertical.
    • 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
    • SetTextColor (Color As Int) As String

In the attachment are 3 examples. (B4A,B4I and B4J)

Notes:
-in B4I use the "iXUI" lib.
-BitmapCreator Class is needed

I Plan a second Bottom Menu with Text instead of icons.

Have Fun.

Change log:
- V1.1

• Badget Value Fits automatic Text Size
• View Resize Bug Fixed
• Added Change Middle Button Size
• Added Hide badget value

- V1.2

• Fixed Resize Bug on Android
• Fixed Badget Value Size Bug on Android and IOS
• Added a 5. Tab, Hides automatically the Middle Button, if this option is true in the designer
• Slider have now more distance from the icons

- V1.3

• Add SetTabPartingLinesVisible, shows PartingLines Between the Pages
• Add SetPartingLinesColor, change the Color of the Parting Lines
• Add Parting Lines Color in the Designer
• Important Bug Fixes

- V1.4

• Add SetMiddleButtonVisible Hide or Show the Middle Button during runtime, pages resize automatically

- V1.5

• Fix Bug that the pages are not transparent and the background color therefore was not changeable

- V1.6

• Add Text under the icons (can be activated or deactivated during the runtime)
• Adds 7 Designer properties and Functions (Text Color, Enable Text and 1-5 Text)

 

[Star-Dust]

Great job Alex, really elegant.
is it also XUI?

 

[Johan Hormaza]

Great job!!

 

[Alexander Stolte]

Thanks!

is it also XUI?

When is something "XUI"?

 

[Star-Dust]

If you used the XUI library to make the views uniform for the three platforms.

@Erel released the XUI library. You can use Views, colors, font sizes that can be uniform across the three platforms. So you do not have to rewrite the code to adapt it to the platform

 

[Alexander Stolte]

If you used the XUI library to make the views uniform for the three platforms.

Title changed to [B4X] [XUI]

 

[asales]

Very, very nice!
A question: how I can change the size of middle buttom, make it small? I checked the code, but I don't figure out. Thanks.

 

[Alexander Stolte]

A question: how I can change the size of middle buttom, make it small? I checked the code, but I don't figure out. Thanks.

comes with the next update. Today or tomorrow, it depends on how well I handle the bugs.

 

[Alexander Stolte]

how I can change the size of middle buttom, make it small? I checked the code, but I don't figure out. Thanks.

New Version:
1.1 Add this and other Features here a snip:

 

[aaronk]

Looks good.

Just wondering, is there a way to tap and hold (lets say for 5 seconds) and allow the user to change the icon to something else?

For example:
Let's say you have 10 screens in your app and icon 1 currently shows screen 1. What if the user wants to change it from going to screen 1 to go to screen 7.

If you could tap and hold the icon for 5 seconds and then prompt you what screen you want to set for that icon for.

Also, what if you are using this on iOS (iPhoneX) does it move the icons up slightly for the home button? Otherwise the icons will be half cut off due to the home button being on the screen.

 

[Alexander Stolte]

Let's say you have 10 screens in your app and icon 1 currently shows screen 1. What if the user wants to change it from going to screen 1 to go to screen 7.

It is not the plan to add more than 4 Tabs, I also have no idea how you imagine that.

Also, what if you are using this on iOS (iPhoneX) does it move the icons up slightly for the home button? Otherwise the icons will be half cut off due to the home button being on the screen.

Solved in the next Update (this afternoon)

 

[aaronk]

It is not the plan to add more than 4 Tabs, I also have no idea how you imagine that.

I mean still have 4 buttons down the bottom of the screen, but make the button do something different when it's pressed.

I was hoping to use:
When icon1 is pressed to show screen1 (Show Activity called Main)
When icon2 is pressed to show screen2 (Show Activity called Chat)
When icon3 is pressed to show screen3 (Show Activity called People)
When icon4 is pressed to show screen4 (Show Activity called Setting)

But I have other Activity pages in my app:
Activity called Users
Activity called Log

But rather than icon2 to show the activity Chat when pressed, I was hoping if you could change it from the Chat to Users by long pressing the icon (for 5 seconds as an example).

So if it could long press (press and hold for 5 seconds) the icon you want to change and it for prompt you what you want to change the icon to. Then we can add code in our app where if the icon is something else we can do something based on the icon.

The following image might explain it a little better..
(allow you to drag and drop the icon over the top of the current icon at the bottom of the screen to change it's icon)

It would be also good if you could have 5 icons rather than 4. (replacing the large plus (+) icon with a small icon like the other icons)

 

[Alexander Stolte]

It would be also good if you could have 5 icons rather than 4. (replacing the large plus (+) icon with a small icon like the other icons)

Added in the Version 1.2 now, with other Bug Fixes.

In the Designer is a new Tab named: "Enable Middle Button As Page" Set this to True, the normal Middle Button is Hide and the new Middle Button as in the picture is visible.
This Page is called Page5, it has ever a "5" in the name, SliderColor5, EnableBadget5,BadgetColor5...

But rather than icon2 to show the activity Chat when pressed, I was hoping if you could change it from the Chat to Users by long pressing the icon (for 5 seconds as an example).

you mean, you need a long click event?

 

[asales]

Thanks @Alexander Stolte.
I made a change (that works to me), where the value of the badge is 0, it hides the badge:

Public Sub SetBadgetValue1(value As Int)
    If value > 9 Then
       asbm_badget_1.Text = "+" & 9
       asbm_badget_1.TextSize = FitTextSize(asbm_badget_1)
      
       Else if value = 0 Then  'changed
       asbm_badget_1.Visible = False  'changed
       asbm_badget_1.Text = 0
       asbm_badget_1.TextSize = 13          

       Else           
       asbm_badget_1.Text = value
       asbm_badget_1.TextSize = 13
   End If
End Sub

 

[Alexander Stolte]

value of the badge is 0, it hides the badge

since Version 1.1 there are following sub for that:

HideBadgetValue (badget As Int, Hide As Boolean) As String

not everybody wants to hide them at Value = 0.

 

[aaronk]

you mean, you need a long click event?

Might be easier to say, a way in changing the icon to something else during runtime. So the end user can drag and drop a new icon on top of the current icon to change it. Then when the user presses the icon (short press), for the app to do something based on the icon that is set.

 

[Alexander Stolte]

changing the icon to something else during runtime

• 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

But Drag and drop i dont want to support.

 

[aaronk]

But Drag and drop i dont want to support.

Fair enough.

 

[Alexander Stolte]

Update to Version 1.3, Bug Fixes and more.

You can now show parting lines and change his color.

Adjusts automatically to the page number.

 

[sigster]

How can I resize middle buttom in code