Android Code Snippet TabStripViewPager with FontAwesome / Material Icons

Widget · Dec 27, 2016

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

Erel · Dec 28, 2016

The TabStripViewPager is a custom view. All custom views show the text style properties, however TabStripViewPager currently doesn't use it.

Widget said:
It seems like a lot of unnecessary work.

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

Widget · Dec 28, 2016

Erel said:
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 · Jan 22, 2017

Erel said:
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)

Erel · Jan 23, 2017

See the tutorial: https://www.b4x.com/android/forum/threads/b4x-fontawesome-material-icons-fonts.72908/

KingEdem · Jan 23, 2017

Erel said:
See the tutorial: https://www.b4x.com/android/forum/threads/b4x-fontawesome-material-icons-fonts.72908/

Hi Erel,

I think, I am missing something very simple and silly ... I am still not able to find the method to get this: "Chr(0xF17B)" .....

Mahares · Jan 23, 2017

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 · Jan 23, 2017

Mahares said:
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

Mahares said:
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 · Feb 8, 2017

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 · Feb 8, 2017

Seneca said:
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.

Erel · Feb 8, 2017

@Seneca you should always start a new thread for your questions. There is a workaround (not so simple) if you want to use material icons combined with other characters. Start a new thread and I'll explain.

Seneca · Feb 8, 2017

Thanks Widget for your comments.

Erel, I apologize.

Prosg · Feb 28, 2017

is it possible to add icon .png to tabstrip ?

Erel · Feb 28, 2017

Yes, with CSBuilder: https://www.b4x.com/android/forum/threads/76226/#content

Prosg · Feb 28, 2017

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

Erel · Feb 28, 2017

I see it too. You need to set it after the tabs are created:

B4X:

Dim lbl As Label = GetAllTabLabels(TabStrip1).Get(0)
lbl.Text = cs

Prosg · Feb 28, 2017

Ty it's working

Prosg · Mar 8, 2017

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 ?

Erel · Mar 9, 2017

Which text? Can you post a screenshot?

Android Code Snippet TabStripViewPager with FontAwesome / Material Icons

Widget

Well-Known Member

Erel

B4X founder

Widget

Well-Known Member

KingEdem

Member

Erel

B4X founder

KingEdem

Member

Mahares

Expert

KingEdem

Member

Seneca

Active Member

Widget

Well-Known Member

Erel

B4X founder

Seneca

Active Member

Prosg

Active Member

Erel

B4X founder

Prosg

Active Member

Erel

B4X founder

Prosg

Active Member

Prosg

Active Member

Erel

B4X founder

Similar Threads