Android Tutorial ActionBar / Sliding Pages tutorial

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.

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:

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:

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:

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:

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

 

[Erel]

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

 

[Marc De Loose]

HI,

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

Right now I have:

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.

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

Any help is welcome thx/

 

[Erel]

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

 

[imgsimonebiliato]

Hello,
if I set this

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]

Please start a new thread for this question.

 

[daemon]

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]

Which error do you get?

Try to remove the ActionBar related code.

 

[gadgetmonster]

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

Its ok found it: sm.visible

 

[KL7000F]

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:

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

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]

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]

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:

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

No icon visible

 

[Erel]

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]

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]

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]

Please start a new thread for this question.

 

[freedom2000]

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]

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

 

[freedom2000]

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]

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

 

[Erel]

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