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+.

 

[Erel]

PageSelected is the only event available. It fires when the current page changes.

 

[RichardHirst]

Hello...

Is it possible to Hide the Tabs, so the panel covers all the screen but still slides between each panel..?

Thanks

Richard

 

[MarcoRome]

Hello...

Is it possible to Hide the Tabs, so the panel covers all the screen but still slides between each panel..?

Thanks

Richard

Try to put everything with transparency

 

[RichardHirst]

Would this allow the Panel to fill the Tabs spaces..?

 

[MarcoRome]

Would this allow the Panel to fill the Tabs spaces..?

Look example this picture.

You see Relaxation and Atmosphere - Nature because is white colore, if you insert nothing ( "" ) you have that "Tabs is Hide"

 

[RichardHirst]

OK thanks for the help.. I reduced the TabHeight to zero. Don't know how I missed this one.

Then added this to the Manifest
SetActivityAttribute(Main, android:theme, @android:style/Theme.Black.NoTitleBar)

Full screen, no Tabs or Title bar.

 

[ilan]

i want to use only 2 tabs, can i center them??
now both are aligned to the left.

thanx

(this is my issue: http://stackoverflow.com/questions/...-with-two-categories-equally-fit-in-screen-an)

 

[Erel]

Add this code at the end of Activity_Create:

For Each lbl As Label In GetAllTabLabels(TabStrip1)
   lbl.Width = 50%x
Next

GetAllTabLabels: https://www.b4x.com/android/forum/t...ger-better-viewpager.63975/page-2#post-408977

 

[ilan]

Add this code at the end of Activity_Create:

For Each lbl As Label In GetAllTabLabels(TabStrip1)
   lbl.Width = 50%x
Next

GetAllTabLabels: https://www.b4x.com/android/forum/t...ger-better-viewpager.63975/page-2#post-408977

thank you very much @Erel

 

[miquelr]

Hi What is the best pager library for later portability to B4i?

 

[miquelr]

'What is the best library for later portability B4i'
For portability of app, not library, of course.

 

[Erel]

Choose whichever one best suits your Android app.

In B4i you have three options for a similar (not exact) UI:
TabBarController (no swiping): see in beginner's guide
PageViewController: PageViewController
Paging based on ScrollView with an indicator: https://www.b4x.com/android/forum/threads/paging-indicator-for-scrollview.66094/#post-418594

 

[ilan]

hi

is it possible to change the indicator color in runtime?

 

[Erel]

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

 

[ilan]

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

i am getting "Unknown Type Object, are you missing a library reference?"

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

 

[asales]

i am getting "Unknown Type Object, are you missing a library reference?"

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

Uses "jo.GetFieldJO" intead of "jo.GetField"

 

[ilan]

Uses "jo.GetFieldJO" intead of "jo.GetField"

thanx, it is working now

 

[trueboss323]

I would like to make my TabStrip integrate with my actionbar. Is there anyway I can disable that shadow between the TSVP and the actionbar? So the whole thing is in 1 color.

 

[aarroyo]

When I have more than 20 tabs , load the pager only the first 11 , how you could access panels all tabs ?

 

[Erel]

Is there anyway I can disable that shadow between the TSVP and the actionba

https://www.b4x.com/android/forum/threads/remove-material-action-bar-shadow.67640/

When I have more than 20 tabs , load the pager only the first 11 , how you could access panels all tabs ?

I'm unable to reproduce it. I loaded 30 pages and they all appeared in the tab strip.