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

Tayfur · Jun 30, 2017

MarcoRome said:
Look example this picture.

You see Relaxation and Atmosphere - Nature because is white colore, if you insert nothing ( "" ) you have that "Tabs is Hide"

How you can do it?
please share code.
Thanks

MarcoRome · Jun 30, 2017

Tayfur said:
How you can do it?
please share code.
Thanks

If you give me more details....where you see this thread ?

Tayfur · Jul 3, 2017

MarcoRome said:
If you give me more details....where you see this thread ?

https://www.b4x.com/android/forum/t...ger-better-viewpager.63975/page-4#post-419386

MarcoRome · Jul 3, 2017

The code is this ( nothing special ) :

B4X:

    If Starter.ordina_canali = False Then
                        'Qui inserisco in ordine i Canali come richiesto: Relaxaton, Acoustic, etc
                        TabStrip1.LoadLayout("lay_carica", "RELAXATION")
                        TabStrip1.LoadLayout("lay_carica_13", "ATMOSPHERE - NATURE")
                        ....

Tayfur · Jul 6, 2017

MarcoRome said:

View attachment 57271

The code is this ( nothing special ) :

B4X:

    If Starter.ordina_canali = False Then
                        'Qui inserisco in ordine i Canali come richiesto: Relaxaton, Acoustic, etc
                        TabStrip1.LoadLayout("lay_carica", "RELAXATION")
                        TabStrip1.LoadLayout("lay_carica_13", "ATMOSPHERE - NATURE")
                        ....

thank you for helps...

cledic · Aug 28, 2017

Hello to all,,
I have problem using TabStripViewPager Lib. Every time I compile and download my simple program or the Erel example, the B4A-Bridge say "App not installed".
I don't have any app installed on the phone with the same name, and I tried to renaming the app too but without success.

I'm using "android-26\android.jar" and "jdk1.8.0_131\bin\javac.exe". I have the "Android Support Repository" and "Google Repository" installed as the last version.
In the "Region Project Attributes" I add: "#AdditionalJar: com.android.support:support-v4" and I have the "android-support-v4.jar" file inside the "Library" folder. Cancelling the line "AdditionaJar..." line or cancelling the file inside the Library folder does not make difference: the error is the same.

The compilation log say:
B4A version: 7.00
Parsing code. (0.00s)
Compiling code. (0.07s)
Compiling layouts code. (0.01s)
Organizing libraries. (0.00s)
Generating R file. (0.05s)
Compiling generated Java code. (0.73s)
Convert byte code - optimized dex. (0.71s)
Packaging files. (0.25s)
Copying libraries resources (0.00s)
Signing package file (debug key). (0.55s)
ZipAlign file. (0.11s)
Installing file to device. (0.08s)
Installing with B4A-Bridge.
Completed successfully.

But as I said, the app is not installed.
What can I try?

TIA
Regards
Clemente

Erel · Aug 29, 2017

The app name is not relevant. Try to change the package name (Ctrl + B).

cledic · Aug 29, 2017

Erel said:
The app name is not relevant. Try to change the package name (Ctrl + B).

Thanks Erel, it works !!

trueboss323 · Sep 5, 2017

If possible how could i change the tab colors at runtime?

Erel · Sep 5, 2017

Please start a new thread for this question.

mkh_fx · Sep 22, 2017

I need these options:

1- BringToFront method
2- Tag property for each TabLayout
3- Change tabs Position (Bottom - Top)

swChef · Oct 10, 2017

mkh_fx said:
I need these options:

1- BringToFront method
2- Tag property for each TabLayout
3- Change tabs Position (Bottom - Top)

Second #2. It'd be acceptable if _PageSelected had an additional parameter 'Value' for each Tab, which could be provided via an additional parameter to .LoadLayout(,,_). (I use the same layout for several tabs).

4- 'current tab' line indicator, option for it at the top
5- collapsible tabs (the top 'tab' part); after X seconds; at the slightest 'navigation' (side-side) movement of a page change, tabs reappear.

Edit: after some experimentation, #5 is (half) possible. set tsoffset to hide as much of the tabs as desired.

B4X:

Dim jo As JavaObject = TabStrip1
    Dim r As Reflector
    r.Target = jo.GetField("tabStrip")
    Dim tc As Panel = r.GetField("tabsContainer")
    tc.Height = tc.Height - tsoffset
    Dim vp As Panel = r.GetField("pager")
    vp.top = vp.Top - tsoffset
    vp.Height = vp.Height + tsoffset

Plus adjust the height of the panel for the visible (or all) tab pages. What panel? I added just a panel to a layout, and use that for each Tab. Then I add my view controls to the panel. So it is available to adjust. Since '.tag' isn't available, you have to track the panels on your own. Which is why a tag (or value as mentioned in #2) would be nice.

desof · Dec 14, 2017

It is possible to place an icon only (and not text) ?

Erel · Dec 14, 2017

Please start a new thread for this question.

sakissoft · Apr 18, 2020

Hello,
How change the tabstrip title? I want to rename this default title : "TabStripViewPager" in the top

aeric · Apr 18, 2020

sakissoft said:
Hello,
How change the tabstrip title? I want to rename this default title : "TabStripViewPager" in the top

Reminder: You should start a new thread.

Just change the Title in Main layout in Visual Designer.

sakissoft · Apr 18, 2020

Thanks aeric . I don't see.

Android Tutorial TabStripViewPager - Better ViewPager

Attachments

Tayfur

Well-Known Member

MarcoRome

Expert

Tayfur

Well-Known Member

MarcoRome

Expert

Tayfur

Well-Known Member

cledic

Member

Erel

B4X founder

cledic

Member

trueboss323

Active Member

Erel

B4X founder

mkh_fx

Member

swChef

Active Member

desof

Well-Known Member

Erel

B4X founder

sakissoft

Member

aeric

Expert

sakissoft

Member

Similar Threads

Android Tutorial TabStripViewPager - Better ViewPager

Attachments

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Member

B4X founder

Member

Active Member

B4X founder

Member

Active Member

Well-Known Member

B4X founder

Member

Expert

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency