Android Code Snippet [B4A] [XUI] Bottom Toolbar

​

I am planning to create a B4A and a B4i app with identical UI. I try to look in this forum if anyone has created a bottom toolbar (iOS-styled) for B4A but I just found this thread with no reply. So I created a quick one in B4A.

#Region  Project Attributes
   #ApplicationLabel: B4A Bottom Toolbar Example
   #VersionCode: 2
   #VersionName:
   'SupportedOrientations possible values: unspecified, landscape or portrait.
   #SupportedOrientations: unspecified
   #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
   #FullScreen: False
   #IncludeTitle: True
#End Region

Sub Process_Globals
   
End Sub

Sub Globals
   Dim xui As XUI
   Dim xlbl As B4XView
   Dim Button1 As Label
   Dim Button2 As Label
   Dim Button3 As Label
   Dim Button4 As Label
   Dim Button5 As Label
   Dim const ACTIVE_COLOR As Int = Colors.White
   Dim const INACTIVE_COLOR As Int = Colors.RGB(105, 105, 105)
End Sub

Sub Activity_Create(FirstTime As Boolean)
   Dim Panel1 As Panel
   Panel1.Initialize("")
   Panel1.Color = Colors.RGB(128, 128, 128)
   
   Button1.Initialize("Button1")
   Panel1.AddView(Button1, 0, 10dip, 60dip, 60dip)
       
   Button2.Initialize("Button2")
   Panel1.AddView(Button2, (100%x / 5), 10dip, 60dip, 60dip)
 
   Button3.Initialize("Button3")
   Panel1.AddView(Button3, (100%x / 5) * 2, 10dip, 60dip, 60dip)
 
   Button4.Initialize("Button4")
   Panel1.AddView(Button4, (100%x / 5) * 3, 10dip, 60dip, 60dip)
 
   Button5.Initialize("Button5")
   Panel1.AddView(Button5, (100%x / 5) * 4, 10dip, 60dip, 60dip)
   
   Activity.AddView(Panel1, 0, 100%y - 60dip, 100%x, 60dip)
 
   CreateLabel(Button1, Chr(0xF006), "Featured")
   CreateLabel(Button2, Chr(0xF002), "Search")
   CreateLabel(Button3, Chr(0xF01D), "My Courses")
   CreateLabel(Button4, Chr(0xF08A), "Wishlist")
   CreateLabel(Button5, Chr(0xF2BE), "Account")
 
   Button1_Click
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub CreateLabel(Label As Label, Text1 As String, Text2 As String) As B4XBitmap
   Dim cs As CSBuilder
   cs.Initialize.Typeface(Typeface.FONTAWESOME).Size(30).Append(Text1).Pop.Append(CRLF).Size(10).Append(Text2).Alignment("ALIGN_CENTER").PopAll
   xlbl = Label
   xlbl.Text = cs
   xlbl.TextColor = xui.Color_RGB(105, 105, 105)
   Return xlbl.Snapshot
End Sub

Sub Button1_Click
   SetActiveButtonColor(Button1)
End Sub

Sub Button2_Click
   SetActiveButtonColor(Button2)
End Sub

Sub Button3_Click
   SetActiveButtonColor(Button3)
End Sub

Sub Button4_Click
   SetActiveButtonColor(Button4)
End Sub

Sub Button5_Click
   SetActiveButtonColor(Button5)
End Sub

Sub SetActiveButtonColor(View As Label)
   For Each button As Label In Array As Label(Button1, Button2, Button3, Button4, Button5)
       If button = View Then
           button.TextColor = ACTIVE_COLOR
       Else
           button.TextColor = INACTIVE_COLOR
       End If
   Next
End Sub

Update: Cleanup code. Implement DRY with SetActiveButtonColor.

Project is attached.

 

[aeric]

Apologize for not attach the project. Post #1 is now updated.

Thought: I try to play around if I can make it using B4J but unfortunately, CSBuilder is not yet available for B4J.

 

[jahswant]

Thanks. Try implement it as custom-view.

 

[aeric]

Thanks. Try implement it as custom-view.

You're welcome. I am not sure how to implement it as custom-view. Maybe you can help.

 

[jahswant]

Please read this

 

[aeric]

Please read this

OK, I will check out the details. However if I implement it as custom view, it is still specific to one platform, the bas module for B4A is not usable in B4J right?

 

[jahswant]

XUI is cross platform. Just implement the best practices by @Erel.

 

[aeric]

Clean up my code. Instead of repeating code for each button click event, I just use a method.

Old:

Sub Label1_Click
   Label1.TextColor = Colors.White
   Label2.TextColor = Colors.RGB(105, 105, 105)
   Label3.TextColor = Colors.RGB(105, 105, 105)
   Label4.TextColor = Colors.RGB(105, 105, 105)
   Label5.TextColor = Colors.RGB(105, 105, 105)
End Sub

Update:

Sub Button1_Click
   SetActiveButtonColor(Button1)
End Sub

Note: I have also renamed Label1 to Button1.

 

[Mashiane]

This is some cool ish... instead of having a number of pre defined buttons, eg 5 try and.make it flexible so that one can add a number of buttons on demand.

All the best...

 

[aeric]

This is some cool ish... instead of having a number of pre defined buttons, eg 5 try and.make it flexible so that one can add a number of buttons on demand.

All the best...

Thanks. Welcome everyone to update this code. I just make it as simple as possible.

 

[aeric]

I try with 2 buttons.

#Region  Project Attributes
    #ApplicationLabel: B4A Bottom Toolbar Example
    #VersionCode: 3
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
        
End Sub

Sub Globals
    Dim xui As XUI
    Dim xlbl As B4XView
    Dim Toolbar1 As Panel
    Dim Button1 As Label
    Dim Button2 As Label
'    Dim Button3 As Label
'    Dim Button4 As Label
'    Dim Button5 As Label
    Dim const Buttons As Int = 2 ' Number of buttons
    Dim const ACTIVE_COLOR As Int = Colors.White
    Dim const INACTIVE_COLOR As Int = Colors.RGB(105, 105, 105)
End Sub

Sub Activity_Create(FirstTime As Boolean)   
    Toolbar1.Initialize("")
    Toolbar1.Color = Colors.RGB(128, 128, 128)               
    Activity.AddView(Toolbar1, 0, 100%y - 60dip, 100%x, 60dip)   
    CreateButton(Toolbar1, Button1, "Button1", 0, Chr(0xF006), "Featured")
    CreateButton(Toolbar1, Button2, "Button2", 1, Chr(0xF002), "Search")
'    CreateButton(Toolbar1, Button3, "Button3", 2, Chr(0xF01D), "My Courses")
'    CreateButton(Toolbar1, Button4, "Button4", 3, Chr(0xF08A), "Wishlist")
'    CreateButton(Toolbar1, Button5, "Button5", 4, Chr(0xF2BE), "Account")   
    Button1_Click
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub CreateButton(pnlToolbar As Panel, lblButton As Label, strEventName As String, Index As Int, Text1 As String, Text2 As String) As B4XBitmap
    Dim cs As CSBuilder
    cs.Initialize.Typeface(Typeface.FONTAWESOME).Size(30).Append(Text1).Pop.Append(CRLF).Size(10).Append(Text2).Alignment("ALIGN_CENTER").PopAll   
    lblButton.Initialize(strEventName)
    pnlToolbar.AddView(lblButton, (100%x / Buttons) * Index, 10dip, 100%x / Buttons, 60dip)
    xlbl = lblButton
    xlbl.Text = cs
    xlbl.TextColor = xui.Color_RGB(105, 105, 105)
    Return xlbl.Snapshot
End Sub

Sub Button1_Click
    SetActiveButtonColor(Button1)
End Sub

Sub Button2_Click
    SetActiveButtonColor(Button2)
End Sub

'Sub Button3_Click
'    SetActiveButtonColor(Button3)
'End Sub
'
'Sub Button4_Click
'    SetActiveButtonColor(Button4)
'End Sub
'
'Sub Button5_Click
'    SetActiveButtonColor(Button5)
'End Sub

Sub SetActiveButtonColor(View As Label)
    For Each button As Label In Array As Label(Button1, Button2) ', Button3, Button4, Button5)
        If button = View Then
            button.TextColor = ACTIVE_COLOR
        Else
            button.TextColor = INACTIVE_COLOR
        End If
    Next
End Sub