Android Tutorial TabStripViewPager - Better ViewPager

Erel

Administrator
Staff member
Licensed User
All the features you posted except of the first one are already supported. Other features can be added in the future.

If you have any question then please start a new thread in the questions forum.
 

jefflynn1974

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

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

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

lewi

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

Erel

Administrator
Staff member
Licensed User
Update to a more recent version of android.jar (Tools - Configure Paths).
 

Douglas Farias

Expert
Licensed User
There is no special limit (Android 2.2+).
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

Administrator
Staff member
Licensed User
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?
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
Is there any way to add icons or images on each tab ?
Currently no.
 

ivan.tellez

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

Administrator
Staff member
Licensed 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).
 

u2005k

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

Administrator
Staff member
Licensed 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

Expert
Licensed 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>)
'******************************************
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
 
Top