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

Discussion in 'Additional libraries, classes and official updates' started by Brandsum, Mar 2, 2019.

  1. Brandsum

    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
     

    Attached Files:

    Last edited: Mar 7, 2019
  2. mcqueccu

    mcqueccu Active Member Licensed User

    Wow this is great.
     
  3. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    would it be possible to set only 3 tabs?
     
  4. Brandsum

    Brandsum Well-Known Member Licensed User

    Why not! Check the latest update ;)
     
  5. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    it would be nice, if i have a property to change this black line to white or so.
    Screenshot_20190306-221636__01.jpg
     

    Attached Files:

  6. Brandsum

    Brandsum Well-Known Member Licensed User

    UPDATE v1.3:
    1. Added Shadow Type (Light/Dark) Option
     
  7. oparra

    oparra Member Licensed User

    If you want to see the halo effect on tab.

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

    Add to WobbleMenu.bas.

    Code:
    '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(
    000, InnerRadius, InnerRadius)
        cvs.Initialize(p)
        cvs.DrawCircle(cvs.TargetRect.CenterX, cvs.TargetRect.CenterY, cvs.TargetRect.Width / 
    2, Color, True0)
        
    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, 
    00)
        p.SetLayoutAnimated(Duration, x - Radius, y - Radius, Radius * 
    2, Radius * 2)
        p.SetVisibleAnimated(Duration, 
    False)
        Sleep(Duration)
        p.RemoveViewFromParent
    End Sub
     
  8. fasilosman

    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
     
  9. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    Click on the designer on this view and change the "BackgroundColor" property.

    Right click on the view in the designer and add the "Tab1Click" event should not be complicated :D

    Currently only 3 or 5 tabs possible.
     
    fasilosman likes this.
  10. stanks

    stanks Active Member Licensed User

    Last edited: Mar 25, 2019
  11. palmzac

    palmzac Active Member Licensed User

    Great !!!!!
     
  12. stanks

    stanks Active Member Licensed User

  13. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    This does not speed up the process!
     
    Jorge M A likes this.
  14. yiankos1

    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: Mar 25, 2019
  15. stanks

    stanks Active Member Licensed User

    no it doesn't and it wans't meant to speed something, but i am stupid to understand that great!!! after my post about problems...
     
    Last edited: Mar 25, 2019
  16. Brandsum

    Brandsum Well-Known Member Licensed User

    Sorry for the late reply. I was busy last few days.
    @stanks did you modified any code of this library?

    @yiankos1 No because that will look wired. This curve looks good in the center at startup.
    Don't know. I'll check that today!
     
    yiankos1 likes this.
  17. stanks

    stanks Active Member Licensed User

    no i didn't change any code.
     
  18. Brandsum

    Brandsum Well-Known Member Licensed User

    if you can post or dm your project then I can check whats is going on.
     
    Last edited: Mar 29, 2019
  19. Brandsum

    Brandsum Well-Known Member Licensed User

    I've found that so many 1,1,1,1,1,1 are coming from BitmapCreator DrawPath method.
     
    Last edited: Apr 9, 2019
  20. Erel

    Erel Administrator Staff Member Licensed User

    Can you post these logs?
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice