Android Tutorial Material Design 3 - Using a ToolBar as ActionBar

corwin42 · Jan 6, 2015

Note: You should use B4A 6.0 or above for this tutorial.

Google recommends to use a ToolBar instead of the standard system ActionBar for Material Design apps. In this tutorial we will use a ACToolBar(Light/Dark) object from the AppCompat library (1.10 and above) as an ActionBar.

One of the main differences between a ToolBar and the standard ActionBar is that the ActionBar is a system component which is automatically added by the os and a ToolBar is part of our layout so we can add it to the activity with the designer or by code.

Using the ToolBar object

First we need to set up our project like in the Material Design 2 tutorial.
Then we need to add some more items to the theme:

B4X:

<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="windowActionModeOverlay">true</item>

This disables the standard ActionBar in the theme. With the windowActionModeOverlay set to true ActionMode Actionbars will replace the ToolBar and are not displayed above it.

Now we can create our layout. For the example project I decided to split the layout into two parts. One "main" layout which contains the ToolBar and a simple Panel for the content.
So add a CustomView of type "ACToolBarLight" to a new layout called "main" and set the following properties:

Note that "Use as main ActionBar" is checked to use this Toolbar as the main ActionBar for the Activity. You can only use one Toolbar as the Activity ActionBar.
Elevation should be set to 4 for a normal ActionBar. This will produce a small shadow below it.
Additionally you should disable the Background color in the properties.

There are two versions of the ToolBar object. ACToolBarLight uses a light theme and ACToolBarDark uses a dark theme by default. This is only for historical reasons. You can set the light or dark theme for the ToolBar and the overflow menu with the designer properties now.

Now we add a Panel named pContent to the Layout with the following properties:

Because the standard height of the ToolBar/ActionBar in Material Design depends on the device orientation and screen size we add a small designer script:

B4X:

If ActivitySize > 6.5 Then
  ActionBar.Height = 64dip
Else
  If Portrait Then
    ActionBar.Height = 56dip
  Else
    ActionBar.Height = 48dip
  End If
End If

pContent.SetTopAndBottom(ActionBar.Bottom, 100%y)

This will set the ActionBar height to 64dip on tablets and to 56dip on portrait phones and 48dip on landscape phones. These specifications are in the Material Design guide.

Now we have a minimal example of how to setup a ToolBar as an ActionBar.

Misc stuff

You can use the ACActionBar object to control some ActionBar features like showing the "Up" indicator arrow.

B4X:

Dim ABHelper as ACActionBar

ABHelper.ShowUpIndicator = True

Adding actions and overflow menu

You can use the normal Activity.AddMenuItem() methods to add a menu or actions to the ToolBar:

B4X:

Dim xml As XmlLayoutBuilder
Dim bd As BitmapDrawable
bd = xml.GetDrawable("ic_plus_one_black_24dp")
Activity.AddMenuItem3("Plus one", "Menu", bd.Bitmap, True)
bd = xml.GetDrawable("ic_refresh_black_24dp")
Activity.AddMenuItem3("Refresh", "Menu", bd.Bitmap, True)
Activity.AddMenuItem("Overflow1", "Menu")
Activity.AddMenuItem("Overflow2", "Menu")
Activity.AddMenuItem("Overflow3", "Menu")

I prefer to use drawables for action icons than use the LoadBitMap() function. The drawables are available in different resolutions and will always load in the perfect size for your device. To load drawables you will have to use the XmlLayoutBuilder library.

The attached example has some UI elements to control some features of the ToolBar. Have fun with it.

beeblomarv · Sep 6, 2016

DonManfred said:
Did you see your mistake?

I need to add a menu item, enable or disable a menu item and change the label of the menu item programatically.
Can I change the menu item once it has been set?

DonManfred · Sep 7, 2016

beeblomarv said:
Can I change the menu item once it has been set?

Not with activity.addmenu commands. These Menuitems can NOT be changed.

You need to use AppCompat Menu. See the answers here.
https://www.b4x.com/android/forum/threads/tabstripviewpager-activity-addmenuitem3.70722/

And again: UPDATE B4A to V6+ as you need v6 for the libs to work.

beeblomarv · Sep 7, 2016

DonManfred said:
Not with activity.addmenu commands. These Menuitems can NOT be changed.

You need to use AppCompat Menu. See the answers here.
https://www.b4x.com/android/forum/threads/tabstripviewpager-activity-addmenuitem3.70722/

And again: UPDATE B4A to V6+ as you need v6 for the libs to work.

Thanks for the help

beeblomarv · Sep 7, 2016

DonManfred said:
Not with activity.addmenu commands. These Menuitems can NOT be changed.

You need to use AppCompat Menu. See the answers here.
https://www.b4x.com/android/forum/threads/tabstripviewpager-activity-addmenuitem3.70722/

And again: UPDATE B4A to V6+ as you need v6 for the libs to work.

will this work?
https://www.b4x.com/android/forum/threads/use-actoolbar-to-change-menu-icon.70785/

aldomoscarda · Sep 27, 2016

It worked !! Thank you very much.

Problem solved.

uniplan · Oct 24, 2016

I have a problem to display together logo and title.

I have tried using the following code:

B4X:

      ToolBar.Title="MAP"
                ToolBar.SubTitle="Maintenence Automotive Program"
                ToolBar.LogoBitmap = LoadBitmap(File.DirAssets, "MAP-quadrato-jpg.png")

but only appears the logo.

However, if I use only this code:

B4X:

ToolBar.Title="MAP"
ToolBar.SubTitle="Maintenence Automotive Program"

The title and subtitle appears correctly.

What could be the problem?

corwin42 · Oct 25, 2016

uniplan said:
What could be the problem?

Can you post an example project?

uniplan · Oct 25, 2016

corwin42 said:
Can you post an example project?

I made a sample project but I can not attach because the size exceeds the allowable 512Kb.
There is another way to send it?

At the time I will send only the main page and disigner file.

DonManfred · Oct 25, 2016

uniplan said:
There is another way to send it?

1. From the IDE use the Export as zip method. This is usually less then 500kb.

2. You can upload the project on Dropbox (or whatever) and share a link to download.

uniplan · Oct 25, 2016

DonManfred said:
1. From the IDE use the Export as zip method. This is usually less then 500kb.

2. You can upload the project on Dropbox (or whatever) and share a link to download.

As attached I send the example project.

alimanam3386 · Feb 3, 2017

Hi

How can I access to added menu by [ Activity.AddMenuItem3 ... ] as a view ?

corwin42 · Feb 7, 2017

uniplan said:
As attached I send the example project.

Logos can have a maximum height of 48dip. Recommended is a height of 32dip for a logo bitmap so you can use this:

B4X:

ToolBar.LogoBitmap = LoadBitmapSample(File.DirAssets, "MAP-quadrato-jpg.png", 32dip, 32dip)

corwin42 · Feb 7, 2017

alimanam3386 said:
Hi

How can I access to added menu by [ Activity.AddMenuItem3 ... ] as a view ?

As Erel said in another thread this is not possible (at least not without some dirty hacks)
Why do you need it?

desof · Feb 7, 2017

Hi, I downloaded the example ACToolBarExample2_0 and it looks fabulous. I have a question about it and it is possible to implement more than one layout content.bal, context1.bal, etc. ?
And if to call one is necessary to close the others?

Sapta · Mar 29, 2017

Hi @corwin42 and all member,

Thank you for great library,
I'm use this library not on main activity (other activity)
I have problem about color, how fix this problem?

Normal color you can see on the top (Icon B4A Bridge, wifi signal, simcard, bettery 31% and time) with dark blue backgorund color (Main Activity):

How to change this color to the normal in other activity ?

This is our manifest editor:

B4X:

CreateResource(values, theme.xml,
<resources>
    <style name="MyAppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#016ac6</item>
        <item name="colorPrimaryDark">#005cad</item>
        <item name="colorAccent">#006fd1</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>
)

Thank you

corwin42 · Mar 29, 2017

The problem are the last two lines in the Theme. You need them for the NavigationDrawer.

Create a second theme (just another <style> block) in the above code with everything except the last two items.
Then use this theme for activities without a navigation drawer (SetActivityAttribute() ).

SandroB4A · Mar 29, 2017

Thanks corwin42!

I'm updating my old free app to a newer material look, so thanks for your libs (AHViewPager, DesignSupport, MaterialDialogs, Preference..) and for your help.

My donation is the n°50N08049FG327291S

corwin42 · Mar 29, 2017

SandroB4A said:
My donation is the n°50N08049FG327291S

Thanks very much.

fbritop · Apr 13, 2017

I cannot seem to find if there is any, an event.

When I add menu items to the activity, and using ACToolBarDark as the toolbar, is there any way I can catch the event when the popup menu is clicked?. I need to close a pair of panels when the user opens the popup menu.

Thanks
FBP

corwin42 · Apr 27, 2017

fbritop said:
When I add menu items to the activity, and using ACToolBarDark as the toolbar, is there any way I can catch the event when the popup menu is clicked?. I need to close a pair of panels when the user opens the popup menu.

Sorry for the late answer. I was a bit busy recently.

You can add this event with JavaObject:

B4X:

Sub Activity_Create(FirstTime As Boolean)

        .......

    Dim jo As JavaObject
    jo.InitializeContext
    Dim e As Object = jo.CreateEvent("android.support.v7.app.ActionBar.OnMenuVisibilityListener", "optionsmenu", Null)
    jo = jo.RunMethodJO("getSupportActionBar", Null)
    jo.RunMethod("addOnMenuVisibilityListener", Array As Object(e))
End Sub

Sub OptionsMenu_Event (MethodName As String, Args() As Object) As Object
    If MethodName = "onMenuVisibilityChanged" Then
        If Args(0) = True Then
            Log("Options Menu Opened")
        Else
            Log("Options Menu Closed")
        End If
    End If
    Return Null
End Sub

Android Tutorial Material Design 3 - Using a ToolBar as ActionBar

Attachments

Member

Expert

Member

Member

Member

Active Member

Expert

Active Member

Attachments

Expert

Active Member

Attachments

Active Member

Expert

Expert

Well-Known Member

Member

Expert

Member

Expert

Active Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency