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]

Are you referring to the three dots menu button? It is not related to this library. It will show when you add more menu items.

 

[GMan]

I wanna apply Holo.Dark, but when simply changing in the manifest file an error occurs that it can't be found.
Is that psossible at all / where can i get it ?

Edit: got it - only left the ".ligth", so this works:

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

 

[little3399]

How to change this Page color ?

 

[Erel]

Which page?

 

[little3399]

like this

 

[Erel]

The buttons are part of the layout. You can change their color in the same way you change the color of any other view.

The tabs color is part of the theme. You will need to create a new theme if you want to change the color: http://www.b4x.com/android/forum/th...for-the-standard-actionbar.36898/#post-220500

 

[little3399]

OK ,Tks Erel

 

[palmzac]

Hi Erel,

Question
-----------------------

1. show Tab2 when I clicked the Tab1 [world] button.
2. Add [Search] Icon on title ( like youtube )
3. Place the input field on title when clicked the [Search] Icon ( like youtube )
4. Add ItemMenu on title ( like youtube )

How to do that ? Would you help me & give me a example ? Thanks !

 

[Erel]

You can change the current page with vp.ScrollTo(...).
Adding custom views to the title is possible, though it is not so simple. See the discussion in this thread: StdActionBar - Another ActionBar library

You can add menu items with Activity.AddMenuItem3.

 

[palmzac]

Hi Erel,

Question 1 was solved. Thanks !

You can change the current page with vp.ScrollTo(...).
Adding custom views to the title is possible, though it is not so simple. See the discussion in this thread: StdActionBar - Another ActionBar library

You can add menu items with Activity.AddMenuItem3.

 

[elitevenkat]

I get
Compiling code. Error Exception of type 'System.OutOfMemoryException' was thrown.
my ver of b4a is 2.25 using platform 15
What is the wrong ?

 

[Erel]

Can you post a screenshot of this error?

v2.25 is quite an old version now. It is possible that it doesn't support this library.

 

[milehi]

The StdViewPager is pretty good. I've been using a 3 panel pager with a transparent panel in the middle to build sliding menus from the left and right sides of the display, with the main content views behind the pager.

A couple of questions:

1) Is there a way to enable or disable paging?
2) Can the speed of the scrollTo method be adjusted?

Thanks!

 

[Erel]

Consider using a solution such as this one instead: jfeinstein10 SlidingMenu library

1. You can add a transparent panel and handle its Touch event. It should disable the scrolling.
2. It is not possible to change the smooth transition duration.

 

[delozoya]

a question, can i change of tab3 to tab1 moving right? How i cab do?

 

[Erel]

It will not look perfect but it should work:
- Initialize ViewPager with 4 pages.
- In VP_PageSelected:

Sub VP_PageSelected (Position As Int)
   If Position = 3 Then
     vp.ScrollTo(0, False) 'jump to the first page
   Else
     If bar.SelectedIndex <> Position Then bar.SelectedIndex = Position
   End If
End Sub

 

[delozoya]

ok, works perfectly. Thanks

 

[Imam]

when activate bar.ShowUpIndicator = True how to get rid of buttonclicked in there to go to some another view or just go to parent of page? (newbe)

 

[Erel]

ShowUpIndicator just shows the small arrow. You need to handle the ButtonClicked event and do whatever you need to do.

 

[Imam]

yes i knew Erel. how to make code with this small arrow? what the name of small arrow? or is the small arrow have an index? is any documentation help for this. thanks you for the fast feedback