[B4X] [XUI] AS TabStrip (ASViewPager + ASTabMenu)

[Alexander Stolte]

Hello,
this is a helper class to make it easier to create a tabstrip from the ASViewPager and ASTabMenu.

Important
You need ASTabMenu V1.13+

I spend a lot of time in creating views, some views i need by my self, but some views not and to create a high quality view cost a lot of time. If you want to support me, then you can do it here by Paypal.

Features

• All features of the ASTabMenu View
• All features of the ASViewPager View
• all events
• easy to use

Result:

Tutorial:

• Step 1
  • Add the ASTabMenu on top
  • Add the ASViewPager under the ASTabMenu
  • look on the image below
  • 
• Step 2
  • Initialize the ASTabStrip class
    • ASTabStrip1.Initialize(ASTabMenu1,ASViewPager1)
• Step 3
  • Add Pages
    • For i = 0 To 5
      Dim tmp_xpnl As B4XView = xui.CreatePanel("")
      tmp_xpnl.Color = xui.Color_ARGB(255,Rnd(1,255),Rnd(1,255),Rnd(1,255))
      tmp_xpnl.SetLayoutAnimated(0,0,0,ASViewPager1.CustomListView.GetBase.Width,ASViewPager1.CustomListView.GetBase.Height)
      ASTabStrip1.AddPage(xui.Color_ARGB(255,39, 174, 97),"Tab " & i,ASTabMenu1.FontToBitmap(Chr(0xF015),False,30,xui.Color_White),"",tmp_xpnl,"")
          Next
• Step 4
  • Add the ASViewPager PageChanged event
  • Add the ASTabMenu TabClick event
  • Sub ASViewPager1_PageChanged(Index As Int)
    ASTabStrip1.ViewPager_PageChanged(Index)
    End Sub
    
    Sub ASTabMenu1_TabClick(index As Int)
    ASTabStrip1.TabMenu_TabClick(index)
    End Sub
• Done

ASTabStrip
Author: Alexander Stolte
Version: 1.00

• ASTabStrip
  • Functions:
    • AddPage (tab_background_color As Int, tab_text As String, tab_icon As B4XBitmap, tab_tag As Object, pager_layout As B4XView, pager_value As Object) As String
    • Initialize (TabMenu As com.as.tabstrip.astabmenu, ViewPager As com.as.tabstrip.asviewpager) As String
      Initializes the object. You can add parameters to this method if needed.
    • IsInitialized As Boolean
      Tests whether the object has been initialized.
    • RemovePage (index As Int) As String
    • TabMenu_TabClick (index As Int) As String
    • ViewPager_PageChanged (index As Int) As String

Changelog

• V1.0
  • Release

Have Fun

 

[angel_]

I was trying to reproduce the example in B4J but this error appears:

B4J Version: 8.10
Java Version: 8
Parsing code.    Error
Error parsing program.
Error description: Unknown type: reflector
Are you missing a library reference?
Error occurred on line: 76 (ASViewPager)
Dim r As Reflector

 

[Alexander Stolte]

Make sure to have all libs. you need:

B4j: jXUI,JavaObject,xCustomListView,jReflection

 

[angel_]

I would like to show only icons or text in the Tab, I use Null as parameter but it does not work

 

[Alexander Stolte]

'style icons
 ASTabMenu_horizontal.TabStyle = "Icon"
 ASTabMenu_horizontal.CommitChange

 

[angel_]

'style icons
ASTabMenu_horizontal.TabStyle = "Icon"
ASTabMenu_horizontal.CommitChange

Thank you for these great libraries

 

[Alexander Stolte]

Please is it possible to set the tab underline to be exactly on tht foot of the title bar like in the tabstrip viewpager?

No.

 

[angel_]

I am very satisfied with these libraries, they are an excellent cross plattform alternative for TabStrip, but I have small problems that maybe can be solved

The tab accepts text and icons if entered as csbuilder (B4A) but does not work in B4i, In B4J I can't mix icons and text come out misaligned. Icons in B4A and B4J are sharp, in B4i they are blurred

[B4A]

[B4i]

[B4J]

If the too long text does not cut it into a single line as B4i does correctly but the underline of the tab overlaps the adjacent tab

[B4A]

[B4i]

 

[Alexander Stolte]

This has nothing to do with this lib. this is the AS Tab Menu.
Why do you using CSBuilder? the ASTabMenu can display Text and Icons without CSBuilder.

 

[angel_]

This has nothing to do with this lib. this is the AS Tab Menu.

You are right, maybe @Erel can move it

Why do you using CSBuilder? the ASTabMenu can display Text and Icons without CSBuilder.

I use csbuilder to do this (only works en B4i) and TabMenu.TabStyle = "Icon", I don't know how do it en B4i and B4J

 

[Alexander Stolte]

if you can create a sample project with this issue, then i can look where is the problem. Thanks.

 

[angel_]

I had a function in a static module and I changed it to class and solved the problems of underline and text truncation in B4A. If you know of a better alternative for including icons and text on the tab I'd like to try it out for B4A, B4i and B4J.

The only problem I have is blurry text in B4i.

 

[Alexander Stolte]

The only problem I have is blurry text in B4i.

ASTabMenu1.FontToBitmap(Texto_a_cs("AAAAAAAAAAAAAAAA")

did you know what the function FontToBitmap is doing?
This function converts FontAwesome and MaterialIcons to a image, but not text!

FontAwesome To Bitmap

Unlike an older "TextToBitmap" sub that you can find in the forum, this code vertically centers the icon. It can also be used in B4J and B4i (only need to change the font line). Sub Activity_Create(FirstTime As Boolean) 'usage example Activity.AddMenuItem3("Android", "Test"...

www.b4x.com

 

[Alexander Stolte]

The problem is, the imageview what holds the icons has a fixed size, if you want text and image, then change the Tab Style on ASTabMenu to text and try to convert the icons with the csbuilder to text. But I have no idea if this is gonna work

 

[angel_]

ASTabMenu1.FontToBitmap(Texto_a_cs("AAAAAAAAAAAAAAAA")

did you know what the function FontToBitmap is doing?
This function converts FontAwesome and MaterialIcons to a image, but not text!

FontAwesome To Bitmap

Unlike an older "TextToBitmap" sub that you can find in the forum, this code vertically centers the icon. It can also be used in B4J and B4i (only need to change the font line). Sub Activity_Create(FirstTime As Boolean) 'usage example Activity.AddMenuItem3("Android", "Test"...

www.b4x.com

I have modified the function so you can use any font

Public Sub FontToBitmap (text As String, Fuente As B4XFont, FontSize As Float, color As Int) As B4XBitmap
    Dim xui As XUI
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, 32dip, 32dip)
    Dim cvs1 As B4XCanvas
    cvs1.Initialize(p)
    Dim fnt As B4XFont = Fuente
    Dim r As B4XRect = cvs1.MeasureText(text, fnt)
    Dim BaseLine As Int = cvs1.TargetRect.CenterY - r.Height / 2 - r.Top
    cvs1.DrawText(text, cvs1.TargetRect.CenterX, BaseLine, fnt, color, "CENTER")
    Dim b As B4XBitmap = cvs1.CreateBitmap
    cvs1.Release
    Return b
End Sub

 

[angel_]

The problem is, the imageview what holds the icons has a fixed size, if you want text and image, then change the Tab Style on ASTabMenu to text and try to convert the icons with the csbuilder to text. But I have no idea if this is gonna work

That I can't use tab with texts and icons is a small problem, but this is solved with the previous code, but in B4i it looks blurry (in B4A and B4J it looks good) and it's ugly, and I can't find a solution for this

 

[Alexander Stolte]

in B4i it looks blurry (in B4A and B4J it looks good) and it's ugly, and I can't find a solution for this

best is to make an example project with a label, create the text and load it in and create a new thread for the problem.

 

[Alexander Stolte]

New Update for the ASTabMenu, it adds a new feature for this lib.
1.13

• Add Support for Icons or Text mixed
• Add TabStripMode - if true, then the underline width/height is the full tab

 

[jahswant]

Please seems like the baseview.enable = false works only in b4j how to disable the view ?

 

[Alexander Stolte]

Please seems like the baseview.enable = false works only in b4j how to disable the view ?

Wich view? ASTabMenu or ASViewPager?

For the future: Please make a new thread for your problems. Thanks