Android Tutorial Material Design 3 - Using a ToolBar as ActionBar

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:

Layout_ActionBar.png


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:

Layout_pContent.png


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.

ToolBar_Shadow.png


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.

ExampleApp.png
 

Attachments

  • ACToolBarExample2_0.zip
    25.3 KB · Views: 3,739
Last edited:

DonManfred

Expert
Licensed User
Longtime User

uniplan

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

uniplan

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

Attachments

  • test.zip
    49.7 KB · Views: 372

uniplan

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

Attachments

  • testTB1.zip
    55.6 KB · Views: 412

corwin42

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

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

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

Member
Licensed User
Longtime User
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):
20170329_154312.png


How to change this color to the normal in other activity ?
20170329_154335.png



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

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

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

fbritop

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

Expert
Licensed User
Longtime User
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
 
Top