Android Tutorial TabStripViewPager - Better ViewPager

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:

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):

'********* 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:

#AdditionalJar: com.android.support:support-v4

As Android support library requires Android 4+ (API level 14+), TabStripViewPager also requires Android 4+.

 

[trueboss323]

Thank you Erel!!

 

[aarroyo]

This is the scenario ,
I think 20 tabs , each tab and read a LoadLayout with UltimateListView , then go around TabStrip ( r.Target = jo.GetField ( " TabStrip " ) ) to find all UltimatListView , and is only 11 .

Without doing the same operation with 10 , is all right .

 

[Erel]

When you post a question you should post all the relevant information.

You need to post what you tried and what didn't work.

I did create a small example with 30 pages and everything seemed to work fine.

 

[trueboss323]

Another question Erel.
Is it possible to get the NAME of the current tab? Not the index number

 

[Erel]

You can use this code:

Sub GetCurrentPageTabText(tb As TabStrip) As String
   Dim lbl As Label = GetAllTabLabels(tb).Get(tb.CurrentPage)
   Return lbl.Text
End Sub

You can find the code of GetAllTabLabels in this thread.

 

[trueboss323]

Thanks Erel! Maybe I'm a little dumb but I can't seem to figure out how to use the code. I tried

    Log(GetCurrentPageTabText(TabStrip1))

but it's crashing for me. Could you please show me the right way to use it?

 

[DonManfred]

and TabStrip1 is a living instance of one of the tabstrips? You get this when adding a new tab.
Better create a new thread, post a example project which shows the problem....

 

[appdominator]

The TabStrip example looks beautiful on my old Nexus7 (running android 4.4.4).

But then when I try to run on a test phone (android 5.0.2) it goes a bit sideways.
The Tabstip example compiles fine.
The phone prompts "Install"
I let the system decide the preferred install location
But just get a message "X App not installed"

I am running:
B4A v5.8
B4A-Bridge v2.14

I tried removing and reinstalling the B4Bridge with no joy.

I got this mesage in the log:
Installing file.
** Activity (main) Resume **
Setting install_non_market_apps has moved from android.provider.Settings.Global to android.provider.Settings.Secure, returning read-only value.
Timeline: Activity_idle id: android.os.BinderProxy@8f2973 time:1389080

I must be doing something (basic) wrong; has anyone got any suggestions.


Thanks

 

[Erel]

There is probably an existing app with the same package name signed with a different key. Uninstall it and try again.

 

[Homerclese]

Is there a way to hide the Tabstrip altogether? I am using it like the Contacts app, so it represents a filtered view, but I have multiple areas and one of them cannot be filtered so I'd like to hide it when that area is selected.

 

[Erel]

Can you post a screenshot of the layout that you are trying to implement?

 

[Homerclese]

Can you post a screenshot of the layout that you are trying to implement?

My app has a TabStrip at the top, under the toolbar, and a BottomNavigation at the bottom. The 5 items in the BottomNavigation represent the entities in my app. By tapping on an item, the user can choose which entity they are viewing in the UltimateListView in the middle. The 4 tabs in the TabStrip at the top represent the available filters within each area, e.g. "All", "Approved", "Completed", etc.

These TabStrip tab titles change as the user selects each entity from the BottomNavigation. That works. But the first "entity" at the very left of the BottomNavigation isn't actually an entity. It's a Dashboard view which summarises all entities. So when this item is selected in the BottomNavigation, I want to hide the TabStrip as there are no filters available in this view.

 

[Erel]

You can put a Panel over the TabStrip (with the designer) and play with its visibility.

 

[Homerclese]

You can put a Panel over the TabStrip (with the designer) and play with its visibility.

Thanks Erel. I have a panel underneath the TabStrip already to get the background color (a tip I read in this thread) as I wasn't able to get the background color to work via the manifest settings or control properties. If I put a panel over the TabStrip I may be able to hide the TabStrip but the users will just see a gap between the Toolbar and the ListView which will look really odd.

Is there perhaps a way to set the TabStrip tab height to 0 and disable the scrolling?

 

[Erel]

There should be no gap. The panel will completely hide the TabStrip.

 

[Homerclese]

There should be no gap. The panel will completely hide the TabStrip.

Yes, sorry, by "gap" I meant that there will be either a white or blue rectangle between the ToolBar at the top of the Layout and the ListView that fills the layout where the TabStrip was, and my Dashboard (just custom UltimateListView cells) will start partway down the screen. It would be nicer visually if the space occupied by the TabStrip could be consumed by the UltimateListView when on the Dashboard view.

 

[Erel]

The tool bar at the top is part of TabStrip view. The panel will hide it completely.

 

[Homerclese]

The tool bar at the top is part of TabStrip view. The panel will hide it completely.

I don't want to hide the ToolBar. That contains my app title and search menu, etc. I only want to hide the TabStrip which is a view below the ToolBar.

 

[Erel]

Check the attached example.

 

[Homerclese]

Thank you Erel! Your solution seems so obvious and yet I couldn't see it. I was trying to cover just the TabStrip and not the whole layout.