B4A Library Circle Menu

Hello all, it's been a while since i've posted anything, i've created a few libraries small libraries for personal use and have not had so much time to share them.

Well, today is the day, this library is a wrapper from this library https://android-arsenal.com/details/1/5361 which i wrapped many months ago, i've cleaned it up a little and sharing it with you guys today, is nothing too fancy but it would give a very nice touch to any app in my humble opinion.

attached is the xml and jar files along with a B4A example on how to use it.
Also i'am including the resources folder which needs to be included using the
#AdditionalRes
Click to expand...

Please note that the AppCompat library is needed and the AppCompatActivity needs to be extended from the Main Activity.

Updated 10/10/2017 Version 1.01, Added OpenMenu method.


B4ACircleMenu
Author: Walter Flores
Version: 1
  • CircleMenu
    Events:
    • MenuSelected (index as Int As )
    • OnMenuClosed
    • OnMenuOpened
    Methods:
    • BringToFront
    • Initialize (eventname As String, color As Int, openicon As String, closeicon As String)
      initialize library
      Example
      <code>
      Dim menu as CircleMenu
      menu.Initialize("menu1", Colors.Blue, "open_menu", "close_menu")
      </code>
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • OpenMenu
    • addSubMenu (colors() As Int, icons() As String)
      adds submenu icons to main menu
      receives an array or colors and an array of strings whcih point to the icon resources
      <code>
      Dim rescolors() as int = Array As Int(Colors.red, Colors.blue, Colors.Green,Colors.Magenta)
      Dim icons() as String = Array As String ("camera_2","icon_setting","save_48","blank_file")
      menu.addSubMenu(rescolors, icons)
      Activity.AddView(menu, 0, 0, 100%x, 100%y)
      </code>
    Properties:
    • Background As Drawable
    • Color As Int [write only]
    • Enabled As Boolean
    • Height As Int
    • Left As Int
    • Padding()() As Int
    • Parent As Object [read only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int

circlemenu1.png
circlemenu2.png


Hope you guys enjoy it, any questions please feel free to ask,

Regards,
Walter
 

Attachments

  • CircleMenu_1.0.0.zip
    18.6 KB · Views: 568
  • res.zip
    58.5 KB · Views: 600
  • B4ACircle Menu Example.zip
    16.9 KB · Views: 650
  • B4ACircleMenu_1.01.zip
    19 KB · Views: 563
Last edited:
Click to expand...
M

Mahares

Expert
Licensed User
Longtime User
Very nice piece of work @walterf25
Is there any way to be able to use text instead of icons here:
B4X: 
Dim icons() As String = Array As String("camera_2","icon_setting","save_48","blank_file")
For instance, use this to display the sub menu names:
B4X: 
Dim icons() As String = Array As String("Payable","Received","Stock","Comment")

Also , I noticed that the main menu icon starts out as red, but when clicked, it turns to almost dark brown. Is that by design?
 
walterf25

walterf25

Expert
Licensed User
Longtime User
NJDude said:
Good to see some of the "regulars" still around. :)

Nicely done bud.
Click to expand...
Thanks Bud, i'm still here, just been a bit busy.

Walter
 
walterf25

walterf25

Expert
Licensed User
Longtime User
Mahares said:
Dim icons() As String = Array As String("camera_2","icon_setting","save_48","blank_file")
For instance, use this to display the sub menu names:
B4X: 
Dim icons() As String = Array As String("Payable","Received","Stock","Comment")
Click to expand...
I'm not sure, i can look into it, according to the original project, you can only do icons, i think is what gives the menu the very good looking feature.

As far as the main menu icon, the color can be changed to whatever color you prefer, the color after you open the menu is just a darker color of the color you decide to use and is automatically set, i don't think the function to change the darker color is exposed.

Regards,
Walter
 
walterf25

walterf25

Expert
Licensed User
Longtime User
JordiCP said:
Thanks for sharing!! I like the effect when one of the expanded icons is clicked :)
Click to expand...
Thanks Jordi, it is very cool indeed.

Walter
 
NJDude

NJDude

Expert
Licensed User
Longtime User
Hey Walt, have you noticed that when you tap the "pink" button on your sample (the icon on the left) there's a "partial ghost" button showing on the bottom right corner of the screen?
 
Last edited:
walterf25

walterf25

Expert
Licensed User
Longtime User
NJDude said:
Hey Walt, have you noticed that when you tap the "pink" button on your sample (the icon on the left) there's a "partial ghost" button showing on the bottom right corner of the screen?
Click to expand...
Hey NJ, i haven't noticed it, i will do so me testing soon. Thanks for pointing it out.

Walter
 
walterf25

walterf25

Expert
Licensed User
Longtime User
NJDude said:
Hey Walt, have you noticed that when you tap the "pink" button on your sample (the icon on the left) there's a "partial ghost" button showing on the bottom right corner of the screen?
Click to expand...

Hey NJ, i did some testing but was not able to see what you are seeing, I think you need to lay off those meds bud :p

Any how, i made a short video, let me know if you see what you're describing on the video?

https://www.dropbox.com/s/ss35m602m0ythtu/Circle_Menu.mp4?dl=0

Cheers,
Walter
 
walterf25

walterf25

Expert
Licensed User
Longtime User
NJDude said:
Hmmm, interesting, I will try again and record the screen.

Sorry but I need those meds, I like to see the colors oohhh the colors. :p
Click to expand...
:eek::confused::rolleyes:
 
NJDude

NJDude

Expert
Licensed User
Longtime User
Ok bud, look at THIS clip, tapping on the "pink" button a "quarter" button appears on the button right corner, and if I tap on the "blue" button a quarter appears on the top left corner.

This was tested on my Nexus 6P (Nougat 7.1.1)
 
walterf25

walterf25

Expert
Licensed User
Longtime User
NJDude said:
Ok bud, look at THIS clip, tapping on the "pink" button a "quarter" button appears on the button right corner, and if I tap on the "blue" button a quarter appears on the top left corner.

This was tested on my Nexus 6P (Nougat 7.1.1)
Click to expand...
I see it, i don't see it on any of my devices though, what device are you using? Android Version, Resolution etc.?

Walter
 
walterf25

walterf25

Expert
Licensed User
Longtime User
NJDude said:
Really dude? I mentioned the device and android version, you even quoted my post LOL.

If you need the resolution: 1440x2392 (scale: 3.5 - 560dpi)

I suggest you get thicker glasses :D
Click to expand...
Oops, sorry bud, it was around 11:00pm when i replied to your post, been working 11, 12 hours per day, i was beat last night, anyhow, i suggest you throw away your phone and get a new one :D

Walter
 
M

Mahares

Expert
Licensed User
Longtime User
walterf25 said:
according to the original project, you can only do icons, i think is what gives the menu the very good looking feature
Click to expand...
Your statement is true, but sometimes words are more descriptive especially when you are using the circle menu items to do a certain function that is hard to describe with an icon. If you can add it, that will make your library a lot more versatile, If it is a limitation of the original project, then it is what it is.
Thank you
 
walterf25

walterf25

Expert
Licensed User
Longtime User
G-ShadoW said:
How to programaticly call OnMenuOpened?
Click to expand...
The OnMenuOpened event should fire up automatically when you open the menu.

Regards,
Walter
 
You must log in or register to reply here.
Top