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

aarroyo

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

trueboss323

Active Member
Licensed User
Longtime User
Another question Erel.
Is it possible to get the NAME of the current tab? Not the index number
 

trueboss323

Active Member
Licensed User
Longtime User
Thanks Erel! Maybe I'm a little dumb but I can't seem to figure out how to use the code. I tried
B4X:
    Log(GetCurrentPageTabText(TabStrip1))
but it's crashing for me. Could you please show me the right way to use it?
 

appdominator

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

Homerclese

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

Homerclese

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

Layout.png
 

Homerclese

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

Homerclese

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

Homerclese

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

Homerclese

Member
Licensed User
Longtime User
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. :oops:
 
Status
Not open for further replies.
Top