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

Alexander Stolte · Apr 23, 2020

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

ASTabStrip 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

B4X:

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_ · Apr 23, 2020

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

B4X:

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 · Apr 23, 2020

Make sure to have all libs. you need:

Alexander Stolte said:
B4j: jXUI,JavaObject,xCustomListView,jReflection

angel_ · Jul 6, 2020

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

Alexander Stolte · Jul 6, 2020

B4X:

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

angel_ · Jul 6, 2020

Alexander Stolte said:
B4X:

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

Thank you for these great libraries

Alexander Stolte · Jul 6, 2020

Togo said:
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_ · Jul 19, 2020

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 · Jul 19, 2020

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_ · Jul 20, 2020

Alexander Stolte said:
This has nothing to do with this lib. this is the AS Tab Menu.

You are right, maybe @Erel can move it

Alexander Stolte said:
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 · Jul 20, 2020

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

angel_ · Jul 20, 2020

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 · Jul 20, 2020

angel_ said:
The only problem I have is blurry text in B4i.

B4X:

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 · Jul 20, 2020

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_ · Jul 22, 2020

Alexander Stolte said:
B4X:

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

B4X:

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_ · Jul 22, 2020

Alexander Stolte said:
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 · Jul 22, 2020

angel_ said:
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 · Jul 23, 2020

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 · Jul 23, 2020

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

Alexander Stolte · Jul 23, 2020

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

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

Expert

Attachments

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Attachments

Expert

Well-Known Member

Expert

Well-Known Member

Attachments

Expert

Expert

Well-Known Member

Well-Known Member

Expert

Expert

Well-Known Member

Expert

Privacy & Transparency

Privacy & Transparency