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

jazzzzzzz

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

Attachments

  • image.png
    image.png
    3.5 KB · Views: 592

jazzzzzzz

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

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

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

bjf

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

wizard699

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

JLS

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

ilan

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

MARCOS SANDRONI LIMA RIOS

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

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