Android Tutorial TabStripViewPager - Better ViewPager

This library is based on the following open source project: https://github.com/astuetz/PagerSlidingTabStrip
License: http://www.apache.org/licenses/LICENSE-2.0

It is an alternative to StdViewPager. It is simpler to use and looks better.
It is implemented as a custom view. It requires B4A v5.8+.

It is very simple to add a TabStrip to your app.

Add the TabStrip with the visual designer and configure it:

Note the usage of anchors to fill the available space.

Create a layout file for each page. Again use anchors to fill the available space:

Load the main layout and then add pages with a call to TabStrip.LoadLayout:

Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("Main")
   TabStrip1.LoadLayout("Page1", "PAGE 1")
   TabStrip1.LoadLayout("Page2", "THIS IS PAGE 2")
   TabStrip1.LoadLayout("Page3", "AND PAGE 3")
End Sub

Add the following text to the manifest editor (it creates the short press effect):

'********* TabStrip ***********************
CreateResource(drawable, background_tab.xml,
<selector xmlns:android="http://schemas.android.com/apk/res/android"
   android:exitFadeDuration="@android:integer/config_shortAnimTime">
  <item android:state_pressed="true" android:drawable="@color/background_tab_pressed" />
  <item android:state_focused="true" android:drawable="@color/background_tab_pressed"/>
  <item android:drawable="@android:color/transparent"/>
</selector>)
CreateResource(values, colors.xml,
<resources>
  <color name="background_tab_pressed">#6633B5E5</color>
</resources>)
'******************************************

If you are using B4A v6+ then you should add this line:

#AdditionalJar: com.android.support:support-v4

As Android support library requires Android 4+ (API level 14+), TabStripViewPager also requires Android 4+.

 

[jazzzzzzz]

I have 2 tabs in my tabstrip,I need the spacing between the tab names exactly as half,how can I do it?
Now the top bar is divded as length of tab name i think.but i need it as exactly half of device width irespective of display size ,like we give width of view as 50%x. As show in the attachment

 

[jazzzzzzz]

I have 2 tabs in my tabstrip,I need the spacing between the tab names exactly as half,how can I do it?
Now the top bar is divded as length of tab name i think.but i need it as exactly half of device width irespective of display size ,like we give width of view as 50%x. As show in the attachment

never mind,found the link

I think @Erel must add all this kind of code snippet links in main page itself.
https://www.b4x.com/android/forum/t...ger-better-viewpager.63975/page-4#post-421797

 

[beeblomarv]

Dim jo As JavaObject = tabstrip
jo.GetField("tabStrip").RunMethod("setIndicatorColor", Array(Colors.Red))

How to change the width* of Indicator! I mean how to make it wide or narrow?Just the width not the length -

 

[beeblomarv]

I have 2 tabs in my tabstrip,I need the spacing between the tab names exactly as half,how can I do it?
Now the top bar is divded as length of tab name i think.but i need it as exactly half of device width irespective of display size ,like we give width of view as 50%x. As show in the attachment

Your indicator size is different! How did you manage to do that?

 

[Erel]

Please start a new thread for this question.

 

[beeblomarv]

Please start a new thread for this question.

I already did it :/

 

[bjf]

How do you remove the tabstrip when in the same layout?
I populate it with 3 tabs in a search function.
Then if i go back to do another search it will populate the sam tabstrip with 3 ADDITIONAL tabs, not new ones.

I can't have the tabstrip in an separate layout due to problems displaying labels and text when i return from the separate layout.

 

[Erel]

Please start a new thread for this question.

 

[wizard699]

Erel, I can't explore my tabscript with this code

TabStrip1.LoadLayout("lay_tabpagella_1", "Prove")

Dim jo As JavaObject = TabStrip1
Dim r AsReflector
r.Target = jo.GetField("tabStrip")
Dim tc AsPanel = r.GetField("tabsContainer")

Dim res AsList
res.Initialize

For Each v As View In tc
msgbox(v.tag, "test")
Next

lay_tabpagella_1 contains one Panel and a UltimateListView

What's wrong???
Thanks

 

[Erel]

Please start a new thread for this question and make sure to use code tags.

 

[achtrade]

how to add label and edittext to Page2 layout with code?

 

[Erel]

1. Create a layout file with a panel.
2. Load the layout with TabStrip.LoadLayout.
3. Add views to the panel.

 

[JLS]

I'm trying to use the FontAwesome and Material Icons fonts, but I'unable.

I select them in the designer screen and I use TabStrip1.LoadLayout("01", "" & Chr(0xF063)) to set the icon, but nothing appears.

How could I do that.

Thanks in advance.

 

[Erel]

Here: https://www.b4x.com/android/forum/threads/tabstripviewpager-with-fontawesome-material-icons.73885/

 

[JLS]

Great!

Thank you very much.

 

[ilan]

hi

when i set the background color of the labels (tabstrip page title) then i dont see an indicator.
what can i do to see the indicator?

thanx

ps: this is my code

    Dim jo As JavaObject = TabStrip1
    Dim offset As Int = 33%x
    jo.GetFieldJO("tabStrip").RunMethod("setScrollOffset", Array(offset))
    jo.GetFieldJO("tabStrip").RunMethod("setIndicatorColor", Array(Colors.White))
   
    For Each v As View In GetAllTabLabels(TabStrip1)
       v.Width = 33%x
       Dim lbl As Label = v
       lbl.Gravity = Gravity.CENTER
       lbl.TextSize = 14
       lbl.Color = Colors.RGB(52,152,219)
       lbl.TextColor = Colors.White
    Next

 

[Erel]

Please start a new thread for this question. If possible also include the project.

 

[MARCOS SANDRONI LIMA RIOS]

not found theme.xml in example
res\values-v20\theme.xml:3: error: Error retrieving parent for item: No resource found that matches the given name '@android:style/Theme.Material.Light'.

 

[MarcoRome]

not found theme.xml in example
res\values-v20\theme.xml:3: error: Error retrieving parent for item: No resource found that matches the given name '@android:style/Theme.Material.Light'.

Hi. When you post error pls write more details.
What use example in #1 ?
Log Error ?

 

[Erel]

not found theme.xml in example
res\values-v20\theme.xml:3: error: Error retrieving parent for item: No resource found that matches the given name '@android:style/Theme.Material.Light'.

You need to use a more recent version of android.jar (Tools - Configure Paths).