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

MarcoRome · Mar 24, 2016

Erel said:
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 :

B4X:

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 · Mar 24, 2016

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 · Mar 24, 2016

Are you using B4A 5.8 version?

Erel · Mar 25, 2016

German Buchmuller said:
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.

MarcoRome said:
Thank for your response Erel. But again dont see Indicator

Can you start a new thread and upload your project?

MarcoRome · Mar 25, 2016

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

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

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

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 · Mar 30, 2016

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 · Mar 31, 2016

It will not work with the trial version.

forisco · Mar 31, 2016

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

Eme Fibonacci · Apr 7, 2016

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

Thank you.

Erel · Apr 7, 2016

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

Eme Fibonacci · Apr 7, 2016

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

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

ma7tin · Apr 9, 2016

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

Erel · Apr 10, 2016

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

trueboss323 · Apr 14, 2016

Great lib, but wouldn't work with Android 14

MarcoRome · Apr 14, 2016

trueboss323 said:
Great lib, but wouldn't work with Android 14

Look here #30

trueboss323 · Apr 15, 2016

MarcoRome said:
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 · Apr 15, 2016

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 · Apr 15, 2016

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

imbault · Apr 20, 2016

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

Thanks

Android Tutorial TabStripViewPager - Better ViewPager

Attachments

Expert

Member

Member

B4X founder

Expert

Attachments

Member

B4X founder

Member

Well-Known Member

B4X founder

Well-Known Member

B4X founder

Member

B4X founder

Active Member

Expert

Active Member

Expert

B4X founder

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency