Android Code Snippet TabStripViewPager with FontAwesome / Material Icons

upload_2016-12-7_7-41-22.png


Step 1: Add a label named lblFontAwesome with the designer. Set its Typeface to FontAwesome and make it invisible.

Step 2: Use the code editor Icon Picker to add the icons (right click to find it):

B4X:
TabStrip1.LoadLayout("Page1", "iOS " & Chr(0xF179))
TabStrip1.LoadLayout("Page2", "Android " & Chr(0xF17B))
TabStrip1.LoadLayout("Page3", "Windows " & Chr(0xF17A))
TabStrip1.LoadLayout("Page4", "" & Chr(0xF061))

Step 3: Set the typeface of the TabStrip header labels to FontAwesome:
B4X:
For Each lbl As Label In GetAllTabLabels(TabStrip1)
   lbl.Typeface = Typeface.FONTAWESOME
Next

Code for GetAllTabLabels is available here: https://www.b4x.com/android/forum/t...ger-better-viewpager.63975/page-2#post-408977
It depends on JavaObject and Reflection libraries.
 
Last edited:

Widget

Well-Known Member
Licensed User
Longtime User
TabStripFont.png

Adding icons to the TabStrip makes it look really professional. :)

But I'm not sure why we need to create a label lblFontAwesome and then assign its TypeFace to the TabStrip labels using GetAllTabLabels, because TabStrip already has a default TypeFace defined. See the image. It seems like a lot of unnecessary work.

Or is the TabStrip default Text Style.Typeface used for something else?

TIA
 

Widget

Well-Known Member
Licensed User
Longtime User
The TabStripViewPager is a custom view. All custom views show the text style properties, however TabStripViewPager currently doesn't use it.


I don't think that it will take you more than 20 seconds to do it.

Well, I just thought I'd ask because the typeface was already available as a property in the TabStripViewPager so it could be defined in the Designer and initialized with the Activity.LoadLayout or Panel.LoadLayout without relying on extra code to do it. Just trying to keep things simple and more encapsulated.
 

KingEdem

Member
Licensed User
Longtime User
View attachment 50754

Step 1: Add a label named lblFontAwesome with the designer. Set its Typeface to FontAwesome and make it invisible.

Step 2: Use the code editor Icon Picker to add the icons (right click to find it):

B4X:
TabStrip1.LoadLayout("Page1", "iOS " & Chr(0xF179))
TabStrip1.LoadLayout("Page2", "Android " & Chr(0xF17B))
TabStrip1.LoadLayout("Page3", "Windows " & Chr(0xF17A))
TabStrip1.LoadLayout("Page4", "" & Chr(0xF061))

Step 3: Set the typeface of the TabStrip header labels to FontAwesome:
B4X:
For Each lbl As Label In GetAllTabLabels(TabStrip1)
   lbl.Typeface = lblFontAwesome.Typeface
Next

Code for GetAllTabLabels is available here: https://www.b4x.com/android/forum/t...ger-better-viewpager.63975/page-2#post-408977
It depends on JavaObject and Reflection libraries.

Hi Erel,

Please provide screenshot of doing this (How do we get this value "Chr(0xF179)" ?):
Step 2: Use the code editor Icon Picker to add the icons (right click to find it)
 

Mahares

Expert
Licensed User
Longtime User
I think this is what you want:
1. Suppose youhave a button2 created in Designer and dimmed in IDE.
2. In the Designer you must first select the typeface of Button2 to be: FontAwesome
3. In IDE you right click and choose 'Icon Picker'
4. Click on an icon, say the 'Bell'
5. You type this in IDE: Button2.Text =
6. Right click and select 'Paste' next to the = sign. You will see this: Chr(0xF0F3)
7. The full line will look like this: Button2.Text=Chr(0xF0F3)
 

KingEdem

Member
Licensed User
Longtime User
I think this is what you want:
1. Suppose youhave a button2 created in Designer and dimmed in IDE.
2. In the Designer you must first select the typeface of Button2 to be: FontAwesome
3. In IDE you right click and choose 'Icon Picker'
4. Click on an icon, say the 'Bell'
5. You type this in IDE: Button2.Text =
6. Right click and select 'Paste' next to the = sign. You will see this: Chr(0xF0F3)
7. The full line will look like this: Button2.Text=Chr(0xF0F3)

Thanks
I think this is what you want:
1. Suppose youhave a button2 created in Designer and dimmed in IDE.
2. In the Designer you must first select the typeface of Button2 to be: FontAwesome
3. In IDE you right click and choose 'Icon Picker'
4. Click on an icon, say the 'Bell'
5. You type this in IDE: Button2.Text =
6. Right click and select 'Paste' next to the = sign. You will see this: Chr(0xF0F3)
7. The full line will look like this: Button2.Text=Chr(0xF0F3)

Thanks a lot Mahares! I got that. :)
 

Seneca

Active Member
Licensed User
Hi,

Does the MaterialIcons font not include numbers?

B4X:
lblFontAwesome.Text = Chr(0xF0A2) & " A1 B2 C3" 'Numbers are shown
lblMaterialIcons.Text = Chr(0xE0B0)  & " A1 B2 C3"   'Numbers are not shown

Best regards.
 

Widget

Well-Known Member
Licensed User
Longtime User
Hi,

Does the MaterialIcons font not include numbers?

B4X:
lblFontAwesome.Text = Chr(0xF0A2) & " A1 B2 C3" 'Numbers are shown
lblMaterialIcons.Text = Chr(0xE0B0)  & " A1 B2 C3"   'Numbers are not shown

Best regards.

Correct. I discovered a few days ago that Material Icons will only display Latin characters if they are in UPPER CASE. And numbers are NOT in upper case so they are treated as lowercase letters and it will display a space instead of the number (or lowercase letter). So if the text is "A1B2" you will see "A B " with MateiralIcons typeface. The FontAwesome will display numbers and lowercase letters just fine.

I don't know why MaterialIcons is like this. It certainly restricts its usefulness. The only way around it is to draw the MaterialIcon icon onto the canvas and then switch to a different Typeface and draw the text next to it. It makes things soooo much harder than FontAwesome which allows you to easily mix text with its icons.
 

Prosg

Active Member
Licensed User
Longtime User
i try with this and the icon appear on the activity title but not in the Tab

B4X:
Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Main")
    cs.Initialize.Size(30).Typeface(Typeface.MONOSPACE)
    cs.Append("B4A: ").Image(LoadBitmap(File.DirAssets, "tabAccueil.png"), 20dip, 20dip, False).Append(CRLF)
    cs.PopAll
  

    TabStrip1.LoadLayout("Page1", cs )
    TabStrip1.LoadLayout("Page2", "THIS IS PAGE 2")
    TabStrip1.LoadLayout("Page3", "AND PAGE 3")
    For i = 1 To 100
        Page3ListView1.AddSingleLine($"Item ${i}"$)
    Next
    Activity.AddMenuItem("Jump to page 1", "mnu1")
    Activity.AddMenuItem("Jump to page 2", "mnu2")
    Activity.AddMenuItem("Jump to page 3", "mnu3")
  

    Activity.Title = cs
  
    For Each lbl As Label In GetAllTabLabels(TabStrip1)
        lbl.Typeface = Typeface.MONOSPACE
    Next
End Sub

Public Sub GetAllTabLabels (tabstrip As TabStrip) As List
    Dim jo As JavaObject = tabstrip
    Dim r As Reflector
    r.Target = jo.GetField("tabStrip")
    Dim tc As Panel = r.GetField("tabsContainer")
    Dim res As List
    res.Initialize
    For Each v As View In tc
        If v Is Label Then res.Add(v)
    Next
    Return res
 
End Sub
 

Prosg

Active Member
Licensed User
Longtime User
One question

why if i do this :

B4X:
cs.Append("").Image(LoadBitmap(File.DirAssets, "tabAccueil.png"), 20dip, 20dip, True).Append(CRLF).Append("Accueil")

the text is not center bottom the icon ?
 
Top