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 · Jun 6, 2020

sigster said:
Hi

How can I change Background Color in code

Currently you cant. Cause change the back color needs the view to redraw itself to change color of all its components like the curve, circle button etc.

sigster · Jun 6, 2020

so it is same in app load Activity_Create it is not possible

Biswajit · Jun 6, 2020

sigster said:
so it is same in app load Activity_Create it is not possible

You have to set the color from designer.

sigster · Jun 6, 2020

Thanks

CaptKronos · Jun 11, 2020

Tapping quickly (~0.5s) between tabs often results in a tab icon not being drawn and hence a blank space being shown. I think it's because the icon drawing animation doesn't have time to complete before the next tab has been tapped.

saeed10051 · Jun 11, 2020

Hi Nice work
how can i add menu items in these menus, and how to add additional forms/views where there are different buttons and text to do further processing

Biswajit · Jun 11, 2020

saeed10051 said:
Hi Nice work
how can i add menu items in these menus, and how to add additional forms/views where there are different buttons and text to do further processing

Sorry I didn't get your query.

saeed10051 · Jun 11, 2020

Biswajit said:
Sorry I didn't get your query.

i want to make an app in which when i click one of the menu tabs the form showing above change, so that the menu tabs can be used to navigate between different forms. I am trying to put panels for the various tab items but it is giving me error that the panel is not initialized

Biswajit · Jun 11, 2020

saeed10051 said:
i want to make an app in which when i click one of the menu tabs the form showing above change, so that the menu tabs can be used to navigate between different forms. I am trying to put panels for the various tab items but it is giving me error that the panel is not initialized

You can use AHViewPager, Add multiple panels to that view pager. On click event of each tab of this menu just scroll to a page you want.

asales · Jul 20, 2020

It's possible to change the Nº of Tabs by code, to create a dynamic menu in runtime?

Biswajit · Jul 20, 2020

asales said:
It's possible to change the Nº of Tabs by code, to create a dynamic menu in runtime?

Yes. I will post an update.

elitevenkat · Jul 22, 2020

How to disable and enable a tab ?

Sergey_New · Jul 24, 2020

Can use PNG icons?

Biswajit · Jul 25, 2020

elitevenkat said:
How to disable and enable a tab ?

Currently, you cant, will add support in the next version.

Sergey_New said:
Can use PNG icons?

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

Biswajit · Jul 26, 2020

UPDATE v1.43:

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

sigster · Jul 28, 2020

Hi how can I set Badget to zero, if I add 0 then it disaper

B4X:

WobbleMenu1.SetBadge(5,0,Colors.White,Colors.Blue)

Biswajit · Jul 28, 2020

sigster said:
Hi how can I set Badget to zero, if I add 0 then it disaper

B4X:

WobbleMenu1.SetBadge(5,0,Colors.White,Colors.Blue)

I think 0 means no badge. Like in ios when an app has no (0) notification then it shows no badge. Like the notification icon of this forum shows a badge when there is a notification.

Though if you want to show 0 badge then open the b4xlib, import the bas file to your project, and remove the 0 input checking from the SetBadge method.

sot bel · Jul 28, 2020

Its SUPER... I use it in one of my projects.!!

sigster · Jul 28, 2020

Thanks

Sergey_New · Jul 28, 2020

How can WobbleMenu be used with B4XPages?

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

Attachments

Active Member

Active Member

Active Member

Active Member

Active Member

Active Member

Active Member

Active Member

Active Member

Expert

Active Member

Active Member

Well-Known Member

Active Member

Active Member

Active Member

Active Member

Member

Active Member

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency