B4A Library StdActionBar - Another ActionBar library

StdActionBar (Standard ActionBar) library is based on the native ActionBar API, therefore it is only supported by Android 4+.

StdActionBar / StdViewPager tutorial: ActionBar / Sliding Pages tutorial

The share of Android 2.x devices is dropping and currently (January 2014) it is only 24%.

This library allows you to add tabs and dropdown list to the action bar:

The attached example demonstrates both modes. You should change the navigation mode to see the two modes.

List mode

Adding a list is very simple. You set the NavigationMode:

bar.NavigationMode = bar.NAVIGATION_MODE_LIST

Add the items:

bar.SetListItems(Array As String("Dropdown 1", "Dropdown 2", "Dropdown 3"))

And handle the event:

Sub bar_ListItemSelected (Index As Int, Value As String)
   Log("Selected value: " & Value)
End Sub

Tabs mode

Unlike TabHost, the tabs do not hold any views. You are responsible for switching the layout based on the selected tab.

The first step is to set the navigation mode:

bar.NavigationMode = bar.NAVIGATION_MODE_TABS

Then we add the tabs:

bar.AddTab("Tab 1")

bar.AddTab returns a StdTab object. We can use it to modify the tabs:

bar.AddTab("Tab 1").Tag = panel1
bar.AddTab("Tab 2").Tag = panel2
'Add icon to tab 3
Dim tb As StdTab = bar.AddTab("Tab 3")
tb.Tag = panel3
Dim bd As BitmapDrawable
bd.Initialize(LoadBitmap(File.DirAssets, "ic_small.png"))
tb.Icon = bd

In the above code we add three tabs and use the tabs tag property to store a panel in each tab. Later we will use these panels to switch the layout.

When the TabChanged event is raised we clear the current layout and show the new layout.

Sub bar_TabChanged(Index As Int, STab As StdTab)
   Activity.RemoveAllViews
   Dim pnl As Panel = STab.Tag
   Dim height As Int
   If 100%y > 100%x Then
     height = 100%y - 48dip 'fix for the additional tabs height
   Else
     height = 100%y
   End If
   Activity.AddView(pnl, 0, 0, 100%x, height)
   If pnl.NumberOfViews = 0 Then
     pnl.LoadLayout(Index)
   End If
End Sub

Note that the attached example uses the Holo.Light theme. This is done with this manifest editor line:

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

V1.52 is released. Fixes an incompatibility with Android 5.0. Note that the ButtonClicked event will not work on these devices.

You should use Activity_ActionBarHomeClick event instead.

 

[Erel]

You can catch the back key in Activity_KeyPress. If the EditText is not empty then clear it and return True (this will consume the back key event).

 

[Inman]

You can catch the back key in Activity_KeyPress. If the EditText is not empty then clear it and return True (this will consume the back key event).

Ok, but can I remove that EditText completely from actionbar?

 

[Erel]

You can either hide it by setting its Visible property to False or you can remove it with EditText.RemoveView.

 

[Inman]

You can either hide it by setting its Visible property to False or you can remove it with EditText.RemoveView.

Ah yes. I was too deep looking for a function to remove Menu/Actionbar items that I didn't remember .RemoveView

Thanks Erel

 

[DSD]

I'm not seeing the title of the ActionBar buttons I've added.
The app is using the Holo Light theme, could this be the reason why the text on the buttons are not shown?

I can only see the two images not image and text...

Here's code I'm using when adding two buttons to the actionbar:

Activity.AddMenuItem3("Save", "mnuSave", LoadBitmap(File.DirAssets, "save.png"), True)
Activity.AddMenuItem3("Cancel", "mnuCancel", LoadBitmap(File.DirAssets, "remove.png"), True)

 

[Inman]

I believe the button titles are more like tooltips. If you longpress on a button, you can see the title.

 

[DSD]

I believe the button titles are more like tooltips. If you longpress on a button, you can see the title.

Thanks for the reply.
I guess it's the opposite for menu items not being shown on the actionbar, their icon will disappear and only the title will show?
Is this behavior for both buttons on actionbar and in actionbar menu by design or is it simply not implemented in the stdActionBar?

 

[Erel]

This is how Android Action bar works. If there is enough room for the image then only the image is displayed. If there isn't enough room the text will be displayed in the menu.

 

[irda]

Hi,
the view pager works fine, but when I add more than three tabs in landscape, the tab are changed to drop-down.
This drop down isn't synchronized with view pager.

I have the same problem. My application has 9 tabs, but in some devices (7" phone, galaxy tab 3lite) the tabs are changed to drop-down. My client doesn't like this, he wants tabs in all devices.



It's the same program, it's configurated to tabs, no dropdown menu. Is it possible to show always the tabs?

All help is appreciated. Thanks.

 

[johndb]

I have the same problem. My appliacatios has 9 tabs, but in some devices (7" phone, galaxy tab 3lite) the tabs are changed to drop-down. My client don't like this, he wants tabs in all devices.

View attachment 24089 View attachment 24090

It's the same program, it's configurated to tabs, no dropdown menu. It's posible show always the tabs?

All help are apreciated. Thanks.

If you always need to show tabs I would use the Tabhost view and not rely on the features of the stdactionbar at all.

 

[irda]

That was my first option. The problem is the tabhost view doesn't work correctly because tabs neither slide. Besides, if there are a lot of tabs, the text of these tabs is resized and the view is not good.

 

[johndb]

That was my first option. The problem is the tabhost view doesn't work correctly because tabs neither slide. Besides, if there are a lot of tabs, the text of these tabs is resized and the view is not good.

I understand what you are saying. There would definitely be a use for a new custom view that is similar to a tabhost but that would allow horizontal scrolling, perhaps with an arrow indicator on either side as well. I have never come across one of these while browsing the forums or checking the libraries. I neither have the time to create one nor, and more importantly, the knowledge yet. I think that many of us would use this type of view (Horizontally scrollable and user defined tab width, height) in our projects. Anyone up for the challenge?

 

[Erel]

It's the same program, it's configurated to tabs, no dropdown menu. Is it possible to show always the tabs?

This is how the native action bar works. However the dropdown menu should be synchronized with the current page.

 

[irda]

This is how the native action bar works. However the dropdown menu should be synchronized with the current page.

The dropdown is synchronized. Just thought it would be possible to always display tabs. Many thanks.

 

[Deleted member 30048]

Erel, Is there any way to put the image of the 3 bars instead of the arrow to the left of the icon?

 

[corwin42]

Erel, Is there any way to put the image of the 3 bars instead of the arrow to the left of the icon?

You can use the StdActionBarHelper library for this. The example of this library shows how to use the AHNavigationDrawer (slide menu) with the standard ActionBar.

 

[tipallandgo]

Is it possible to support < ICS using the support library? My reason is that our target audience are students from our school. There might be cases where some of them are still using < ICS.

 

[Erel]

Not with this library. There are other libraries that support previous versions:
http://www.b4x.com/android/forum/pages/results/?query=action+bar&page=1&prefix=1

 

[bluedude]

Hi,

I have started using this for my new UI template and combined this action bar with the actionbar helper, mListview and AHNavigationDrawer. It almost works but unfortunately if the StdViewPage is showing (tabs) the menu shows under the tabs instead of just under the actionbar.

The menu should cover the tabs and needs to show up right under the actionbar.

Attached is the project.

 

[Erel]

Can you post a screenshot?