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: 2,958
  • TabStripViewPager_Library.zip
    30.5 KB · Views: 2,141
Last edited:

MarcoRome

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

2.jpg


In Properties i have:

1.png


Thanks Again
Marco
 

German Buchmuller

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

Erel

B4X founder
Staff member
Licensed User
Longtime User
Does Anybody knows what should I try? What Am I doing Wrong?
You need to start Android SDK Manager and install the support library:

SS-2016-03-25_08.54.41.png


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

Expert
Licensed User
Longtime User
RESOLVED.
Well is possible ( with a few fantasy :) )
This is result:

Screenshot_2016-03-25-09-04-34.png



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 )

3.png


In attachment example.

Thath All.
Thank you again for this library Erel.

Bye
Marco
 

Attachments

  • TabStrip-Example.zip
    12.9 KB · Views: 693

forisco

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

forisco

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

Eme Fibonacci

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

ma7tin

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

MarcoRome

Expert
Licensed User
Longtime User
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.
 
Status
Not open for further replies.
Top