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 · Nov 26, 2020

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

Icon font? or the title font?

bitmap1374 · Nov 26, 2020

Biswajit said:
Icon font? or the title font?

title font

Biswajit · Nov 26, 2020

bitmap1374 said:
title font

From designer. Change the font from the designer and it will reflect on the title.

jjavilo · Dec 21, 2020

Hi. I would like to know if it is possible to change the font size at runtime, is it possible?

Biswajit · Dec 23, 2020

jjavilo said:
Hi. I would like to know if it is possible to change the font size at runtime, is it possible?

Currently, that's not possible.

Biswajit · Jan 13, 2021

RychTwins said:
Good morning, everyone! I'm new to B4x, and I'm having trouble using the "WobbleMenu1_Tab1Click" with a layout, please help me how to do it. Thank you !

Could you please explain the issue you are facing?

Biswajit · Jan 13, 2021

Inside the WobbleMenu1_Tab1Click sub call StartActivity(Your-Activity-Name).
For more details check these tutorials, https://www.b4x.com/etp.html

Rubsanpe · Feb 15, 2021

Hi. Im having errors with samples compilation:

B4X:

Error occurred on line: 94 (WobbleMenu)
java.lang.NumberFormatException: For input string: "null"
    at sun.misc.FloatingDecimal.readJavaFormatString(FloatingDecimal.java:2043)
    at sun.misc.FloatingDecimal.parseDouble(FloatingDecimal.java:110)
    at java.lang.Double.parseDouble(Double.java:538)
    at anywheresoftware.b4a.BA.ObjectToNumber(BA.java:684)
    at b4a.example.wobblemenu._designercreateview(wobblemenu.java:1095)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:732)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:351)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:255)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:144)
    at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:61)
    at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:162)
    at anywheresoftware.b4a.objects.PanelWrapper.LoadLayout(PanelWrapper.java:134)
    at anywheresoftware.b4a.objects.B4XViewWrapper.LoadLayout(B4XViewWrapper.java:312)
    at b4a.example.b4xmainpage._b4xpage_created(b4xmainpage.java:58)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.debug.Debug.CallSub4(Debug.java:318)
    at anywheresoftware.b4a.debug.Debug.CallSubNew2(Debug.java:285)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.keywords.Common.CallSubDebug2(Common.java:1055)
    at b4a.example.b4xpagesmanager._createpageifneeded(b4xpagesmanager.java:1060)
    at b4a.example.b4xpagesmanager._showpage(b4xpagesmanager.java:417)
    at b4a.example.b4xpagesmanager._addpage(b4xpagesmanager.java:245)
    at b4a.example.b4xpagesmanager._addpageandcreate(b4xpagesmanager.java:259)
    at b4a.example.b4xpagesmanager._initialize(b4xpagesmanager.java:165)
    at b4a.example.main._activity_create(main.java:408)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:732)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:351)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:255)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:144)
    at b4a.example.main.afterFirstLayout(main.java:105)
    at b4a.example.main.access$000(main.java:17)
    at b4a.example.main$WaitForLayout.run(main.java:83)
    at android.os.Handler.handleCallback(Handler.java:883)
    at android.os.Handler.dispatchMessage(Handler.java:100)
    at android.os.Looper.loop(Looper.java:214)
    at android.app.ActivityThread.main(ActivityThread.java:7356)
    at java.lang.reflect.Method.invoke(Native Method)

Rubén

Mashiane · Feb 15, 2021

Can you please add the functionality to return the top position? I need to add a control directly on top of the wobble menu.

Thanks.

Biswajit · Feb 16, 2021

Rubsanpe said:

Hi. Im having errors with samples compilation:

B4X:

Error occurred on line: 94 (WobbleMenu)
java.lang.NumberFormatException: For input string: "null"
    at sun.misc.FloatingDecimal.readJavaFormatString(FloatingDecimal.java:2043)
    at sun.misc.FloatingDecimal.parseDouble(FloatingDecimal.java:110)
    at java.lang.Double.parseDouble(Double.java:538)
    at anywheresoftware.b4a.BA.ObjectToNumber(BA.java:684)
    at b4a.example.wobblemenu._designercreateview(wobblemenu.java:1095)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:732)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:351)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:255)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:144)
    at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:61)
    at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:162)
    at anywheresoftware.b4a.objects.PanelWrapper.LoadLayout(PanelWrapper.java:134)
    at anywheresoftware.b4a.objects.B4XViewWrapper.LoadLayout(B4XViewWrapper.java:312)
    at b4a.example.b4xmainpage._b4xpage_created(b4xmainpage.java:58)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.debug.Debug.CallSub4(Debug.java:318)
    at anywheresoftware.b4a.debug.Debug.CallSubNew2(Debug.java:285)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.keywords.Common.CallSubDebug2(Common.java:1055)
    at b4a.example.b4xpagesmanager._createpageifneeded(b4xpagesmanager.java:1060)
    at b4a.example.b4xpagesmanager._showpage(b4xpagesmanager.java:417)
    at b4a.example.b4xpagesmanager._addpage(b4xpagesmanager.java:245)
    at b4a.example.b4xpagesmanager._addpageandcreate(b4xpagesmanager.java:259)
    at b4a.example.b4xpagesmanager._initialize(b4xpagesmanager.java:165)
    at b4a.example.main._activity_create(main.java:408)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:732)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:351)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:255)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:144)
    at b4a.example.main.afterFirstLayout(main.java:105)
    at b4a.example.main.access$000(main.java:17)
    at b4a.example.main$WaitForLayout.run(main.java:83)
    at android.os.Handler.handleCallback(Handler.java:883)
    at android.os.Handler.dispatchMessage(Handler.java:100)
    at android.os.Looper.loop(Looper.java:214)
    at android.app.ActivityThread.main(ActivityThread.java:7356)
    at java.lang.reflect.Method.invoke(Native Method)

Rubén

This error is coming from the designer. Open the layout file and save the file from the designer again. Then try to compile.

Biswajit · Feb 16, 2021

Mashiane said:
Can you please add the functionality to return the top position? I need to add a control directly on top of the wobble menu.

Thanks.

B4X:

Dim top as int = 100%y - wobblemenu1.GetHeight 'b4a
Dim top as int = Page1.RootPanel.Height - wobblemenu1.GetHeight 'b4i

Rubsanpe · Feb 16, 2021

Biswajit said:
This error is coming from the designer. Open the layout file and save the file from the designer again. Then try to compile.

Thank you. Solved.

Rubén

Mashiane · Jun 1, 2021

Hi there

I seem to have a problem with the b4i example, i cannot run it, posted the issue here

[WoobleMenu] [SOLVED] Cannot Parse (null)

Ola I need some help, im getting an error, here are the logs... Application_Start Error occurred on line: 94 (WobbleMenu) Cannot parse: (null) Stack Trace: ( CoreFoundation 373EC2DD-3A29-3E74-B85D-BE4EE925167A + 1159484 libobjc.A.dylib objc_exception_throw + 56 CoreFoundation...

www.b4x.com

Thanks

Mashiane · Jul 27, 2021

Hi, is it possible to create something like this purely in HTML for b4j webapp? Thanks.

TILogistic · Jul 27, 2021

Mashiane said:
Hi, is it possible to create something like this purely in HTML for b4j webapp? Thanks.

You know that you can find these and other better ones on the web that are developed in javascripts and css,

Recognize this example:

Biswajit · Jul 29, 2021

Mashiane said:
Hi, is it possible to create something like this purely in HTML for b4j webapp? Thanks.

Yes. But as @oparra suggested there are many bottom bar plugins available on the internet.

Mashiane · Jul 29, 2021

Its fine, I am interested in this implementation. I will see what to do. thanks.

endbyte · Aug 24, 2021

hi, is there any way to selected icon background color ???

Biswajit · Aug 26, 2021

endbyte said:
hi, is there any way to selected icon background color ???

No. Currently there is no option to change that.

EduardoElias · Oct 31, 2021

I see there is a background band on the wooble menu. I have a color for the menu itself but the background (the half upper part) changing on the background to transparent does not cause change.... I want to have the wooble menu over a google maps (it is pure visual)

is it possible?

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

Attachments

Active Member

Member

Active Member

New Member

Active Member

Active Member

Active Member

Active Member

Expert

Active Member

Active Member

Active Member

Expert

Expert

Expert

Attachments

Active Member

Expert

Member

Active Member

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency