B4A Library [B4X][XUI] WobbleMenu - a cross platform animated bottom navigation

Hi everyone,

This is a B4X compatible bottom navigation. It has 4 types of tab changing animation and 3 types of icon revealing animation.

ezgif.com-video-to-gif.gif


WobbleMenu
Author:
@Biswajit
Version: 1.5
Dependency: JavaObject, BitmapCreator, XUI
  • WobbleMenu
    • Functions:
      • GetCurrentTab As Int
        Get the current tab id (1 to 5)
      • GetHeight As Int
        Get menu height.
      • SetAnimationType(Animation_Type As Int)
        Set the tab changing animation type. Check properties
      • SetCurrentTab(TabID As Int)
        Set the current tab from 1 to 5
      • SetCurrentTab2(TabID As Int, triggerEvent As Boolean) NEW
        Same as SetCurrentTab. If you set triggerEvent = false then it will not trigger the tab click event.
      • SetIconAppearStyle(Icon_Appear_Style As Int)
        Set icon revealing animation type. Check properties
      • SetTabTextIcon(TabID As Int, Text As String, Icon As String, IconFont As Typeface)
        Set the tab text and icons (TabID must be between 1 to 5)
      • SetTabTextIcon2(TabID As Int, Text As String, Icon As Bitmap, tinted As Boolean) NEW
        Set the tab text and image icon (TabID must be between 1 to 5)
      • SetBadge(TabID As Int, Count As Int, BackColor As Int, TxtColor As Int)
        Set tab badge. (after 99 it will show 99+)
      • RemoveBadge(TabID As Int)
        Remove badge from a tab.
      • SetTabCount(count As Int)
        Set tab count at runtime.
        Count must be either 5 or 3
        Note: You can't change the tab count to 3 if your selected tab id is 4 or 5
      • SetEnableTab(TabID As Int, enable As Boolean)
        Enable or disable a tab.
      • GetEnableTab(TabID As Int) As Boolean
        Check if a tab is enabled or not.
      • SetVisible(show As Boolean, animate As Boolean) NEW
        Set menu visibility
    • Events:
      • Tab1Click
      • Tab2Click
      • Tab3Click
      • Tab4Click
      • Tab5Click
    • Properties:
      • ANIMATION_TYPE_ELASTIC_OUT As Int
      • ANIMATION_TYPE_ELASTIC_IN As Int
      • ANIMATION_TYPE_EASE_OUT As Int
      • ANIMATION_TYPE_EASE_IN As Int
      • ANIMATION_TYPE_NONE As Int
      • ICON_APPEAR_FROM_CENTER As Int
      • ICON_APPEAR_FROM_EDGE As Int
      • ICON_APPEAR_FADE_IN As Int
      • ICON_APPEAR_NO_ANIMATION As Int
    • Designer Properties:
      • No. of Tabs (Default: 5)
      • Active Tab (Default 3) NEW
      • Background Color (Default: 0xFFFFFFFF)
      • Shadow Color (Default: Dark)
      • Icon Color (Default: 0xFFBBBBBB)
      • Icon Size (Default: 18)
      • Text Color (Default: 0xFFFFFFFF)
      • Text Size (Default: 14)
      • Selected Icon Color (Default: 0xFF000000)
      • Icon Appear Style (Default: FROM EDGE)
      • Animation Type (Default: ELASTIC OUT)
      • Animation Duration (Default: 500)
You can implement your own animation. Check this link.
Copy the library to the additional library folder then run the examples. Have fun!

UPDATE v1.2 (Latest Examples and Library Attached):
  1. Added 3 Tabs option to designer properties
  2. Added Icon Fade In and no animation option
  3. Fixed SetTabIcon method, previously it was unable to handle any TabID value other than 1 to 5
UPDATE v1.3:
  1. Added Shadow Type (Light/Dark) Option
UPDATE v1.4:
  1. Now you can add text under icons
  2. Now you can add a badge to each tab
  3. Control icon size, text color, and text size from the designer.
  4. More smooth curve.
UPDATE v1.41: Fixed a variable mismatch error.
UPDATE v1.42: Added getHeight method.
UPDATE v1.43:
  1. Change tab count at runtime
  2. Get or set the tab enable status.
UPDATE v1.44:
  1. Minor animation bug fixed.
  2. Added b4xpage+viewpager example.
UPDATE v1.5:
  1. Added image icon support.
  2. Added setVisible method.
  3. Added setCurrentTab2 method which supports changing active tab without triggering click event.
  4. Now the default active tab can be selected from the designer.
UPDATE v1.51: Badge visibility bug fix.
 

Attachments

  • B4A_Example.zip
    9.3 KB · Views: 1,136
  • B4i_Example.zip
    110.4 KB · Views: 394
  • B4J_Example.zip
    2.3 KB · Views: 462
  • b4xpage example with viewpager.zip
    487.3 KB · Views: 753
  • WobbleMenu.b4xlib
    6.9 KB · Views: 546
Last edited:

Biswajit

Active Member
Licensed User
I'll post an example.
 

RogerGCollin

Member
Licensed User
Hi, I would also be interested to see an example of the menu being used with B4XPages. Or even with Panes. I am new to B4X and I think your WobbleMenu looks amazing, I just do not know how to use it to switch to different pages or panes. A simple example would be great!
 

Biswajit

Active Member
Licensed User
Hi, I would also be interested to see an example of the menu being used with B4XPages. Or even with Panes. I am new to B4X and I think your WobbleMenu looks amazing, I just do not know how to use it to switch to different pages or panes. A simple example would be great!
Ok will post soon.
 

Biswajit

Active Member
Licensed User
How can WobbleMenu be used with B4XPages?
Hi, I would also be interested to see an example of the menu being used with B4XPages. Or even with Panes. I am new to B4X and I think your WobbleMenu looks amazing, I just do not know how to use it to switch to different pages or panes. A simple example would be great!
Sorry for the late. I'm very busy these days.

I have uploaded an example with B4XPage and ViewPager. Check the first post.
 

Sergey_New

Active Member
Licensed User
have uploaded an example with B4XPage and ViewPager. Check the first post.
Compilation error:
B4X:
Error
-------------------------------------------------------------------------------
   ROBOCOPY     ::     Robust File Copy for Windows
-------------------------------------------------------------------------------
  Ќ з «®: 3 бҐвпЎап 2020 Ј. 20:55:21
    €бв®зЁЄ : C:\Users\D899~1\DOWNLO~1\Shared Files\
  Ќ § 票Ґ : C:\Users\D899~1\DOWNLO~1\B4A\Files\
     ” ©«л: *.*
        
 Џ а ¬Ґвал: *.* /DCOPY:DA /COPY:DAT /R:1000000 /W:30
------------------------------------------------------------------------------
2020/09/03 20:55:21 Ћ€ЃЉЂ 2 (0x00000002) „®бвгЇ Є Ёб室®© Ї ЇЄҐ C:\Users\D899~1\DOWNLO~1\Shared Files\
ЌҐ г¤ Ґвбп  ©вЁ гЄ § л© д ©«.
 

Biswajit

Active Member
Licensed User
Compilation error:
B4X:
Error
-------------------------------------------------------------------------------
   ROBOCOPY     ::     Robust File Copy for Windows
-------------------------------------------------------------------------------
  Ќ з «®: 3 бҐвпЎап 2020 Ј. 20:55:21
    €бв®зЁЄ : C:\Users\D899~1\DOWNLO~1\Shared Files\
  Ќ § 票Ґ : C:\Users\D899~1\DOWNLO~1\B4A\Files\
     ” ©«л: *.*
     
Џ а ¬Ґвал: *.* /DCOPY:DA /COPY:DAT /R:1000000 /W:30
------------------------------------------------------------------------------
2020/09/03 20:55:21 Ћ€ЃЉЂ 2 (0x00000002) „®бвгЇ Є Ёб室®© Ї ЇЄҐ C:\Users\D899~1\DOWNLO~1\Shared Files\
ЌҐ г¤ Ґвбп  ©вЁ гЄ § л© д ©«.
My bad. I have uploaded the correct zip file. Please download again.
 
Last edited:

Biswajit

Active Member
Licensed User
How do you change the menu position to be at the top?
Its a bottom navigation. You cant place it at the top. Will try to add support for that in next version.
 
Last edited:

Biswajit

Active Member
Licensed User
Thanks, it worked!
Tell me, can you do without AHViewPager?
That is an example of how you can show multiple panels on a single page with bottom navigation. Now it's upto you what you gonna use for showing multiple panels.

you can use other viewpager libraries, horizontal scrollview, even without all these you can show multiple panels by changing the visibility on the menu item click. Take the basic idea from the example and implement your own (if you don't want to use other libraries)
 

Biswajit

Active Member
Licensed User
It is clear, but I would like to use B4XPages instead of panels...
B4Xpage is not a panel. Its just a cross platform class which handles activity (for android) and page (for ios) events without the need of writing different code. This can't be used with any kind of bottom navigation. In simple words, each activity is a new window that opens one above another. That's why you cant show a fixed view (bottom navigation) between two activities.

Check this thread for better understanding,
 

Biswajit

Active Member
Licensed User
Top