Android Code Snippet TabStripViewPager with FontAwesome / Material Icons

Discussion in 'Code Snippets' started by Erel, Dec 7, 2016.

  1. Erel

    Erel Administrator Staff Member Licensed User

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

    Code:
    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:
    Code:
    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: Feb 22, 2017
  2. Widget

    Widget Well-Known Member Licensed 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
     
  3. Erel

    Erel Administrator Staff Member Licensed 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.
     
    aidymp and Peter Simpson like this.
  4. Widget

    Widget Well-Known Member Licensed User

    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.
     
    inakigarm likes this.
  5. KingEdem

    KingEdem Member Licensed User

    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)
     
  6. Erel

    Erel Administrator Staff Member Licensed User

  7. KingEdem

    KingEdem Member Licensed User

  8. Mahares

    Mahares Well Known Member Licensed 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 likes this.
  9. KingEdem

    KingEdem Member Licensed User

    Thanks
    Thanks a lot Mahares! I got that. :)
     
  10. Seneca

    Seneca Active Member Licensed User

    Hi,

    Does the MaterialIcons font not include numbers?

    Code:
    lblFontAwesome.Text = Chr(0xF0A2) & " A1 B2 C3" 'Numbers are shown
    lblMaterialIcons.Text = Chr(0xE0B0)  & " A1 B2 C3"   'Numbers are not shown
    Best regards.
     
  11. Widget

    Widget Well-Known Member Licensed User

    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.
     
    Seneca likes this.
  12. Erel

    Erel Administrator Staff Member Licensed User

    @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 likes this.
  13. Seneca

    Seneca Active Member Licensed User

    Thanks Widget for your comments.

    Erel, I apologize.
     
  14. Prosg

    Prosg Active Member Licensed User

    is it possible to add icon .png to tabstrip ?
     
  15. Erel

    Erel Administrator Staff Member Licensed User

  16. Prosg

    Prosg Active Member Licensed User

    i try with this and the icon appear on the activity title but not in the Tab

    Code:
    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"), 20dip20dipFalse).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
     
  17. Erel

    Erel Administrator Staff Member Licensed User

    I see it too. You need to set it after the tabs are created:
    Code:
    Dim lbl As Label = GetAllTabLabels(TabStrip1).Get(0)
    lbl.Text = cs
     
    Daniel Uribe likes this.
  18. Prosg

    Prosg Active Member Licensed User

    Ty it's working :)
     
  19. Prosg

    Prosg Active Member Licensed User

    One question

    why if i do this :

    Code:
    cs.Append("").Image(LoadBitmap(File.DirAssets, "tabAccueil.png"), 20dip20dipTrue).Append(CRLF).Append("Accueil")
    the text is not center bottom the icon ?
     
  20. Erel

    Erel Administrator Staff Member Licensed User

    Which text? Can you post a screenshot?
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice