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

 

[MarcoRome]

You should use a semitransparent color (change it to #807BBA2B):

View attachment 42709

Thank for your response Erel. But again dont see Indicator
Anyway if i change the code in this mode :

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="@color/background_tab"/>
</selector>)
CreateResource(values, colors.xml,
<resources>
  <color name="background_tab_pressed">#6633B5E5</color>
  <color name="background_tab">#807BBA2B</color>
</resources>)

I have this result:

In Properties i have:

Thanks Again
Marco

 

[German Buchmuller]

Hi, I am new using B4A. I tried to run the example of tabstrip, but I couldnt. First, it said that I had to put the android-support-v4.jar file on the libraries of B4A. I didnt knew what was it about, soy I search "Download android-support-v4.jar" on google. I found a file whick contained that .jar and a license file. After Pasting it on the libraries folder, I run the app and It suddenly closes. It gives me some errors on "Logs". It says:java.lang.NoSuchMethodError: No virtual method setOffscreenPageLimit(I)V in class Landroid/support/v4/view/ViewPager; or its super classes (declaration of 'android.support.v4.view.ViewPager' appears in /data/app/b4a.example-1/base.apk)

Does Anybody knows what should I try? What Am I doing Wrong?
Thanks!

 

[u2005k]

Are you using B4A 5.8 version?

 

[Erel]

Does Anybody knows what should I try? What Am I doing Wrong?

You need to start Android SDK Manager and install the support library:

Then copy android-support-v4.jar to the additional libraries folder.

Thank for your response Erel. But again dont see Indicator

Can you start a new thread and upload your project?

 

[MarcoRome]

RESOLVED.
Well is possible ( with a few fantasy )
This is result:

This is simple, same example Erel, so you have in manifest:

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

etc...
In Visual Designer you insert Panel with Height 55dip ( if you have Tab Height = 50 ), in your panel insert all color you want.
In TabStrip you put color Tab Text Color, Indicator Color, and set Base Background Alpha = 0 ( Trasparent )

In attachment example.

Thath All.
Thank you again for this library Erel.

Bye
Marco

 

[forisco]

Hi Erel! I followed your suggests but i obtain this error:

*** Remote compilation mode ***
B4A version: 5.80
Parsing code. (0.00s)
Compiling code. (0.06s)
Compiling layouts code. (0.04s)
Compiling debugger engine code. (0.91s)
Sending data to remote compiler. Error
step: Generating R file.
AndroidManifest.xml:16: error: Error: No resource found that matches the given name (at 'theme' with value '@style/LightTheme').

The reference for android.jar is for the version 23 and i installed android-support-v4.jar

Bye!

 

[Erel]

It will not work with the trial version.

 

[forisco]

Thanks, Erel! This evening i will buy the enterprise edition. Ciao!

 

[Eme Fibonacci]

How Replacing the color "background tab pressed" in the code?

Thank you.

 

[Erel]

You can change the tabs background color in the code. It is not possible to change the "pressed color" programmatically.

 

[Eme Fibonacci]

You can change the tabs background color in the code. It is not possible to change the "pressed color" programmatically.

Could I then use custom themes?
but this proved difficult for me in xml markup.

 

[Erel]

Just change the color value in the manifest editor: https://www.b4x.com/android/forum/threads/tabstripviewpager-better-viewpager.63975/

 

[ma7tin]

Hi guys it is possible to add long_click to tabstrip to delete it by the user for eg. ?

 

[Erel]

Currently it doesn't support adding or deleting tabs at runtime.

 

[trueboss323]

Great lib, but wouldn't work with Android 14

 

[MarcoRome]

Great lib, but wouldn't work with Android 14

Look here #30

 

[trueboss323]

Look here #30

When I try to compile it, I get the error:

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]

Look better post#1

The library depends on android-support-v4. You should download it from Android SDK Manager and copy it to the additional libraries folder.

 

[Erel]

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

 

[imbault]

Please @Erel, do we have an event, when a panel begins to swipe?

Thanks