B4A Class [B4X] [XUI] AS BottomMenu

Alexander Stolte · Aug 16, 2018

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)

Alexander Stolte · Jan 13, 2019

wizard699 said:
It's possible to change the default (white) color of Icons?

Alexander Stolte said:
SetSelectedPageColor (color As Int) As String
Set the color of the icon which is selected

wizard699 · Jan 13, 2019

Hi Alexander. Actually I was referring to the unselected icons. But I decided to implement an evolution. Wanting to have the freedom to put the bar of any color and the icons also colored, I introduced a new property in the Designer, OriginalIconColor. If enabled it allows you to keep in the original icons ... otherwise they become white. I hope you do not mind if I have customized your great component.
And if anyone wants, I can release the modified version here ... but I would not want to overlap your great work and any versions you were already working on.

jimmyF · Jan 13, 2019

Here's what I am doing:

B4X:

Dim b As Bitmap = Utils.TextToBitmap(Chr(0xF104),72,Colors.White,45,45,Typeface.FONTAWESOME,"CENTER")
    asBM.SetIcon2(b)

Sub TextToBitmap(s As String, FontSize As Float, lFontColour As Long, iWidth As Int, iHeight As Int, TF As Typeface, strAlignment As String) As Bitmap
    Dim bmp As Bitmap
    Dim cvs As Canvas
 
    bmp.InitializeMutable(iWidth * 100dip / 100, iHeight * 100dip / 100)
    cvs.Initialize2(bmp)
    Dim h As Double = cvs.MeasureStringHeight(s, TF, FontSize)
    cvs.DrawText(s, bmp.Width / 2, bmp.Height / 2 + h / 2, TF, FontSize, lFontColour, strAlignment)
 
    Return cvs.Bitmap

End Sub

This way you can change the icon colour on the fly anytime you wish.

larprogramer · Feb 1, 2019

hi can you tell me.how to hide button here.

JMB · Feb 1, 2019

Hi there.

I downloaded the B4A example at the beginning of this thread and updated the AsBottomMenu.bas file to version 1.6 and ran the same example.

It immediately crashed so I went into the designer and switched on text and Show Middle button.

That allowed the example to run, but when I tap the second icon along, it crashes in the function inside AsBottomMenu.bas:

B4X:

Private Sub ChangeColorBasedOnAlphaLevel(bmp As B4XBitmap, NewColor As Int) As B4XBitmap

Having put a Log(bmp.IsInitialized) line in the Sub listed above, it appears that the bmp being passed to this sub has not been initialised, although it is when the application first runs.

Can anyone shed some light on this?

Thanks,

JMB

Alexander Stolte · Feb 2, 2019

JMB said:
switched on text and Show Middle button.

This makes no sense, Because, if you enable Text instead of Icons then is this:

JMB said:
Private Sub ChangeColorBasedOnAlphaLevel(

Not needed

Alexander Stolte · Feb 2, 2019

larprogramer said:
hi can you tell me.how to hide button here.

Alexander Stolte said:
SetMiddleButtonVisible (Visble As Boolean) As String

larprogramer · Feb 2, 2019

Thanks you

JMB · Feb 2, 2019

Hi Alexander, thanks for your reply.

I think I am using this view incorrectly so I shall read the other entries in the forum properly first!

JMB

JMB · Feb 4, 2019

Hi Alexander, I am trying to figure out how to get rid of the gap that is left above the separator line when one uses the middle button as a page rather than a big button.

Would it be possible to give some guidance as to how to get rid of the gap where the number 5 button is?

Thank you.

JMB

B4A Class [B4X] [XUI] AS BottomMenu

Attachments

Alexander Stolte

Expert

wizard699

Active Member

jimmyF

Active Member

larprogramer

Member

Attachments

JMB

Active Member

Alexander Stolte

Expert

Alexander Stolte

Expert

larprogramer

Member

JMB

Active Member

JMB

Active Member

Similar Threads

B4A Class [B4X] [XUI] AS BottomMenu

Attachments

Expert

Active Member

Active Member

Member

Attachments

Active Member

Expert

Expert

Member

Active Member

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency