B4A Library Arc Menu [Class] + [Lib]

Arc Menu:

Here is a nice little animated menu known as Arc Menu. It is based on a native java android library ArcMenu Java Lib. I initially tried to wrap the java library, but my skills weren't up to the job on the day, so I decided to create my own incarnation in b4a code as a class. It is very customizable and I think it adds a nice effect to any User Interface. This should be nice and easy to use. The only methods that are required are the Initialize and at least 1 x AddItem (whats a menu without any menu items)

ScreenShots:



Documentation:

ArcMenu
Version: 1

• Methods:
  • IsInitialized As Boolean
    Tests whether the object has been initialized.
    
  • _additem (ItemImage As BitmapWrapper) As String
    Adds an item to the menu.
    ItemImage - the image shown as the MenuItem
    
  • _initialize (Activity As ActivityWrapper, Module As Object, EventName As String, AnimatedButtonImage As BitmapWrapper, StaticButtonImage As BitmapWrapper, x As Int, y As Int) As String
    Initializes the object.
    
    Parameters:
    Activity - The activity to add the OrbitalMenu to. Use 'Activity' to pass the current activity.
    Module - Use 'Me'
    EventName - The EventName to be use for callbacks.
    _AnimationEnd(Open as Boolean) - this event triggers once the menu has finished expanding or collapsing.
    Open - will return whether the menu is open or not.
    _Click(Position as Int)
    _LongClick(Position as Int)
    Position - returns the Item Position that triggered the event. First Item = 1.
    StaticButtonImage - A static background for the menu button. Use NULL for no image.
    AnimatedButtonImage - A bitmap that will show in front of the StaticBackgroundImage and will rotate 90 degrees when pressed. Use NULL for no image.
    x, y - The coordinates for where the button will appear.
    
  • _isopen As Boolean
    
  • _setanimatedbuttondimensions (width As Int, height As Int) As String
    Use to override the dimensions of the AnimatedButtonImage
    Defaults are 20dip x 20dip
    
  • _setdegreespan (value As Int) As String
    Sets the amount of degrees the MenuItems Orbit will span from the starting point.
    Default is 90
    
  • _setmenuitemdimensions (width As Int, height As Int) As String
    NOTE: Must be called before Adding and items to the menu.
    Use to override the dimensions of the menu items.
    Defaults are 40dip x 40dip
    
  • _setmenuitemradius (value As Int) As String
    Use to set the Menu item radius (the distance the items pop out from center)
    Default is 120dip
    
  • _setstartdegrees (value As Int) As String
    Sets the angle the MenuItems Orbit will start at.
    Default is 0 (straight up.)
    
  • _setstaticbuttondimensions (width As Int, height As Int) As String
    Use to override the dimensions of the StaticButtonImage
    Defaults are 20dip x 20dip
    
  • _toggle As String
    Simulates a Click of the menu Button

Below I have added both the class (in a demo project) AND the library, both have the same functionality. I added both so you as the user can choose which to use. The library is the easiest to use, just install as any other library. The class is there if you wish to view / edit the code. This is my first attempt at animations, so hopefully others could learn from it too. Enjoy!

Note: This does require the Animation Plus v2 library to be installed too.

 

[koaunglay]

So sorry brio. Because of connection , there are a lot of spaming.

 

[Mashiane]

Hi, how does one open the menu via code after the activity is created...

 

[barx]

Hi, how does one open the menu via code after the activity is created...

Use the toggle method

 

[Mashiane]

Thanks barx!!

 

[Anastasios Michaelides]

Hello, I am trying to implement this beautiful menu to one off my camera applications but I am having issues.
The menu button is visible but the menu items are not visible when I press the menu button.
The strange is that if you press in the area that menu items supposed to be, they are react but not showing up.

Thank you in advance for your help.

 

[barx]

Hello, I am trying to implement this beautiful menu to one off my camera applications but I am having issues.
The menu button is visible but the menu items are not visible when I press the menu button.
The strange is that if you press in the area that menu items supposed to be, they are react but not showing up.

Thank you in advance for your help.

Hi there

Are you your own graphics? are you setting the sizes correctly?

Please give some more info, without it is difficult to help.

Thanks

 

[Anastasios Michaelides]

Hello and thank you for the reply
Sorry but I don't understand what do you mean when you say my own graphics?
I paste your example code to my code, I tested to my other apps and it works.
It seems that is issue with camera interaction because it works only when camera is closed .

the code is:
menu.Initialize(Activity,Me, "ARCMENU", LoadBitmap(File.DirAssets, "menu_button_anim.png"), LoadBitmap(File.DirAssets, "menu_button_bg.png"), 5%x, 50%y)
menu.SetDegreeSpan(180)
menu.SetMenuItemRadius(40%x)
menu.AddItem(LoadBitmap(File.DirAssets, "album.png"))
menu.AddItem(LoadBitmap(File.DirAssets, "maps.png"))
menu.AddItem(LoadBitmap(File.DirAssets, "sett.png"))
menu.AddItem(LoadBitmap(File.DirAssets, "bt.png"))
menu.AddItem(LoadBitmap(File.DirAssets, "mess.png"))
menu.AddItem(LoadBitmap(File.DirAssets, "info.png"))
menu.AddItem(LoadBitmap(File.DirAssets, "info.png"))
menu.AddItem(LoadBitmap(File.DirAssets, "info.png"))
menu.AddItem(LoadBitmap(File.DirAssets, "info.png"))

 

[Anastasios Michaelides]

Hello, the solution is to change the sendtoback line to bringtofront in ArcMenu Class Module.

 

[Mashiane]

Hi there...

I like the ArcMenu a lot and it's brilliant, the thing is, you need to have your menu clearly defined even before you write the code, because the ArcMenu_Click method uses positions and there is no way to specify your own key if you want. This poses problems when you are faced with changing your menu as you go. This leads to having to change the code within Click or LongClick methods. The other thing, the ArcMenu only works with an activity and you cant add items to a panel.

After thinking of a way to do this two hours ago, I played around with this class. This is what I have been able to do so far.

1. You can add a menu item with a key and reference the key in the _Click and _LongClick methods. This is achieved by these additional enhancements

AddItem1(ItemKey As String, ItemImage As Bitmap)

2. This means that your activity's _Click and _LongClick methods also get an upgrage

_Click Method

ArcMenu_Click(position As Int, key As String)

_LongClick Method

ArcMenu_LongClick(position As Int, key As String)

3. On another note, whilst I am only using the _Click methods, I also explored about an Arc in a panel. Below is my own version of initializing the menu on my app. My GetPNG method uses LoadBitmapSample from Dir.Assets with 100%x width and 100%y width.

menu.Initialize(Activity, Me, "ArcMenu", modMashiane.GetPNG("menu_button_anim.png"), modMashiane.GetPNG("menu_button_bg.png"), 50%x, 50%y)

With the additional panel functionality, you can then replace this line with

menu.Initialize1(Activity, Me, "ArcMenu", modMashiane.GetPNG("menu_button_anim.png"), modMashiane.GetPNG("menu_button_bg.png"), 50%x, 50%y)

and then to add to the panel, you use

Normal way however to panel

AddItem3(ItemImage As Bitmap)

Add button to Panel with key

AddItem4(ItemKey As String, ItemImage As Bitmap)

Now with the key in place, I can chop and change my ArcMenu definition without having to worry about the positions

PS: What I did? For each image added, I assigned a tag property using the position of the image and the new key property as a map. For all the code that references the tag property of each image, I then read the map tag and process accordingly. Added Initialize1, AddItem1..4, otherwise the rest of the code is still intact.

 

[BarryW]

how to add this on other panel? tnx

 

[riccf]

Hi there

Are you your own graphics? are you setting the sizes correctly?

Please give some more info, without it is difficult to help.

Thanks

Hi

Is there a way to change the background color? Thanks!!

 

[DonManfred]

Is there a way to change the background color?

Take the class, adapt it to your needs, compile it to a library (if you want to)

 

[barx]

Hi

Is there a way to change the background color? Thanks!!

The background color of what?

 

[JagiChan]

I know this is an old thread, but the update is brand new.

Thanks to BarX, the ArcMenu is impressive, but there is a bug (I did not discover it. My 10 year old was clicking through the menu impatiently when it suddenly stopped working).
The bug: When a user clicks on a menu item while the ArcMenu is still performing the animation, then the menu click is executed. However, when the user returns to the main menu, it does not respond to any more inputs.
Reason: The IsAnimating flag is not being handled properly when menu items are clicked, before animation is completed.

This bug has been fixed in the attached code. Also I have added a revision history which would help documenting future updates.

 

[Jorge Santamaria Magana]

Someone who can help me, I try to test the project but it generates this error: