B4A Class [B4X] [XUI] AS BottomMenu

Discussion in 'Additional libraries, classes and official updates' started by Alexander Stolte, Aug 16, 2018.

  1. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    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)
     

    Attached Files:

    Last edited: Sep 12, 2018
  2. Star-Dust

    Star-Dust Expert Licensed User

    Great job Alex, really elegant.
    is it also XUI?
     
    Alexander Stolte likes this.
  3. Johan Hormaza

    Johan Hormaza Active Member Licensed User

    Great job!!
     
    Alexander Stolte likes this.
  4. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    Thanks!

    When is something "XUI"?
     
  5. Star-Dust

    Star-Dust Expert Licensed 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
     
    Alexander Stolte likes this.
  6. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    Title changed to [B4X] [XUI]
     
    Johan Hormaza, Erel and Star-Dust like this.
  7. asales

    asales Well-Known Member Licensed 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.
     
  8. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    comes with the next update. Today or tomorrow, it depends on how well I handle the bugs.
     
    asales likes this.
  9. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

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

    asbm_new_features.gif
     
  10. aaronk

    aaronk Well-Known Member Licensed 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.
     
  11. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

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

    Solved in the next Update (this afternoon)
     
  12. aaronk

    aaronk Well-Known Member Licensed User

    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
     
  13. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    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...


    you mean, you need a long click event?
     
  14. asales

    asales Well-Known Member Licensed User

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

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

    Alexander Stolte Well-Known Member Licensed User

    since Version 1.1 there are following sub for that:

    not everybody wants to hide them at Value = 0.
     
    Peter Simpson and asales like this.
  16. aaronk

    aaronk Well-Known Member Licensed User

    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.
     
  17. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    But Drag and drop i dont want to support.
     
  18. aaronk

    aaronk Well-Known Member Licensed User

    Fair enough.
     
  19. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    Update to Version 1.3, Bug Fixes and more.

    You can now show parting lines and change his color.

    asbottom partinglines_1.PNG
    Adjusts automatically to the page number.
    asbottom partinglines_2.PNG
     
  20. sigster

    sigster Active Member Licensed User

    How can I resize middle buttom in code
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice