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

 

[zombee81]

Erel, thanks for this library, its fantastic. An idea for a future one, a ActionBar library that uses the sherlock actionbar so that it will be compatible with all versions of android down to 2.1.

 

[imgsimonebiliato]

Hello,
trying to use this library i get in the manifestor, this error:

AndroidManifest.xml:15: error: No resource identifier found for attribute 'uiOptions' in package 'android'
AndroidManifest.xml:15: error: Error: No resource found that matches the given name (at 'theme' with value '@android:style/Theme.Holo.Light').

Please help

 

[Erel]

Make sure that you reference android.jar version 14+ (Tools - Configure Paths).

 

[JakeBullet70]

Very nice! Thanks Erel.

 

[tuhatinhvn]

great! can you fix it to use with Android 2++??

 

[Erel]

No. It is based on the native ActionBar that is only available in Android 4+.

 

[M. Giray Ozkan]

Hi,

Can I add or remove menu items in

bar_TabChanged

sub ?

Thank you

 

[Erel]

Currently no.

 

[M. Giray Ozkan]

Dear Erel,

I have trouble adding menu items to actionbar. I'm using addmenuItem3 but 3 dot menu icon doesn't appear on top right corner. please help. Thank you.

AddManifestText(
<uses-sdk android:minSdkVersion="17" android:targetSdkVersion="17"/>
<supports-screens android:largeScreens="true"
    android:normalScreens="true"
    android:smallScreens="true"
    android:anyDensity="true"/>)
SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")
SetApplicationAttribute(android:theme, "@style/Theme.MyCustomTheme")
SetActivityAttribute(addReminderActivity, android:windowSoftInputMode, adjustResize|stateHidden)
AddPermission(android.permission.VIBRATE)

Activity.AddMenuItem3("", "mnuUser", LoadBitmap(File.DirAssets, "ic_action_user.png"), True)
      
    Activity.AddMenuItem3("Menu Option 1", "mnuOpt1",Null,False)
    Activity.AddMenuItem3("Menu Option 2", "mnuOpt2",Null,False)
    Activity.AddMenuItem3("Menu Option 3", "mnuOpt3",Null,False)
    Activity.AddMenuItem3("Menu Option 4", "mnuOpt4",Null,False)

by the way, I'm using LG-G2 phone with Android 4.2.2

 

[Erel]

Please start a new thread for this question. Also try it without the custom theme and see whether the menu icon shows.

 

[thedesolatesoul]

Small mistake in the tutorial.
At the end where it says:

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

the manifest code is wrong.

 

[Erel]

Fixed. Thank you.

 

[Roger C]

Looks very interesting!!!

And here comes a stupid question...
I'm working on an app with many layouts which now are accessed through buttons on the startpage.
If I would implement this instead where I load the layouts in panels, would the layouts still be connected to the old activitymodule where I loaded the layouts before? So I don't have to rewrite anything and place it all in Main where this code goes?
It's just another way of showing the different layouts?

And another...
Would it be possible to load images in the tabs instead of text? If I have 5 tabs, four of them are visible and then there isn't much space for text. 'Settings' is cropped and I have to write 'Set.' instead. Doesn't look so good.

 

[Roger C]

Been trying to integrate this in my current app but I can't get it working.

In my old version, pressing a button on startscreen opened another Activity (Act2), displayed that layout and run some code to update information on the screen.

When placing the layout for Act2 in panel 1 (panel 0 = startscreen) and sliding/pressing tab to panel 1, it shows the layout but the buttons don't work and they are not updated with new information.
So I placed a check in 'Sub VP_PageSelected' to check for panel 1 and then run the start code by CallSub from Act2 but nothing happens.

How can I implement this in an existing app? And how can I update the information in the layout in the panel I slide to? Do I have to update all layouts on all panels when I create them? Then it don't work for me since I use dynamic data that could change between panels and have to be updated when it comes into view.

How do I handle the press of buttons on the layouts? Do all code have to be in Main and catch the button pressed?

Am I missing something here?

 

[Erel]

If you choose this solution then you should use a single activity. However you can use classes or code modules to split your code into several modules.

You cannot put images in the tabs titles.

 

[netchicken]

Erel I think I have the same question as Roger above.
I have 4 layouts that are at present opened by 4 activities using Buttons. Each layout is loaded with data from the class in the Activity.

Is there a way to fill each layout with the data (its only 1 line of data) with this system? Or can I only use 4 panels and one Activity?

 

[netchicken]

I seem to have found an answer.
By adding the fields (Labels) to the same activity that holds the sliding pages code, it seems to fill the labels in the layouts with the correct data.

 

[Roger C]

Netchicken,

I've made a solution with one Activity and classes loading Layouts and this works fine for me so far. Supplied here are the framework of this setup. I've been searching a lot for a working solution and thought I'd share this, might help others in the same situation.

The Activity has an Actionbar in top and another in bottom (which works as a statusbar for me).
Changes in the Actionbars can be done by calling a sub in Main like:

CallSub(Main,"ActivityLowerBar")

or in the top bar

CallSub(Main,"ActivityTopBar")

I use KeyValueStore to send variables between classes and activity, a bit slower than global variables but safer if the app shuts down.

I also have slidingmenues (http://www.b4x.com/android/forum/threads/jfeinstein10-slidingmenu-library.36482/) to the left, with buttons for selecting function and to the right with a ScrollView that can be used for anything you want.

The menubuttons loads the classes like this:

sm.HideMenus
Activity.RemoveAllViews
lClsHistory.Initialize(Me, Activity, 2)

Then the class loads the Layouts and each class will handle the events from that layout.
This means you have the Activity common for the project and just change the visible layouts by initializing the classes.

I've also implemented a Multilanguage function based on this http://www.b4x.com/android/forum/threads/ahlocale-library.7561/.
Texts are used in this way:

btnKund.text=trans.GetText("Customer")

I only have Swedish at the moment as complement to English (the english is the text Customer above) and the Swedish is looked up in a text file in the folder /Files.

Noticed that the Backbutton on the device don't work but thats easy to solve for you...
The sliding doesn't work so good on the emulator but it does on a real device.

Notice that you will need some libraries...
Since this frame is taken from my complete app there are a lot of libs and I really don't know which are used for only the frame to work... But try and add them one at a time when you get error...
These are the libs used: AHLocale, Core, DateUtils, Dialogs, HTTP, JavaObject, JSON, Net, Phone, RandomAccessFile, Reflection, ScrollView2D, SlidingMenuWrapper, SQL, StdActionbar, StringFunctions, StringUtils, TabHostExtras, XmlSax.

 

[luke2012]

@Erel
Very good work!
Only a question : In the tutorial's screenshots I don't see the action overflow. Is it supported ?