iOS Question How to use an icon+text in ToolBar buttons ?

[marcick]

Hours searching througth samples and I can't find how to do .....
I want to use an Awesome or Material icon on the bottom ToolBar plus a text below, like whatsapp

Do I have to initialize a barbutton as customview ? Sample code ?

(I'm not using B4x pages)

 

[Erel]

1. You can use TabBarControllar instead of NavigationController.
2. You can use BarButton.InitializeCustom with a panel which holds other views.

 

[marcick]

It's some days I'm struggling. Tons of examples on the forum and I can't get a working solution. It's very frustrating.
What I want to obtain is a very simple bottom bar with Icons and Text, like Whatsapp

With the code below (using initializeCustom that load a panel that contain two labels), I can get one element on the left

but if I try to add more elements and centered it fails. Where I'm wrong ?
I tested also the TabBarController. In terms of appearance it works very nice. Super. But it requires to me a lot of works reassembling the whole app code because I need a separate Main that is not my original mainpage and also create troubles if I want to use togheter with NavigationController.

I would prefer the first InitializeCustom solution. If I could get it to work ......

'Code module
#Region  Project Attributes
    #ApplicationLabel: Test
    #Version: 1.0.0
    'Orientation possible values: Portrait, LandscapeLeft, LandscapeRight and PortraitUpsideDown
    #iPhoneOrientations: Portrait, PortraitUpsideDown
    #iPadOrientations: Portrait, LandscapeLeft, LandscapeRight, PortraitUpsideDown
    #MinVersion: 9.3   
    #Target: iPhone, iPad
    #ATSEnabled: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'Public variables can be accessed from all modules.
    Public App As Application
    Public NavControl As NavigationController
    Private Page1 As Page

    Private bb1,bb2, bbspace As BarButton
    Private PnlBB1 As Panel
    Private LblBB1b As Label
    Private LblBB1a As Label
End Sub

Private Sub Application_Start (Nav As NavigationController)
    NavControl = Nav
    Page1.Initialize("Page1")
    Page1.RootPanel.LoadLayout("Page1")
    NavControl.ShowPage(Page1)
    NavControl.ToolBarVisible=True
    NavControl.NavigationBarVisible=False
        
' this work, one item on the left
    bb1.InitializeCustom(PnlBB1)
    Page1.ToolbarButtons.AddAll(Array As Object(bb1))
'

' this does not work, I obtain just one item on the right
'    bb1.InitializeCustom(PnlBB1)
'    bb2.InitializeCustom(PnlBB1)
'    Page1.ToolbarButtons.AddAll(Array As Object(bb1,bb2))
'

' this does not work also, I tried to add a space between buttons
'    bb1.InitializeCustom(PnlBB1)
'    bb2.InitializeCustom(PnlBB1)
'    bbspace.InitializeSystem(bbspace.ITEM_FLEXIBLE_SPACE, "")
'    Page1.ToolbarButtons.AddAll(Array As Object(bb1,bbspace,bb2))
'
    
end    Sub

 

[Erel]

You cannot use the same panel twice. Create a new layout for each item.

 

[marcick]

I didn't worry about the Bar Button contents during these experiments and I used just one source .... Thank you .......

 

[marcick]

Ok, I'm in the right direction.
I have 5 bar "button" that are panels containing two label. The top label is a material icon and the bottom label is text.
Now when the device is rotated in landscape, I have to rearrange the size of the panels and the position of the labels (side by side and not one under the other).
I'm managing this in the Page_Resize event.

This works perfect in the test app I attach here.

but when I trasnfer the code inside my real app, the behaviour is wrong.
If I run step by step in the resize event, I see the five elements are rearranged as I want with the labels side by side, but when the event is terminated the elements turn back to the original format (and the bottom label is only partially visible because the height of the BottomBar is lower when the device is in landscape)

I can't understand where is the difference from the test app and the real app.

I attach the zip. May I know at least if the code is correct ?

 

[marcick]

Edit: in the page_resize event, I have started a timer 100mS and when it generate the event (after it exits the page_resize event) I rearrange the button bar elements.
It works, I don't know if it can be considered correct and safe.