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

Erel · Oct 1, 2014

You need to handle the ButtonClicked event. See the example in the first post.

Marc De Loose · Oct 9, 2014

HI,

I am trying to get my (sliding pages) to center properly.

Right now I have:

B4X:

Sub UpdatePages
 
    Activity.RemoveAllViews
 
    Dim height As Int = CalculateHeight(True, True)
 
    vp.Initialize("vp", Ettape_Size-1, 100%x, height)
    Activity.AddView(vp.AsView, 0, 0, 100%x, height)
    For i = 1 To Ettape_Size-1
        vp.Panels(i-1).LoadLayout("page1.bal")
        UpdatePanel1(i)
    Next
    vp.ScrollTo(LastKnown-1,False)
 

End Sub

Assigning "vp.Panels(i-1).Left = " or "vp.Panels(i-1).Top =" gives me a java error.

B4X:

java.lang.ClassCastException: android.view.ViewGroup$LayoutParams cannot be cast to anywheresoftware.b4a.BALayout$LayoutParams

Any help is welcome thx/

Erel · Oct 10, 2014

The inner panels always fill the view pager. You shouldn't try to modify their position or size.

imgsimonebiliato · Oct 12, 2014

Hello,
if I set this

B4X:

Activity.AddMenuItem("Crash", "bt1")
Activity.AddMenuItem("Documents", "bt2")
Activity.AddMenuItem2("Facebook", "btFace", LoadBitmap(File.DirAssets, "facebook.png"))

the icon in the third menuitem isn't display. It is normal?

Erel · Oct 12, 2014

Please start a new thread for this question.

daemon · Oct 20, 2014

I want to have full-screen panels.
How can I get rid of tab bar?

Following crashes the example app:
#Region Activity Attributes
#FullScreen: True
#IncludeTitle: False
#End Region

Erel · Oct 20, 2014

Which error do you get?

Try to remove the ActionBar related code.

gadgetmonster · Oct 28, 2014

Is there any way of telling if the menu is currently visible or not?

Its ok found it: sm.visible

KL7000F · Dec 12, 2014

Hi,
I come from the "Material Design 1 - Basics" tutorial. Following question:
I have "ShowUpIndicator" set to True. It appears under Android 5.0, an arrow to the left. How can I install the lollipop 3-line symbol ("burger") here?

Second Problem:

The ButtonClicked-Event makes an issue:

B4X:

Sub Globals
    Dim SAB As StdActionBar
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout1")
    Activity.Title = "Title"

    SAB.Initialize("SAB")
    SAB.ShowUpIndicator = True
End Sub


Sub SAB_ButtonClicked
    Log("KlickklackKlackerdieKlack")
End Sub

B4X:

java.lang.NoSuchFieldException: mActionView
    at java.lang.Class.getDeclaredField(Class.java:886)
    at anywheresoftware.b4a.objects.StdActionBar.Initialize(StdActionBar.java:64)
    at test.test.test.main._activity_create(main.java:290)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:173)
    at test.test.test.main.afterFirstLayout(main.java:98)
    at test.test.test.main.access$100(main.java:16)
    at test.test.test.main$WaitForLayout.run(main.java:76)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:135)
    at android.app.ActivityThread.main(ActivityThread.java:5221)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)
java.lang.NoSuchFieldException: mActionView

Can someone help me?

Erel · Dec 14, 2014

You should use the new Activity_ActionBarHomeClick event instead of the event from this library.

You can replace the app icon with any icon you like.

KL7000F · Dec 14, 2014

Hi,
the "Activity_ActionBarHomeClick" does not work as well. No error message.
If I initialize StdActionBar and there place an event name, there is the above error message. I use B4A 3.20 and Android 5.00 on Nexus 5.

I load the icon with this code:

B4X:

SAB.Icon = LoadBitmap(File.DirAssets, "flam.png")

No icon visible

Erel · Dec 14, 2014

1. Activity_ActionBarHomeClick is only available in B4A v4.0.
2. Download the latest version of this library to prevent this error from happening. Still the event will not work on Android 5. Only the new Activity event works.
3. Make sure to set the holo theme as explained here: Make your app compatible with Android 5.0 devices

KL7000F · Dec 14, 2014

Too bad version 4.0 can / want not afford it, because I do not earn any money with my apps and operate more as a hobby. Nevertheless, thanks for the help, will then probably rather stay with the "old style"

Scott Heywood · Dec 18, 2014

I'm using the sliding panels to display images. I'm using a different layout for each page that holds an new ImageView, with sometimes 20 different pages. Is there a way to use the same ImageView for each page and load the needed image when a new page is displayed? My app continues to crash and I feel like this is because I'm using too many ImageViews. When the activity with the StdViewPager is started all of the layouts along with the images are loaded together and the app crashes. The logs show: Downsampling image due to lack of memory.

Ultimately, I want to be able to swipe through the pages like flashcards, so if there is a better solution I'm open to suggestions. I'm not sure if the StdViewPager was intended for this type of use.

Thanks,

Erel · Dec 18, 2014

Please start a new thread for this question.

freedom2000 · Jan 17, 2015

Thanks a lot for this really nice feature.

It works very well on my nexus 5 under lollipop

I am currently using the holo dark them and the result is great.
My app is dealing with "colors" and I would like to dynamically change the underlying "blue line" under the selected tab, to have it in any color.

Is there an easy way to do it ?

Thanks

Erel · Jan 18, 2015

It is possible to change it with a custom theme. However I don't think that you can change it at runtime.

freedom2000 · Jan 18, 2015

Erel said:
It is possible to change it with a custom theme. However I don't think that you can change it at runtime.

Thank you Erel

trueboss323 · Feb 19, 2015

Can anyone help, please?
How do I a create a Scrollabe Listview in one of the tabs?

Erel · Feb 20, 2015

Might be problematic. Did the ListView prevent the sliding from working properly?

Android Tutorial ActionBar / Sliding Pages tutorial

Attachments

B4X founder

Member

B4X founder

Well-Known Member

B4X founder

Active Member

B4X founder

Active Member

Member

B4X founder

Member

B4X founder

Member

Member

B4X founder

Well-Known Member

B4X founder

Well-Known Member

Active Member

B4X founder

Similar Threads

Privacy & Transparency

Privacy & Transparency