Android Tutorial ActionBar / Sliding Pages tutorial

Erel · Jan 19, 2014

A simpler and better looking solution is now available: https://www.b4x.com/android/forum/threads/tabstripviewpager-better-viewpager.63975/

StdActionBar library allows you to create layouts that use the action bar as a navigation interface.
Note that StdActionBar requires Android 4+.

In this tutorial we will create this layout:

The user can switch pages with a swipe gesture.

StdViewPager holds several panels and supports the swipe gesture.

Using StdViewPager is quite simple:

1. Initialize it and set the number of pages and their size.
2. Add it to its parent.
3. Create the internal pages layouts.

B4X:

Dim height As Int = CalculateHeight(True, True)
vp.Initialize("vp", 3, 100%x, height) 'vp is a StdViewPager object
Activity.AddView(vp.AsView, 0, 0, 100%x, height)
'load the pages layouts
vp.Panels(0).LoadLayout("0")
vp.Panels(1).LoadLayout("1")
vp.Panels(2).LoadLayout("2")

The next step is to add the ActionBar tabs:

B4X:

bar.Initialize("bar")
bar.NavigationMode = bar.NAVIGATION_MODE_TABS
bar.AddTab("Tab 1")
bar.AddTab("Tab 2")
bar.AddTab("Tab 3")

We need to synchronize the selected tab and the selected page:

B4X:

Sub VP_PageSelected (Position As Int)
   If bar.SelectedIndex <> Position Then bar.SelectedIndex = Position
End Sub

Sub bar_TabChanged(Index As Int, STab As StdTab)
   If vp.currentPage <> Index Then vp.ScrollTo(Index, False)
End Sub

CalculateHeight (TabsMode As Boolean, SplitEnabled As Boolean) is a helper sub that calculates the pages height based on the two features.
As you can see in the first screenshot, the split mode is enabled in this case. In split mode the action bar menu items appear at the bottom in portrait mode (phones only). This is set by adding the following line to the manifest editor:

B4X:

SetApplicationAttribute(android:uiOptions, "splitActionBarWhenNarrow")

The project is attached. Note that it requires StdActionBar v1.50+.

Tips:

- You can show the "up indicator" by setting ShowUpIndicator to True:

You can then handle the ButtonClicked event and use it to navigate to the "parent" activity.

- The holo.light theme is used in this project. It is done with this manifest line:

B4X:

SetApplicationAttribute(android:theme, "@android:style/Theme.Holo.Light")

imgsimonebiliato · Aug 30, 2015

Erel said:
Have you initialized the object?

Obviously yes

imgsimonebiliato · Aug 30, 2015

For a moment it works, but now i've got the same error:

B4X:

#Region  Activity Attributes
    #FullScreen: True
    #IncludeTitle: True
#End Region

Sub Process_Globals
End Sub

Sub Globals
Private Bar As StdActionBar
Private vp As StdViewPager
Private gTeam As CustomGridView
End Sub

Sub Activity_Create(FirstTime As Boolean)

Dim height As Int = bsValue.GetHeightSlidePanel(True, True)
vp.Initialize("vp", 3, 100%x, height)
Activity.AddView(vp.AsView, 0, 0, 100%x, 100%y - 2%y)

Bar.Initialize("bar")
Bar.Icon = LoadBitmap(File.DirAssets, "ic_action_user.png")
Bar.NavigationMode = Bar.NAVIGATION_MODE_TABS
Bar.AddTab("Partite")
Bar.AddTab("Squadra")
Bar.AddTab("Palestre")

Bar.ShowUpIndicator = True : Bar.SelectedIndex = 0
Activity.Title = bsValue.GetDesSquadra

Activity.AddMenuItem3("", "btClass"   , LoadBitmap(File.DirAssets, "classifica.png"), True)
Activity.AddMenuItem3("", "btSegnIrre", LoadBitmap(File.DirAssets, "youtube.png"), True)
Activity.AddMenuItem3("", "btFace"    , LoadBitmap(File.DirAssets, "facebook.png"), True)
end sub

Erel · Aug 31, 2015

Can you upload the project (File - Export as zip)?

imgsimonebiliato · Aug 31, 2015

Erel said:
Can you upload the project (File - Export as zip)?

Thank you Erel. I solved copying the attached example...

imgsimonebiliato · Aug 31, 2015

For Android Lollip, it is normal that the button back, doesnt' work?

Erel · Sep 1, 2015

Please start a new thread for this question. It is not related to this tutorial.

Bryan · Sep 4, 2015

Is there a way to detect when the actionbar becomes split? I'm using the flexable table class, and I have
SetApplicationAttribute(android:uiOptions, "splitActionBarWhenNarrow") set in the manifest. The table takes up the full screen.
If the actionbar becomes split I cannot view the last row of the table. What would be a good way to work around this?

Thank you

Erel · Sep 4, 2015

Are you using CalculateHeight sub from the example?

Bryan · Sep 5, 2015

Thank you, that worked perfectly.

Bryan · Oct 1, 2015

Bryan said:
Thank you, that worked perfectly.

Actually it doesn't work perfectly. I will explain...
On a 5 inch Galaxy 5 in portrait mode the action bar splits. This is where the Calculate height sub comes in handy. If the device is rotated into landscape mode and the action bar is not split any longer then I shouldn't use the Calculate height sub. Easy enough I guess to control.
When running my app on a Galaxy note 8 (8 inch tablet") in portrait mode the action bar is not split also the same goes if the Note 8 is in landscape mode. So, basically I still am unable to detect when the action bar is split to determine when I should use the Calculate height sub. The Calculate height sub only determines if you are either in portrait mode or landscape. It applies the height fix always in portrait. Larger devices won't split the action bar. I know you know all this already and I think I have seen in other posts that there is no real way to determine when the action bar is going to split. So, I ask is it better to get screen resolution and orientation and try to determine if the device is going to split the action bar? That would seem like a bit of work to get this working correctly. Any idea how the action bar itself determines whether it is going to split itself? That would seem to be the key to accurately determining available activity height. I could work around this somewhat but I can't be sure how my activity will look on other device sizes. The table I have loaded into a panel is the problem. The bottom row is not being displayed due to the action bar splitting as I mentioned in my previous post.

Erel · Oct 1, 2015

You should always call CalculateHeight. See the code in this sub.

scsjc · Oct 12, 2015

Hello, i have a question....
can i have a repeat same layout on diferent tabs :

B4X:

    Dim height As Int = CalculateHeight(False, False)
    vp.Initialize("vp", 3, 100%x, height)
    Activity.AddView(vp.AsView, 0, 0, 100%x, height)
    'load the pages layouts
    vp.Panels(0).LoadLayout("TV")
    vp.Panels(1).LoadLayout("TV")
    vp.Panels(2).LoadLayout("TV")

thats working perfectly, but i want know if is possible change NAME CONTROL from 1 layout ....
the idea is:

B4X:

vp.panels(0).button1.text = "hola"

Erel · Oct 13, 2015

It would have been better to start a new thread for this question.

There are all kinds of ways to organize the views references.
You can create a global button1 variable. It will hold a reference to the last view added with this name. So it allows you to do something like:

B4X:

vp.Panels(0).LoadLayout("TV")
Buttons(0) = Button1
vp.Panels(1).LoadLayout("TV")
Buttons(1) = Button1
vp.Panels(2).LoadLayout("TV")
Buttons(3) = Button1

Jiemde · Oct 21, 2015

Erel said:
StdActionBar library allows you to create layouts that use the action bar as a navigation interface.
Note that StdActionBar requires Android 4+.

In this tutorial we will create this layout:

View attachment 22073 View attachment 22074

The user can switch pages with a swipe gesture.

StdViewPager holds several panels and supports the swipe gesture.

Using StdViewPager is quite simple:

1. Initialize it and set the number of pages and their size.
2. Add it to its parent.
3. Create the internal pages layouts.

B4X:

Dim height As Int = CalculateHeight(True, True) vp.Initialize("vp", 3, 100%x, height) 'vp is a StdViewPager object Activity.AddView(vp.AsView, 0, 0, 100%x, height) 'load the pages layouts vp.Panels(0).LoadLayout("0") vp.Panels(1).LoadLayout("1") vp.Panels(2).LoadLayout("2")

The next step is to add the ActionBar tabs:

B4X:

bar.Initialize("bar") bar.NavigationMode = bar.NAVIGATION_MODE_TABS bar.AddTab("Tab 1") bar.AddTab("Tab 2") bar.AddTab("Tab 3")

We need to synchronize the selected tab and the selected page:

B4X:

Sub VP_PageSelected (Position As Int) If bar.SelectedIndex <> Position Then bar.SelectedIndex = Position End Sub Sub bar_TabChanged(Index As Int, STab As StdTab) If vp.currentPage <> Index Then vp.ScrollTo(Index, False) End Sub

CalculateHeight (TabsMode As Boolean, SplitEnabled As Boolean) is a helper sub that calculates the pages height based on the two features.
As you can see in the first screenshot, the split mode is enabled in this case. In split mode the action bar menu items appear at the bottom in portrait mode (phones only). This is set by adding the following line to the manifest editor:

B4X:

SetApplicationAttribute(android:uiOptions, "splitActionBarWhenNarrow")

The project is attached. Note that it requires StdActionBar v1.50+.

Tips:

- You can show the "up indicator" by setting ShowUpIndicator to True:

You can then handle the ButtonClicked event and use it to navigate to the "parent" activity.

- The holo.light theme is used in this project. It is done with this manifest line:

B4X:

SetApplicationAttribute(android:theme, "@android:style/Theme.Holo.Light")

Hi Erel, Is it possible to force the action bar menu items appear at the bottom in all mode ? not only in portrait mode on phone

Erel · Oct 21, 2015

It is not possible. It is handled by the OS: http://developer.android.com/guide/topics/manifest/application-element.html#uioptions

klarsys · Jan 7, 2016

If I want to change button Text or other properties on multiple pages, how do I do that?
I see in example that If I change button text, it reflects only in last tab.

Erel · Jan 7, 2016

Please start a new thread for this question.

samikinikar · Jan 30, 2016

I cannot execute the given actionbar.zip code, it displays the following error
java.lang.AbstractMethodError: abstract method "void android.support.v4.view.PagerAdapter.startUpdate(android.view.View)"

It may be because of android14 or so but how to load it and from where do i get it ?

Can someone help me please ?

Erel · Jan 31, 2016

Are you running it on Android 4+?

samikinikar · Feb 1, 2016

How to check that ? I copied android-support-v4.jar into the additional library folder, but then too the same error.

Android Tutorial ActionBar / Sliding Pages tutorial

Attachments

Well-Known Member

Well-Known Member

B4X founder

Well-Known Member

Well-Known Member

B4X founder

Member

B4X founder

Member

Member

B4X founder

Well-Known Member

B4X founder

Member

B4X founder

Active Member

B4X founder

Member

B4X founder

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency