B4A Class [B4X] [XUI] AS BottomMenu

A better menu, can you find here
Screenshot_20200224-203427__01.jpg

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
4tabs android.PNG asbottommenu b4j.PNG 2tabs android.PNG
since Version 1.2 it is possible to replace the big middle button with further page (page5) more information about it, in #13
newmiddle button.PNG


IOS Android
4tabs ios gif.gif
4tabs android gif.gif


Since Version 1.6 it is possible to add Text:
Screenshot_20180912-131955__01.jpg


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)
 

Attachments

  • as_bottom_menu android.zip
    22.1 KB · Views: 906
  • as_bottom_menu b4j.zip
    181.2 KB · Views: 617
  • as_bottom_menu ios.zip
    9.8 KB · Views: 588
  • ASBottomMenu.bas
    91.8 KB · Views: 714
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
Great job Alex, really elegant.
is it also XUI?
 

Star-Dust

Expert
Licensed User
Longtime User
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
 

asales

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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:

asbm_new_features.gif
 

aaronk

Well-Known Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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

Well-Known Member
Licensed User
Longtime User
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)

img.png
 

Alexander Stolte

Expert
Licensed User
Longtime User
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.

newmiddle button.PNG

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

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

B4X:
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

Expert
Licensed User
Longtime User

aaronk

Well-Known Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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.
 
Top