Android Question [B4X][XUI] WobbleMenu - A few questions..

Mashiane

Expert
Licensed User
Longtime User
i can't recreate and display the 3 layouts (contains clv) when i click wobblemenu tabs using AHViewPager and AHPageContainer. i reviewed all the posts about ViewPager and PageContainer.
who can help me and save my time with an B4XPages example.
Actually you can do without the need for AHViewPager with some little help and "hacks"

1. Create each layout that you need for each page.
2. Insert a wobble menu in each. As you know the sequence of the tabs, set the active tab for each wobble menu, starting from 1 - 3 or you can do it via code, see below.
3. Create 3 b4x pages and in each load each layout. Each will have wobble menu. This gives you more control and flexibility.

In the main page, create a sub, this will set the text and icons for each wobblemenu, for example.

B4X:
Sub AddWobbleMenu(wm As WobbleMenu, thisTab As Int)
    wm.SetTabTextIcon(1,"Home",Chr(0xF1EB),Typeface.FONTAWESOME)
    wm.SetTabTextIcon(2,"Notifications",Chr(0xF0A2),Typeface.FONTAWESOME)
    wm.SetTabTextIcon(3,"Settings",Chr(0xF2A2),Typeface.FONTAWESOME)
    wm.SetCurrentTab2(thisTab, False)
End Sub

The code below, sets the text of each wobble menu and makes it active at that position.
We are not firing events on tab click.

On the first page, b4xpage_create
B4X:
MainPage.AddWobbleMenu(WobbleMenu1, 1)

On the second page b4xpage_create
B4X:
MainPage.AddWobbleMenu(WobbleMenu1, 2)

On the 3rd page b4xpage_create
B4X:
MainPage.AddWobbleMenu(WobbleMenu1, 3)

Assuming that you will move from one page to another, you need a way to ensure that when you click Settings when you are in the first page it goes to Settings and set settings to be active.

So on the main page, add this.

B4X:
Sub SetWobbleMenuPosition(wm As WobbleMenu, thisTab As Int)
    If wm.GetCurrentTab <> thisTab Then
        wm.SetCurrentTab2(thisTab, False)
    End If
End Sub

We will use this when the page appears. We have 3 different wobble menus and they need to work seamlessly.

So, on the first page, b4xpage_appear, add this
B4X:
MainPage.SetWobbleMenuPosition(wobblemenu1, 1)

So, on the second page, b4xpage_appear, add this
B4X:
MainPage.SetWobbleMenuPosition(wobblemenu1, 2)

So, on the third page, b4xpage_appear, add this
B4X:
MainPage.SetWobbleMenuPosition(wobblemenu1, 3)

Now the tab clicks.

At anytime you click a tab, it needs to go to the respective page you want. Each page will have a wobble menu tab click method. Add this code to all the pages.

B4X:
Sub WobbleMenu1_Tab1Click
   B4XPages.ShowPage("pg1")
End Sub

Sub WobbleMenu1_Tab2Click
   B4XPages.ShowPage("pg2")
End Sub

Sub WobbleMenu1_Tab3Click
    B4XPages.ShowPage("pg3")
End Sub

Remember though, you need to trap the method so that it does not fire twice on the current page. You cant show page2 when you are in page 2.

On pg1, comment out the showpage call, on pg2, comment out the showpage call and on pg3 comment out the showpage call.
If there is code to execute each time you click a tab on that page, then add it.

Hope it makes some sense. This is my implementation that is working perfectly without hussles. My pages (5 of them including MainPage) have a lot of code and they are separate concerns.

Ta!

Ohh, I forgot. Assuming that you want a badge to be updated for all the tabs. You also need some "hack".

Add this on mainpage. When called, this ensures that irrespective of which page you are in, the badge for that tab item is updated. In my case, its the second tag for "Notifications".

B4X:
'update the badge across the application
Sub UpdateBadge(badgeNumber as int)
    pg1.WobbleMenu1.RemoveBadge(2)
    pg2.WobbleMenu1.RemoveBadge(2)
    pg3.WobbleMenu1.RemoveBadge(2)
    If BadgeNumber > 0 Then   
        pg1.WobbleMenu1.SetBadge(2, BadgeNumber, Colors.White, Colors.Blue)
        pg2.WobbleMenu1.SetBadge(2, BadgeNumber, Colors.White, Colors.Blue)
        pg3.WobbleMenu1.SetBadge(2, BadgeNumber, Colors.White, Colors.Blue)
   End If
End Sub

For me this is called each time I receive a firebase message.
 
Last edited:
Upvote 0

M.LAZ

Active Member
Licensed User
Longtime User
Actually you can do without the need for AHViewPager with some little help and "hacks"

1. Create each layout that you need for each page.
2. Insert a wobble menu in each. As you know the sequence of the tabs, set the active tab for each wobble menu, starting from 1 - 3 or you can do it via code, see below.
3. Create 3 b4x pages and in each load each layout. Each will have wobble menu. This gives you more control and flexibility.

In the main page, create a sub, this will set the text and icons for each wobblemenu, for example.

B4X:
Sub AddWobbleMenu(wm As WobbleMenu, thisTab As Int)
    wm.SetTabTextIcon(1,"Home",Chr(0xF1EB),Typeface.FONTAWESOME)
    wm.SetTabTextIcon(2,"Notifications",Chr(0xF0A2),Typeface.FONTAWESOME)
    wm.SetTabTextIcon(3,"Settings",Chr(0xF2A2),Typeface.FONTAWESOME)
    wm.SetCurrentTab2(thisTab, False)
End Sub

The code below, sets the text of each wobble menu and makes it active at that position.
We are not firing events on tab click.

On the first page, b4xpage_create
B4X:
MainPage.AddWobbleMenu(WobbleMenu1, 1)

On the second page b4xpage_create
B4X:
MainPage.AddWobbleMenu(WobbleMenu1, 2)

On the 3rd page b4xpage_create
B4X:
MainPage.AddWobbleMenu(WobbleMenu1, 3)

Assuming that you will move from one page to another, you need a way to ensure that when you click Settings when you are in the first page it goes to Settings and set settings to be active.

So on the main page, add this.

B4X:
Sub SetWobbleMenuPosition(wm As WobbleMenu, thisTab As Int)
    If wm.GetCurrentTab <> thisTab Then
        wm.SetCurrentTab2(thisTab, False)
    End If
End Sub

We will use this when the page appears. We have 3 different wobble menus and they need to work seamlessly.

So, on the first page, b4xpage_appear, add this
B4X:
MainPage.SetWobbleMenuPosition(wobblemenu1, 1)

So, on the second page, b4xpage_appear, add this
B4X:
MainPage.SetWobbleMenuPosition(wobblemenu1, 2)

So, on the third page, b4xpage_appear, add this
B4X:
MainPage.SetWobbleMenuPosition(wobblemenu1, 3)

Now the tab clicks.

At anytime you click a tab, it needs to go to the respective page you want. Each page will have a wobble menu tab click method. Add this code to all the pages.

B4X:
Sub WobbleMenu1_Tab1Click
   B4XPages.ShowPage("pg1")
End Sub

Sub WobbleMenu1_Tab2Click
   B4XPages.ShowPage("pg2")
End Sub

Sub WobbleMenu1_Tab3Click
    B4XPages.ShowPage("pg3")
End Sub

Remember though, you need to trap the method so that it does not fire twice on the current page. You cant show page2 when you are in page 2.

On pg1, comment out the showpage call, on pg2, comment out the showpage call and on pg3 comment out the showpage call.
If there is code to execute each time you click a tab on that page, then add it.

Hope it makes some sense. This is my implementation that is working perfectly without hussles. My pages (5 of them including MainPage) have a lot of code and they are separate concerns.

Ta!

Ohh, I forgot. Assuming that you want a badge to be updated for all the tabs. You also need some "hack".

Add this on mainpage. When called, this ensures that irrespective of which page you are in, the badge for that tab item is updated. In my case, its the second tag for "Notifications".

B4X:
'update the badge across the application
Sub UpdateBadge(badgeNumber as int)
    pg1.WobbleMenu1.RemoveBadge(2)
    pg2.WobbleMenu1.RemoveBadge(2)
    pg3.WobbleMenu1.RemoveBadge(2)
    If BadgeNumber > 0 Then 
        pg1.WobbleMenu1.SetBadge(2, BadgeNumber, Colors.White, Colors.Blue)
        pg2.WobbleMenu1.SetBadge(2, BadgeNumber, Colors.White, Colors.Blue)
        pg3.WobbleMenu1.SetBadge(2, BadgeNumber, Colors.White, Colors.Blue)
   End If
End Sub

For me this is called each time I receive a firebase message.
Thank you so much for help..
It's a perfect solution.. I will use later
 
Upvote 0
Top