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

Biswajit · May 30, 2020

Hi everyone,

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

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

Added 3 Tabs option to designer properties
Added Icon Fade In and no animation option
Fixed SetTabIcon method, previously it was unable to handle any TabID value other than 1 to 5

UPDATE v1.3:

Added Shadow Type (Light/Dark) Option

UPDATE v1.4:

Now you can add text under icons
Now you can add a badge to each tab
Control icon size, text color, and text size from the designer.
More smooth curve.

UPDATE v1.41: Fixed a variable mismatch error.
UPDATE v1.42: Added getHeight method.
UPDATE v1.43:

Change tab count at runtime
Get or set the tab enable status.

UPDATE v1.44:

Minor animation bug fixed.
Added b4xpage+viewpager example.

UPDATE v1.5:

Added image icon support.
Added setVisible method.
Added setCurrentTab2 method which supports changing active tab without triggering click event.
Now the default active tab can be selected from the designer.

UPDATE v1.51: Badge visibility bug fix.

Biswajit · Jul 28, 2020

I'll post an example.

RogerGCollin · Aug 31, 2020

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 · Sep 1, 2020

RogerGCollin said:
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 · Sep 3, 2020

Sergey_New said:
How can WobbleMenu be used with B4XPages?

RogerGCollin said:
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 · Sep 3, 2020

Biswajit said:
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\
ЌҐ г¤ Ґвбп  ©вЁ гЄ § л© д ©«.

amidgeha · Sep 3, 2020

How do you change the menu position to be at the top?

amidgeha · Sep 3, 2020

getHeight method does not exist in v1.44

Biswajit · Sep 3, 2020

Sergey_New said:

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.

Biswajit · Sep 3, 2020

amidgeha said:
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.

Biswajit · Sep 3, 2020

amidgeha said:
getHeight method does not exist in v1.44

Its there. Open the b4xlib file and check.

Sergey_New · Sep 4, 2020

Biswajit said:
My bad. I have uploaded the correct zip file. Please download again.

Thanks, it worked!
Tell me, can you do without AHViewPager?

Biswajit · Sep 4, 2020

Sergey_New said:
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)

Sergey_New · Sep 4, 2020

It is clear, but I would like to use B4XPages instead of panels...

Biswajit · Sep 4, 2020

Sergey_New said:
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,

[B4X] B4XPages - Cross platform and simple framework for managing multiple pages

B4XPages is a library that serves two purposes: 1. Make it simple to develop B4A apps by solving almost all of the challenges involved with Android complex activities life cycle. B4XPages makes B4A behave more similar to B4J and B4i where the new "B4XPage" element is a regular object that is...

www.b4x.com

Erel · Sep 6, 2020

Note that in Android, you can actually show a bottom bar quite easily as all the pages are inside the same activity (not the case in B4i and B4J).

asales · Sep 6, 2020

Erel said:
show a bottom bar quite easily as all the pages are inside the same activity.

How I can do this?
An example, please.
Thanks!

Sergey_New · Sep 11, 2020

Biswajit said:
Currently, you cant, will try to add support in the next version.

Can I find out when the release of the new version is planned?

Biswajit · Sep 12, 2020

Sergey_New said:
Can I find out when the release of the new version is planned?

I'm busy these days. Haven't planned any update yet.

Sergey_New · Sep 12, 2020

Understood thanks!

bitmap1374 · Nov 25, 2020

hi everyone.
Is it possible to change the font in this library?

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

Attachments

Active Member

Member

Active Member

Active Member

Well-Known Member

Active Member

Active Member

Active Member

Active Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Active Member

B4X founder

Expert

Well-Known Member

Active Member

Well-Known Member

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency