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 · Oct 31, 2021

eelias said:
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?

Sorry didn't understand. The upper half is transparent by default. Post a small screenshot of that menu area. And explain what is the problem.

EduardoElias · Oct 31, 2021

Biswajit said:
Sorry didn't understand. The upper half is transparent by default. Post a small screenshot of that menu area. And explain what is the problem.

See the red box... I cant get rid of that area in b4a and b4i

the map is going under, changing the background color to transparent does nothing... changing the activity background color on the layout does change this area, but that does not solve the map thing.

Biswajit · Oct 31, 2021

eelias said:
changing the background color to transparent does nothing

Maybe your layout is wrong. Maybe you have placed the wobble menu right after the map view so the map view's bottom is the top of the wobble menu.

Half of the wobble menu view has the shadow and the selected icon view with a transparent background and the other half has the bottom part.

So increase the map view height. New height = Current height + (wobble menu height / 2)

I think it will solve the issue.

EduardoElias · Oct 31, 2021

Biswajit said:
Maybe your layout is wrong. Maybe you have placed the wobble menu right after the map view so the map view's bottom is the top of the wobble menu.

Half of the wobble menu view has the shadow and the selected icon view with a transparent background and the other half has the bottom part.

So increase the map view. New height = Current height + (wobble menu height / 2)

I think it will solve the issue.

The map is already under the wobblemenu.... so if it is transparent is should be showing it , if you see to the left there is a small portion of the map right there

Biswajit · Oct 31, 2021

eelias said:
The map is already under the wobblemenu.... so if it is transparent is should be showing it , if you see to the left there is a small portion of the map right there

Can you post your layout file?

EduardoElias · Oct 31, 2021

Biswajit said:
Can you post your layout file?

your comment made me rethink and changing the part of the layout it worked...

the way I wanted.... very nice indeed

Thanks!

roneshprasad2021 · Dec 2, 2021

where can I get the wobble menu library

aeric · Dec 3, 2021

roneshprasad2021 said:
where can I get the wobble menu library

On first post. There may be a restriction for new joined members. Donate to B4X or buy a B4i license to upgrade to "licensed user".

aeric · Dec 6, 2021

When I try to run the example, I encountered the following error:

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:539)
at anywheresoftware.b4a.BA.ObjectToNumber(BA.java:684)
at b4a.example.wobblemenu._designercreateview(wobblemenu.java:1095)

I fixed it by open the layout designer and set the corner radius to value other than 0.

Pravee7094 · Dec 6, 2021

aeric said:
When I try to run the example, I encountered the following error:

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:539)
at anywheresoftware.b4a.BA.ObjectToNumber(BA.java:684)
at b4a.example.wobblemenu._designercreateview(wobblemenu.java:1095)

I fixed it by open the layout designer and set the corner radius to value other than 0.

I faced the same Issue. I just open the designer and save the layout without any changes and then run. It successfully worked.

epiCode · Mar 31, 2023

Hi @Biswajit
I see that many users have already raised this concerns regarding the other controls/layout under the wobble menu.

As I understand, height of menu will vary on different devices depending on height to width ratio. It makes other content either leave a gap or go under the menu which might not be intended.

It would be nice if you can share from following image:
A - (Top height which can be retrieved from getHeight method)
B - How to Calculate that ?

Also, is it possible that height be fixed lets say at 100dip irrespective of device height ?

Thanks!

tufanv · May 7, 2023

Hello,

Biswajit said:
Hi everyone,

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

View attachment 94944

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.

Hello,

Sometimes we got some crash reports with this:
java.lang.IllegalArgumentException - Cannot set 'scaleX' to Float.NaN
https://console.firebase.google.com...85bd76f?time=last-seven-days&versions=5 (502)
Any solution?

Biswajit · May 8, 2023

tufanv said:
Hello,

Hello,

Sometimes we got some crash reports with this:
java.lang.IllegalArgumentException - Cannot set 'scaleX' to Float.NaN
https://console.firebase.google.com/u/0/project/canli-doviz-android/crashlytics/app/android:ct.canlidoviz/issues/ed0f906a9b3d775cae5af41b185bd76f?time=last-seven-days&versions=5 (502)
Any solution?

Could you please share the error log? The provided links are not working.

DonManfred · May 8, 2023

Probably they are working. But only for @tufanv.

tufanv · May 8, 2023

Biswajit said:
Could you please share the error log? The provided links are not working.

I had copied the text instead I pasted here the url sorry

B4X:

Fatal Exception: java.lang.RuntimeException
java.lang.IllegalArgumentException: Cannot set 'scaleX' to Float.NaN
anywheresoftware.b4a.keywords.Common$14.run (Common.java:1750)

com.android.internal.os.ZygoteInit.main (ZygoteInit.java:947)

Caused by java.lang.IllegalArgumentException
Cannot set 'scaleX' to Float.NaN
android.view.View.sanitizeFloatPropertyValue (View.java:17483)

anywheresoftware.b4a.objects.B4XViewWrapper.SetLayoutAnimated (B4XViewWrapper.java:180)
ct.canlidoviz.wobblemenu$ResumableSub_SetCircleIcon.resume (wobblemenu.java:1163)
anywheresoftware.b4a.keywords.Common$14.run (Common.java:1748)

com.android.internal.os.ZygoteInit.main (ZygoteInit.java:947)

tkstarir · Nov 9, 2023

Hi. how can i set 100% width for wobblemenu to make it responsive ?

Alexander Stolte · Nov 9, 2023

tkstarir said:
Hi. how can i set 100% width for wobblemenu to make it responsive ?

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

Attachments

Biswajit

Active Member

EduardoElias

Well-Known Member

Biswajit

Active Member

EduardoElias

Well-Known Member

Biswajit

Active Member

EduardoElias

Well-Known Member

roneshprasad2021

New Member

aeric

Expert

aeric

Expert

Pravee7094

Active Member

epiCode

Active Member

tufanv

Expert

Biswajit

Active Member

DonManfred

Expert

tufanv

Expert

tkstarir

Member

Alexander Stolte

Expert

Similar Threads

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

Attachments

Active Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Well-Known Member

New Member

Expert

Expert

Active Member

Active Member

Expert

Active Member

Expert

Expert

Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency