Android Code Snippet [B4A] [XUI] Bottom Toolbar

Bottom Toolbar Example.png

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.

B4X:
#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.
 

Attachments

  • Bottom Toolbar.zip
    8.4 KB · Views: 570
Last edited:

aeric

Expert
Licensed User
Longtime User
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. :(

Bottom Toolbar B4J.png
 

aeric

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

Old:
B4X:
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:
B4X:
Sub Button1_Click
   SetActiveButtonColor(Button1)
End Sub

Note: I have also renamed Label1 to Button1.
 

aeric

Expert
Licensed User
Longtime User
I try with 2 buttons.

B4X:
#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
 
Top