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,725
  • TabStripViewPager_Library.zip
    30.5 KB · Views: 2,891
Last edited:
Click to expand...
J

jefflynn1974

Member
Licensed User
Longtime User
When I try to start the example app it force closes and I get this error message in the log:

** Service (starter) Create **
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
java.lang.NoClassDefFoundError: com.astuetz.PagerSlidingTabStrip$PageListener
at com.astuetz.PagerSlidingTabStrip.<init>(PagerSlidingTabStrip.java:67)
at com.astuetz.PagerSlidingTabStrip.<init>(PagerSlidingTabStrip.java:110)
at com.astuetz.PagerSlidingTabStrip.<init>(PagerSlidingTabStrip.java:106)
at anywheresoftware.b4a.objects.TabStripViewPager.DesignerCreateView(TabStripViewPager.java:59)
at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:70)
at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:158)
at anywheresoftware.b4a.objects.ActivityWrapper.LoadLayout(ActivityWrapper.java:208)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:702)
at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:339)
at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:246)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:134)
at b4a.example.main.afterFirstLayout(main.java:102)
at b4a.example.main.access$000(main.java:17)
at b4a.example.main$WaitForLayout.run(main.java:80)
at android.os.Handler.handleCallback(Handler.java:733)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:136)
at android.app.ActivityThread.main(ActivityThread.java:5476)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1283)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1099)
at de.robv.android.xposed.XposedBridge.main(XposedBridge.java:132)
at dalvik.system.NativeStart.main(Native Method)
** Activity (main) Resume **
An error occurred:
(Line: 30) TabStrip1.LoadLayout("Page1", "PAGE 1")
java.lang.ClassCastException: java.lang.String cannot be cast to java.lang.Boolean

What can be the problem?
 
Phayao

Phayao

Active Member
Licensed User
Longtime User
Hello, sorry a silly mistake probably:
when I add the code to the manifest editor and try to compile the tabstrip.b4a, I get the error:

Compiling code. Error
Error parsing manifest script:
Line = 16, Word = C
Command expected.

On line 16: CreateResource(drawable, background_tab.xml,

Anybody got an idea what's going wrong here ?

Thank you, Chris
 
Phayao

Phayao

Active Member
Licensed User
Longtime User
Thanks for the quick reply - I'm using version 5.50, but I will upgrade soon and check it out in the new version.
 
L

lewi

New Member
Licensed User
Longtime User
B4A version: 5.80
Parsing code. (0.00s)
Compiling code. (0.03s)
Compiling layouts code. (0.01s)
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'.

I got this error when compiling the example
 
Douglas Farias

Douglas Farias

Expert
Licensed User
Longtime User
Erel said:
There is no special limit (Android 2.2+).
Click to expand...
perfect.

Last question, can you add option to change the text color and another options like label? or make a sample how to change via JavaObject?
i need to make this effect
WhatsApp-Material-Design-UI.png


Selected = white
no selected = gray or white with alpha
and diferent font like this image

thx
 
Last edited:
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
Douglas Farias said:
Last question, can you add option to change the text color and another options like label? or make a sample how to change via JavaObject?
Click to expand...
This code shows how you can change the labels text and text color based on the currently selected page:
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")
   For i = 1 To 100
     Page3ListView1.AddSingleLine($"Item ${i}"$)
   Next
   Activity.AddMenuItem("Jump to page 1", "mnu1")
   Activity.AddMenuItem("Jump to page 2", "mnu2")
   Activity.AddMenuItem("Jump to page 3", "mnu3")
   For Each lbl As Label In GetAllTabLabels(TabStrip1)
     lbl.Typeface = Typeface.MONOSPACE
   Next
   TabStrip1_PageSelected(0)
End Sub

Public Sub GetAllTabLabels (tabstrip As TabStrip) As List
   Dim jo As JavaObject = tabstrip
   Dim r As Reflector
   r.Target = jo.GetField("tabStrip")
   Dim tc As Panel = r.GetField("tabsContainer")
   Dim res As List
   res.Initialize
   For Each v As View In tc
     If v Is Label Then res.Add(v)
   Next
   Return res
   
End Sub

Sub TabStrip1_PageSelected (Position As Int)
   Log($"Current page: ${Position}"$)
   Dim i As Int
   For Each lbl As Label In GetAllTabLabels(TabStrip1)
     If i = Position Then lbl.TextColor = Colors.Blue Else lbl.TextColor = Colors.Red
     i = i + 1
   Next
End Sub

kelevra1602 said:
Is there any way to add icons or images on each tab ?
Click to expand...
Currently no.
 
ivan.tellez

ivan.tellez

Active Member
Licensed User
Longtime User
This is a great lib

@Erel Could you please add supponr for all the propperties In the Visual designer?

  • pstsIndicatorColor: Color of the sliding indicator
  • pstsUnderlineColor: olor of the full-width line on the bottom of the view
  • pstsDividerColor: Color of the dividers between tabs
  • pstsIndicatorHeight: Height of the sliding indicator
  • pstsUnderlineHeight: Height of the full-width line on the bottom of the view
  • pstsDividerPadding: Top and bottom padding of the dividers
  • pstsTabPaddingLeftRight: Left and right padding of each tab
  • pstsScrollOffset: Scroll offset of the selected tab
  • pstsTabBackground: Background drawable of each tab, should be a StateListDrawable
  • pstsShouldExpand: If set to true, each tab is given the same weight, default false
  • pstsTextAllCaps: If true, all tab titles will be upper case, default true

Specially the ShouldExpand

And Also the ability to change them in code :)

Thanks
 
Last edited:
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
It is simple to access these properties programmatically:
B4X: 
Dim jo As JavaObject = TabStrip1
jo = jo.GetField("tabStrip")
'now you can set the properties
jo.RunMethod("setShouldExpand", Array(False))
jo.RunMethod("setScrollOffset", Array(10dip))

The background tab drawable is set in the manifest editor (with the CreateResource keyword).
 
U

u2005k

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


Above code snippet is from TabStrip example (Manifest Editor) I am trying to change Tab back color, I changed value from #6633B5E5 to #ff4444 (Red) but Tab background color does not change. How can I change Tab backcolor?

Thanks for help.
U2005K
 
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
Changing the color to semi-transparent red:
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="@color/background_tab"/>
</selector>)
CreateResource(values, colors.xml,
<resources>
  <color name="background_tab_pressed">#6633B5E5</color>
  <color name="background_tab">#80ff0000</color>
</resources>)
'******************************************
 
MarcoRome

MarcoRome

Expert
Licensed User
Longtime User
Erel said:
Changing the color to semi-transparent red:
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="@color/background_tab"/>
</selector>)
CreateResource(values, colors.xml,
<resources>
  <color name="background_tab_pressed">#6633B5E5</color>
  <color name="background_tab">#80ff0000</color>
</resources>)
'******************************************
Click to expand...
Hi Erel , yes work but "lost" underline.
When i have this 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">#7BBA2B</color>
    <color name="background_tab">#7BBA2B</color>
</resources>)
'******************************************

i have this result:

primo.jpg



when i change in Manifest (...<item android:drawable="@Color/background_tab"/>..... ) :
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="@color/background_tab"/>
</selector>)
CreateResource(values, colors.xml,
<resources>
  <color name="background_tab_pressed">#6633B5E5</color>
  <color name="background_tab">#7BBA2B</color>
</resources>)
''******************************************

i have this result:

secondo.jpg


Where i wrong ?
Thank you
 
Status
Not open for further replies.

Similar Threads

E
  • Question
Android Question TabStripViewPagerExtendet - Set Background and Indicator Color
Replies
2
Views
1K
ernschd
E
AKJammer
  • Question
Android Question TabStrip w/extentions - Tab Removal
Replies
1
Views
1K
AKJammer
AKJammer
N
  • Question
Android Question [SOLVED]Try to use TabStripViewPagerExtendet?
Replies
11
Views
2K
nanjidusan
N
AHilberink
  • Question
Android Question TabStrip with same layout
Replies
14
Views
2K
emexes
E
B
  • Question
Android Question For Erel - Doubt on using Tabstrip Control
Replies
1
Views
800
Erel
Erel
Top