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:

upload_2014-1-19_15-27-46.png
upload_2014-1-19_15-28-3.png


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:

SS-2014-01-19_15.41.50.png


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

Attachments

  • ActionBar.zip
    14.1 KB · Views: 7,242
Last edited:

Marc De Loose

Member
Licensed User
Longtime User
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/
 
Last edited:

imgsimonebiliato

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

daemon

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

KL7000F

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

KL7000F

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

B4X founder
Staff member
Licensed User
Longtime User
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

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

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

freedom2000

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

holo.jpg


Is there an easy way to do it ?

Thanks
 
Top