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

hongbii khaw

Member
Licensed User
Longtime User
Hi,
May i know how to adjust the TabStripViewPager's size to make it same activity size when initialize?
normally i use this method to make the panel fix in different size of screen:
B4X:
panel.left = activity.left
panel.top = activity.top
panel.height = activity.height
panel.width = activity.width
if that any method to make the tabstrip1's size same as activity size other than using designer?
 

ilan

Expert
Licensed User
Longtime User
you can add it via designer and set the Anchor settings to BOTH or set it in designer script.
 

KingEdem

Member
Licensed User
Longtime User
You need to use a more recent version of android.jar (Tools - Configure Paths).
I used latest android jar and still getting following error:

Generating R file. 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'.
 

DonManfred

Expert
Licensed User
Longtime User
provide me link to download the jar.
There is no download for it. It is part of the two maven repos you need to have installed for B4A 6+
you dont need to copy anything to your additional libs folder.

Using the #additionaljar line will create a reference to the repo in the google android repository... B4A will find the file by itself.

Additionally you should NOT copy ANYTHING to the folder you posted (except you get told to do so for a specific library)... It is the INTERNAL library folder!

Configure the additional libs folder in the ide and put all additional libs in this folder.
 

KingEdem

Member
Licensed User
Longtime User
There is no download for it. It is part of the two maven repos you need to have installed for B4A 6+
you dont need to copy anything to your additional libs folder.

Using the #additionaljar line will create a reference to the repo in the google android repository... B4A will find the file by itself.

Additionally you should NOT copy ANYTHING to the folder you posted (except you get told to do so for a specific library)... It is the INTERNAL library folder!

Configure the additional libs folder in the ide and put all additional libs in this folder.


Thanks Don, ilan, Erel,

I got the jar here: C:\Android\android-sdk\extras\android\support\v4

problem resolved!
 

yolira

Member
Licensed User
Longtime User
Hi, I get an error. Please can you help me?

B4A version: 6.80
Parsing code. (0.00s)
Compiling code. (0.04s)
Compiling layouts code. (0.00s)
Organizing libraries. (0.00s)
Generating R file. (0.16s)
Compiling debugger engine code. (0.62s)
Compiling generated Java code. Error
Cannot find: C:\Program Files (x86)\Anywhere Software\Basic4android\libraries\android-support-v4.jar

Thanks
 

achtrade

Active Member
Licensed User
Longtime User
Hello,

I'm getting the same error and I did all the recommendation written in this thread.

B4A version: 6.80
Parsing code. (0.03s)
Compiling code. (0.07s)
Compiling layouts code. (0.00s)
Organizing libraries. (0.00s)
Generating R file. Error
res\drawable\background_tab.xml:4: error: Error: No resource found that matches the given name (at 'drawable' with value '@Color/background_tab_pressed').
res\drawable\background_tab.xml:5: error: Error: No resource found that matches the given name (at 'drawable' with value '@Color/background_tab_pressed').

what's wrong ?

Weird thing, the sample is working well buy my app isn't. Same computer, same android device.

See all my config in the attached files.

what's wrong ?
b4x-error1.jpg
b4x-error2.jpg
b4x-error3.jpg
b4x-error4.jpg
b4x-error5.jpg
b4x-error6.jpg
b4x-error7.jpg
b4x-error8.jpg
b4x-error1.jpg
b4x-error2.jpg
b4x-error4.jpg
b4x-error5.jpg
b4x-error6.jpg
b4x-error8.jpg
 
Status
Not open for further replies.
Top