Android Tutorial TabStripViewPager - Better ViewPager

Status
Not open for further replies.

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:

SS-2016-02-25_15.22.50.png


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:

SS-2016-02-25_15.24.22.png


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

Attachments

  • TabStripExample.zip
    10.9 KB · Views: 3,523
  • TabStripViewPager_Library.zip
    30.5 KB · Views: 2,708
Last edited:

RichardHirst

Member
Licensed User
Longtime User
Hello...

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

Thanks

Richard
 

RichardHirst

Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User

miquelr

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

Erel

B4X founder
Staff member
Licensed User
Longtime User

ilan

Expert
Licensed User
Longtime User
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))
 

trueboss323

Active Member
Licensed User
Longtime User
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

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

Erel

B4X founder
Staff member
Licensed User
Longtime User
Status
Not open for further replies.
Top