Android Tutorial TabStripViewPager - Better ViewPager

Erel · Feb 25, 2016

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:

B4X:

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

B4X:

'********* 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:

B4X:

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

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

Erel · Apr 20, 2016

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

RichardHirst · Apr 26, 2016

Hello...

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

Thanks

Richard

MarcoRome · Apr 26, 2016

RichardHirst said:
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 · Apr 27, 2016

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

MarcoRome · Apr 27, 2016

RichardHirst said:
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 · Apr 29, 2016

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 · May 5, 2016

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 · May 7, 2016

Add this code at the end of Activity_Create:

B4X:

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 · May 7, 2016

Erel said:
Add this code at the end of Activity_Create:

B4X:

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 · May 10, 2016

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

miquelr · May 10, 2016

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

Erel · May 10, 2016

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 · May 12, 2016

hi

is it possible to change the indicator color in runtime?

Erel · May 12, 2016

B4X:

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

ilan · May 12, 2016

Erel said:

B4X:

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?"

B4X:

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

asales · May 12, 2016

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

B4X:

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

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

ilan · May 12, 2016

asales said:
Uses "jo.GetFieldJO" intead of "jo.GetField"

thanx, it is working now

trueboss323 · Jun 7, 2016

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 · Jun 7, 2016

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

Erel · Jun 7, 2016

trueboss323 said:
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/

aarroyo said:
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.

Android Tutorial TabStripViewPager - Better ViewPager

Attachments

B4X founder

Member

Expert

Member

Expert

Member

Expert

B4X founder

Expert

Member

Member

B4X founder

Expert

B4X founder

Expert

Expert

Expert

Active Member

Member

B4X founder

Similar Threads

Privacy & Transparency

Privacy & Transparency