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

Brandsum

Well-Known Member
Licensed User
Hi everyone,

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

screenrec.gif

WobbleMenu
Author:
@Brandsum
Version: 1.3
Dependency: BitmapCreator, XUI
  • WobbleMenu
    • Functions:
      • GetCurrentTab As Int
        Get the current tab id (1 to 5)
      • 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
      • SetIconAppearStyle(Icon_Appear_Style As Int)
        Set icon revealing animation type. Check properties
      • SetTabIcon(TabID As Int,Icon As String, IconFont As Typeface)
        Set the tab icons (TabID must be between 1 to 5)
    • Events:
      • Tab1Click
      • Tab2Click
      • Tab3Click
      • Tab4Click
      • Tab5Click
    • Properties:
      • ANIMATION_TYPE_ELASTIC_OUT As Int [read only]
      • 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
You can implement your own animation. Check this link. ;)
Copy the library to 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
 

Attachments

Last edited:

oparra

Member
Licensed User
If you want to see the halo effect on tab.

B4X:
Private Sub TriggerTabClickEvent(t As B4XView)
    If CurrentTab = Tabs.IndexOf(t) + 1 Then Return
   
    RippleEffect( t, xui.Color_Gray, 250)

Add to WobbleMenu.bas.

B4X:
'https://www.b4x.com/android/forum/threads/b4x-xui-simple-halo-animation.80267/#content
Private Sub RippleEffect (Parent As B4XView, Color As Int, Duration As Int)
    Dim cvs As B4XCanvas
    Dim p As B4XView = xui.CreatePanel("")
    Dim InnerRadius As Int = Parent.Height * 1.30
    If Parent.Width <> Parent.Height Then InnerRadius = Max(Parent.Width, Parent.Height) * 1.60
    p.SetLayoutAnimated(0, 0, 0, InnerRadius, InnerRadius)
    cvs.Initialize(p)
    cvs.DrawCircle(cvs.TargetRect.CenterX, cvs.TargetRect.CenterY, cvs.TargetRect.Width / 2, Color, True, 0)
    Dim bmp As B4XBitmap = cvs.CreateBitmap
    p.RemoveViewFromParent
    Dim iv As ImageView
    iv.Initialize("")
    Dim p As B4XView = iv
    Dim Radius As Int = InnerRadius/2
    Dim x As Int = Parent.Width/2
    Dim y As Int = Parent.Height/2
    p.SetBitmap(bmp)
    Parent.AddView(p, x, y, 0, 0)
    p.SetLayoutAnimated(Duration, x - Radius, y - Radius, Radius * 2, Radius * 2)
    p.SetVisibleAnimated(Duration, False)
    Sleep(Duration)
    p.RemoveViewFromParent
End Sub
 

fasilosman

Active Member
Licensed User
@Brandsum

Hi, Excellent library for bottom navigation. Thanks.

I need some help in this library.

  1. How to change color of bottom navigation bar.
  2. Please give a sample for tab click event
  3. Can you increase or reduce the number of tabs/icons
 

Alexander Stolte

Well-Known Member
Licensed User

yiankos1

Active Member
Licensed User
1) Are you planning add which tab is firstly selected? Because, setting this by currenttab at runtime, transition is visible.

Edit: Why so many 1,1,1,1,1,1..... at log when app starting?
 
Last edited:

Brandsum

Well-Known Member
Licensed User
Sorry for the late reply. I was busy last few days.
get some visual errors on real device when tapping on wobble menu buttons (wobble bottom/width 100%x) https://paste.pics/df4c15123692f97ea01f372bbda35095

and the second visual error is when i put wobble menu (same height and shorter. i didn't try with same width..) on panel which is on top https://paste.pics/bba6f58ed75f31563d141b217b293947

android v8 on device

way to fix that?
@stanks did you modified any code of this library?

1) Are you planning add which tab is firstly selected? Because, setting this by currenttab at runtime, transition is visible.
@yiankos1 No because that will look wired. This curve looks good in the center at startup.
Why so many 1,1,1,1,1,1..... at log when app starting?
Don't know. I'll check that today!
 
Top