Basic4Android: ABSYNCMenu, making an Actionbar with Submenus. Easy!


ABSYNCMenu.bas is a code module for an Actionbar with submenus completely written in Basic4Android. It’s an easy to use module you can drop into any project and with a couple of lines of code you have your own action bar with submenus!

Note: I’m aware there is an excellent actionbar library from corwin42 called AHActionBar at the B4A website, but as this ABSYNCMenu module is part of the upcoming ABSYNC Genesis tool (more on this tool in a later article!), I wanted to share this module with you.

Let’s get started!

Start a new project and import the attached module ABSYNCMenu.bas.

In the Main Activity we will add all the code needed to create and handle the action bar and menu. I’ll only cover the code needed for the actionbar in this tutorial, not the other ‘normal’ B4A code. There are some excellent tutorials in the B4A forum, check them out.

We define tree panels that are needed to build the ABSYNC Menu in the Sub Globals.
ABS_MainMenuPanel: for the transparent background over the whole activity that makes all the rest of the program darker and unclickable.
ABS_ActionBarPanel: for the the actionbar
ABS_DropdownMenuPanel: for the dropdown menu

Sub Globals
    Dim ABS_MainMenuPanel As Panel
    Dim ABS_ActionBarPanel As Panel
    Dim ABS_DropdownMenuPanel As Panel
End Sub

In the Activity_Create sub we load our initial layout file (.bal) we created in the designer. This may just be an empty form. See the project at the end of the article for more info. Then we call our BuildMenu() function where we define our action bar and menus.

Sub Activity_Create(FirstTime As Boolean)
    ' load the initial layout
    Activity.LoadLayout("1")

    ' call the function to initialize our menu
    BuildMenu
End Sub

Suppose we want to create the following actionbar with submenus:

Notice some menu items need to have an icon and some of them need to be disabled.
I’ll go over every major part in the code of the BuildMenu() function to explain how it works.

Start with the ABSYNC menu definition:

ABSYNCMenu.ABSYNCMenuBegin(ABS_MainMenuPanel, ABS_ActionBarPanel, ABS_DropdownMenuPanel, "ABSYNCMenuEvent", Activity.Width, Activity.Height)

Set some properties, like the colors and height of the action bar:

ABSYNCMenu.ActionBarHeight = 40dip
ABSYNCMenu.ColorActionBar = Colors.ARGB(255,255,0,0)
ABSYNCMenu.ColorActionBarItemEnabled = Colors.ARGB(255,255,255,255)
ABSYNCMenu.ColorActionBarItemDisabled = Colors.ARGB(255,64,64,64)
ABSYNCMenu.ColorMenu = Colors.ARGB(255,255,255,255)
ABSYNCMenu.ColorMenuItemEnabled = Colors.ARGB(255,0,0,0)
ABSYNCMenu.ColorMenuItemDisabled = Colors.ARGB(255,192,192,192)

Important! When you add an actionbar item you can have them left our right aligned. Depending on the alignment the icons are shown in a different order.

If the alignment is LEFT then the order of the shown icons is:
first added, second added, third added, …

If the alignment is RIGHT then the order of the shown icons is:
…, third added, second added, first added

Let’s add a simple item to the taskbar. Every actionbar item has to start with ABSYNCMenu.AddActionBarItemBegin and has to end with ABSYNCMenu.AddActionBarItemEnd. The syntax for the AddActionBarItem is as follows:

Sub AddActionBarItem(ReturnValue As String, bmpEnabled As String, bmpDisabled As String, ItemWidth As Int, LeftAligned As Boolean, Visible As Boolean, Enabled As Boolean, MenuWidth As Int)

ReturnValue: the value that will be returned to the ABSYNCMenuEvent() function. This is also the text that will be shown if no icon is provided.
bmpEnabled: the file name of the bmp for the Enabled icon.
bmpDisabled: the file name of the bmp for the Disabled icon.
ItemWidth: the width of this item. Can be bigger than the icon width. The icon will then be centered withion this width.
LeftAligned: is this icon aligned to the left of your screen or the right. See note above about alignment.
Visible: is this item visible.
Enabled: is this item enabled.
MenuWidth: the total with of the sub menu, if any.

So our full first item is like this:

ABSYNCMenu.AddActionBarItemBegin
ABSYNCMenu.AddActionBarItem("Home", "", "", 50dip, True, True, True, 0)
ABSYNCMenu.AddActionBarItemEnd

Another example is an actionbar item with an icon and a submenu. right after you added the actionbar item, you can add the submenu with the AddMenuItem() function.
the syntax of AddMenuItem() is:

Sub AddMenuItem(ReturnValue As String, bmpEnabled As String, bmpDisabled As String, ItemHeight As Int, IconWidth As Int, Enabled As Boolean)

ReturnValue: the value that will be returned to the ABSYNCMenuEvent() function. This is also the text that will be shown next to the icon
bmpEnabled: the file name of the bmp for the Enabled icon.
bmpDisabled: the file name of the bmp for the Disabled icon.
ItemHeight: the height of this item.
IconWidth: the width of the iconspace.
Enabled: is this item enabled.

The full item looks like this:

ABSYNCMenu.AddActionBarItemBegin
ABSYNCMenu.AddActionBarItem("Menu", "abmenuE.png", "abmenuD.png", 50dip, False, True, True, 160dip)
ABSYNCMenu.AddMenuItem("Register", "", "", 40dip, 30dip, True)
ABSYNCMenu.AddMenuItem("Connections", "ConnectionsE.png", "ConnectionsD.png", 40dip, 0, True)
ABSYNCMenu.AddMenuItem("Tables", "", "", 40dip, 0, False)
ABSYNCMenu.AddActionBarItemEnd

After all items are added, end the ABSYNC menu definition and add it to this activity:

ABSYNCMenu.ABSYNCMenuEnd(ABS_ActionBarPanel, ABS_DropdownMenuPanel)
Activity.AddView(ABS_MainMenuPanel, 0,0, Activity.Width, ABSYNCMenu.ActionBarHeight)

Now we can write our function that will handle the menu click event. This function will be automatically called by the ABSYNCMenu module.
This function is straightforward. The comments will explain what happens:

' function that returns if someone clicked on an action bar item or on a sub menu item
' Here is where you do your stuff
Sub ABSYNCMenuEvent(ReturnValue As String, HasMenu As Boolean)
	If HasMenu Then
		' is an action bar item with a menu, open it and return
		ABS_MainMenuPanel.SetLayout(0,0, Activity.Width, Activity.Height)
	Else
		' is an action bar item without a menu OR an actual menu item so we have to handle it
		ABS_MainMenuPanel.SetLayout(0,0, Activity.Width, ABSYNCMenu.ActionBarHeight)
		Select Case ReturnValue
			Case "Home"
				LoadLayoutIntoActivity("1")
			Case "Register"
				LoadLayoutIntoActivity("2")
			Case "Connections"
				LoadLayoutIntoActivity("3")
			Case "Tables"
				LoadLayoutIntoActivity("4")
			Case "All tables"
				ToastMessageShow(ReturnValue, False)
			Case "Register tables"
				ToastMessageShow(ReturnValue, False)
		End Select
	End If
        ' and redraw the action bar and menu
	ABSYNCMenu.Draw(ABS_ActionBarPanel, ABS_DropdownMenuPanel)
End Sub

Finally we’ll have to cover the touch events on the tree panels. We’ll send the event to the ABSYNCMenu module an it will handle all the rest for you.

Sub ABS_ActionBarPanel_Touch (Action As Int, X As Float, Y As Float) As Boolean 'Return True to consume the event
	' in the touch event, let the ABSYNCMenu module handle the touch
	Return ABSYNCMenu.DoActionBarTouch(Action, X, Y)
End Sub

Sub ABS_DropdownMenuPanel_Touch (Action As Int, X As Float, Y As Float) As Boolean 'Return True to consume the event
	' in the touch event, let the ABSYNCMenu module handle the touch
	Return ABSYNCMenu.DoMenuTouch(Action, X, Y)
End Sub

Sub ABS_MainMenuPanel_Touch (Action As Int, X As Float, Y As Float) As Boolean 'Return True to consume the event
	' did not touch a menu or action bar item. Close it up!
	ABS_MainMenuPanel.SetLayout(0,0, Activity.Width, ABSYNCMenu.ActionBarHeight)
	Return True
End Sub

Finished! As you can see with some very easy coding we’ll have a fully working actionbar with dropdown menu’s!

Check out the source code with the ABSYNCMenu.bas module here:
http://gorgeousapps.com/ABSYNCMenu.zip

Until next time!

Click here to Donation if you like my work

Advertisements

About Alwaysbusy

My name is Alain Bailleul and I'm the Senior Software Architect/Engineer at One-Two. I like to experiment with new technologies, Computer Vision and A.I. My projects are programmed in B4X , Xojo, C#, java, HTML, CSS and JavaScript. View all posts by Alwaysbusy

8 responses to “Basic4Android: ABSYNCMenu, making an Actionbar with Submenus. Easy!

  • moster67

    Thank you for this. Just tested it and it is very nice. Good job as usual.
    The B4A community is lucky having developers like you.
    Look forward to the ABSYNC Genesis tool whatever it is.

  • Geoff

    interesting! I tried using a tabhost with this – and DropdownMenuPanel appears somewhat transparent and WILL NOT respond to events. Any ideas?

  • Chris

    Hi
    addactionbaritem()
    can i choose imageview weidht?

  • Chris

    didn`t get an email.
    did you send one?

    • Alwaysbusy

      Hi Chris,

      ABsyncMenu is some old code from the begining of B4A where making libraries was a hassle. These days, a lot of excellent B4A libraries can be downloded from the B4A website. A good one for you could be AHActionBar by corwin42. Check out the libraries and I’m sure you’ll find a much better solution.

      Cheers,
      Alain

      • Chris

        Hi alain
        Thanks but i try to use your library…-i saw this library already and i will use it for my next app.
        I only have 1 Problem.
        My Picture is not showen (sry my english is so bad)
        I see only the middle…-Can you say me how to solve? i tried to resize my pic but it is the same…
        Thx
        Cheers,
        Chris
        (Good Website! Go on!)

      • Chris

        Hi again
        I have downloaded the library but it did not work :O
        Maybe you can do another tutorial for the AHactionbar?
        This would be nice.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: