B4A Library Simple Circle Menu Library

Simple customisable menu that could have from 1 to 10 (and more) buttons. Wraped from this github project.
CircleMenuLibrary
Version:
1.2
  • CircleMenuLibrary
    Events:
    • onMenuClosed
    • onMenuOpened
    • onMenuSelected (Index As Int)
  • Fields:
    • ba As BA
  • Methods:
    • AddToParent (Parent As ViewGroup, left As Int, top As Int, width As Int, height As Int)
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • 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)
    • closeMenu
      Close the CircleMenu
    • isOpened As Boolean
      Returns whether the menu is alread open
      Return type: @return:
    • openMenu
      Open the CircleMenu
    • setMainIconBitmap (openBitmap As Bitmap, closeBitmap As Bitmap)

      openBitmap:
      closeBitmap:
    • setMainIconDrawable (openDrawable As Drawable, closeDrawable As Drawable)

      openDrawable:
      closeDrawable:
    • setMainIconResource (openRes As Int, closeRes As Int)

      openRes:
      closeRes:
  • Properties:
    • Background As Drawable
    • Color As Int [write only]
    • Enabled As Boolean
    • Height As Int
    • Left As Int
    • MenuColors() As Int [write only]
    • Parent As Object [read only]
    • SubIconBitmaps As List [write only]
    • SubIconDrawables() As Drawable [write only]
    • SubIconResources() As Int [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

  • CircleMenuExample.zip
    15.8 KB · Views: 405
  • CircleMenuLibrary.zip
    17 KB · Views: 353
  • CircleMenuLibraryV2.zip
    17 KB · Views: 400
Last edited:

jahswant

Well-Known Member
Licensed User
Longtime User
B4X:
Dim B1,B2,B3,B4,B5,B6,B7 As Bitmap

Private CircleMenuLibrary1 As CircleMenuLibrary

Activity.LoadLayout("Layout1")
   
   
    B1 = LoadBitmap(File.DirAssets,"email.png")
    B2= LoadBitmap(File.DirAssets,"film.png")
    B3= LoadBitmap(File.DirAssets,"mail.png")
    B4= LoadBitmap(File.DirAssets,"microphone.png")
    B5= LoadBitmap(File.DirAssets,"notification.png")
   
    B6= LoadBitmap(File.DirAssets,"padlock.png")
    B7= LoadBitmap(File.DirAssets,"unlock.png")
   
    Dim ArrayStored As List
   
    ArrayStored.Initialize
   
    ArrayStored.AddAll(Array As Object(B1,B2,B3,B4,B5))
   
    CircleMenuLibrary1.MenuColors = Array As Int(Colors.Blue,Colors.Blue,Colors.Green,Colors.DarkGray,Colors.LightGray,Colors.Yellow)
   
    CircleMenuLibrary2.MenuColors = Array As Int(Colors.Magenta,Colors.Blue,Colors.Green,Colors.DarkGray,Colors.LightGray,Colors.Yellow)
   
   
    CircleMenuLibrary1.setMainIconBitmap(B6,B7)
   
    CircleMenuLibrary1.SubIconBitmaps = ArrayStored
Sub CircleMenuLibrary1_onMenuOpened
Log("CircleMenuLibrary2_onMenuOpened")   
End Sub

Sub CircleMenuLibrary1_onMenuClosed
    Log("CircleMenuLibrary2_onMenuClosed")
End Sub

Sub CircleMenuLibrary1_onMenuSelected(Index As Int)
    Log("CircleMenuLibrary2_onMenuSelected  " &Index)
End Sub

Sub CircleMenuLibrary2_onMenuOpened
Log("CircleMenuLibrary2_onMenuOpened")   
End Sub
 

Daniel-White

Active Member
Licensed User
Longtime User
I just wrapped.I will explore to see if there is a possibility.
Thanks, I did some reverse engineering you wrapped lib, perhaps we can modify the size of circlemenu icons from here?? I am not sure.

This library is very nice, my only complain is the size of the circle menu buttons are so small. It is hard to see for old people. like me :eek:
My idea is put the circlemenu in the middle of layout.


B4X:
    public CircleMenu(Context context, AttributeSet attributeSet, int n) {
        super(context, attributeSet, n);
        this.partSize = this.dip2px(20.0f);
        this.iconSize = this.partSize * 4 / 5;
        this.circleMenuRadius = this.partSize * 3;
        this.shadowRadius = 5;
        this.menuColors = new int[]{Color.parseColor((String)"#CDCDCD"), Color.parseColor((String)"#258CFF"), Color.parseColor((String)"#30A400"), Color.parseColor((String)"#FF4B32"), Color.parseColor((String)"#8A39FF"), Color.parseColor((String)"#FF6A00")};
        this.menuRectFs = new RectF[6];
        this.iconDrawables = new Drawable[5];
        this.status = 16;
        this.init();
    }



I had been trying to Simplecompiler the library but the Simplecompiler say cannot find the import android.support.v4.graphics.ColorUtils

javac 1.7.0_67
C:\library\CircleMenu.java:62: error: package android.support.v4.graphics does not exist
import android.support.v4.graphics.ColorUtils;
^
Note: C:\library\CircleMenu.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
1 error
 

jahswant

Well-Known Member
Licensed User
Longtime User
I had been trying to Simplecompiler the library but the Simplecompiler say cannot find the import android.support.v4.graphics.ColorUtils

javac 1.7.0_67
C:\library\CircleMenu.java:62: error: package android.support.v4.graphics does not exist
import android.support.v4.graphics.ColorUtils;
^
Note: C:\library\CircleMenu.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
1 error

Les gars n'ont pas peur de reverse engineer ici norrr sa me donne les idées.

I Updated the first post with a new version of the library thats relatively solve your issue.
1.png
 
Last edited:

Daniel-White

Active Member
Licensed User
Longtime User

freedom2000

Well-Known Member
Licensed User
Longtime User
Nice library !

Is there a way to suppress the "final big ring" when you click on an item ?
I would rather have no animation just collapsing the menu

Thanks
 

jahswant

Well-Known Member
Licensed User
Longtime User
Hi, this is some cool stuff. I'm getting an index out of bounds when I add an extra button. Seems like its stuck to 5 buttons, can you please check?
And also, if you want to increase the size of the buttons?
Let me check...Never tested with more than five.
 

An Schi

Well-Known Member
Licensed User
Simple customisable menu that could have from 1 to 10 (and more) buttons

Played a bit with it:
- The menu can only have exactly 5 buttons. I tried less and it showed some empty instead of less buttons (above Mashiane tried more buttons, didn't work as well)
- When you place the menu on the edge of the screen, the buttons are pushed outside of the visible area

This is no critic of your work. Just wanted to note down my experience for the next persons searching for a nice menu. ;)
If you want a good looking and good animated five-button-menu this library is very nice!
 
Top