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

jazzzzzzz · Aug 13, 2016

I have 2 tabs in my tabstrip,I need the spacing between the tab names exactly as half,how can I do it?
Now the top bar is divded as length of tab name i think.but i need it as exactly half of device width irespective of display size ,like we give width of view as 50%x. As show in the attachment

jazzzzzzz · Aug 14, 2016

jazzzzzzz said:
I have 2 tabs in my tabstrip,I need the spacing between the tab names exactly as half,how can I do it?
Now the top bar is divded as length of tab name i think.but i need it as exactly half of device width irespective of display size ,like we give width of view as 50%x. As show in the attachment

never mind,found the link

I think @Erel must add all this kind of code snippet links in main page itself.
https://www.b4x.com/android/forum/t...ger-better-viewpager.63975/page-4#post-421797

beeblomarv · Aug 30, 2016

Erel said:

B4X:

Dim jo As JavaObject = tabstrip
jo.GetField("tabStrip").RunMethod("setIndicatorColor", Array(Colors.Red))

How to change the width* of Indicator! I mean how to make it wide or narrow?Just the width not the length -

beeblomarv · Aug 30, 2016

jazzzzzzz said:
I have 2 tabs in my tabstrip,I need the spacing between the tab names exactly as half,how can I do it?
Now the top bar is divded as length of tab name i think.but i need it as exactly half of device width irespective of display size ,like we give width of view as 50%x. As show in the attachment

Your indicator size is different! How did you manage to do that?

Erel · Aug 31, 2016

Please start a new thread for this question.

beeblomarv · Aug 31, 2016

Erel said:
Please start a new thread for this question.

I already did it :/

bjf · Oct 4, 2016

How do you remove the tabstrip when in the same layout?
I populate it with 3 tabs in a search function.
Then if i go back to do another search it will populate the sam tabstrip with 3 ADDITIONAL tabs, not new ones.

I can't have the tabstrip in an separate layout due to problems displaying labels and text when i return from the separate layout.

Erel · Oct 4, 2016

Please start a new thread for this question.

wizard699 · Nov 3, 2016

Erel, I can't explore my tabscript with this code

TabStrip1.LoadLayout("lay_tabpagella_1", "Prove")

Dim jo As JavaObject = TabStrip1
Dim r AsReflector
r.Target = jo.GetField("tabStrip")
Dim tc AsPanel = r.GetField("tabsContainer")

Dim res AsList
res.Initialize

For Each v As View In tc
msgbox(v.tag, "test")
Next

lay_tabpagella_1 contains one Panel and a UltimateListView

What's wrong???
Thanks

Erel · Nov 3, 2016

Please start a new thread for this question and make sure to use code tags.

achtrade · Nov 5, 2016

how to add label and edittext to Page2 layout with code?

Erel · Nov 6, 2016

1. Create a layout file with a panel.
2. Load the layout with TabStrip.LoadLayout.
3. Add views to the panel.

JLS · Dec 6, 2016

I'm trying to use the FontAwesome and Material Icons fonts, but I'unable.

I select them in the designer screen and I use TabStrip1.LoadLayout("01", "" & Chr(0xF063)) to set the icon, but nothing appears.

How could I do that.

Thanks in advance.

Erel · Dec 7, 2016

Here: https://www.b4x.com/android/forum/threads/tabstripviewpager-with-fontawesome-material-icons.73885/

JLS · Dec 7, 2016

Great!

Thank you very much.

ilan · Dec 12, 2016

hi

when i set the background color of the labels (tabstrip page title) then i dont see an indicator.
what can i do to see the indicator?

thanx

ps: this is my code

B4X:

    Dim jo As JavaObject = TabStrip1
    Dim offset As Int = 33%x
    jo.GetFieldJO("tabStrip").RunMethod("setScrollOffset", Array(offset))
    jo.GetFieldJO("tabStrip").RunMethod("setIndicatorColor", Array(Colors.White))
   
    For Each v As View In GetAllTabLabels(TabStrip1)
       v.Width = 33%x
       Dim lbl As Label = v
       lbl.Gravity = Gravity.CENTER
       lbl.TextSize = 14
       lbl.Color = Colors.RGB(52,152,219)
       lbl.TextColor = Colors.White
    Next

Erel · Dec 13, 2016

Please start a new thread for this question. If possible also include the project.

MARCOS SANDRONI LIMA RIOS · Dec 13, 2016

not found theme.xml in example
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 · Dec 13, 2016

MARCOS SANDRONI LIMA RIOS said:
not found theme.xml in example
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'.

Hi. When you post error pls write more details.
What use example in #1 ?
Log Error ?

Erel · Dec 14, 2016

MARCOS SANDRONI LIMA RIOS said:
not found theme.xml in example
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'.

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

Android Tutorial TabStripViewPager - Better ViewPager

Attachments

Active Member

Attachments

Active Member

Member

Member

B4X founder

Member

Member

B4X founder

Active Member

B4X founder

Active Member

B4X founder

Member

B4X founder

Member

Expert

B4X founder

New Member

Expert

B4X founder

Similar Threads

Privacy & Transparency

Privacy & Transparency