B4A Library AMRadialMenu 1

Hello

Library File & Example Download

Latest Version: 110 : All Future Updates of this component are maintained here.


1. Each menu item can be assigned a badge.
2. The radial menu can be placed anywhere in the screen, top left, bottom right etc. (to figure out how to center on page)

Here is some example code...

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Private rm As AMRadialMenu
    Private pg As AMPage
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
    Activity.Title = "Radial Menu"
    pg.Initialize(Me, "pg",0dip,0dip,100%x,100%y)
    rm.Initialize("rm","settings.png", "windowsback.png", True)
    'rm.Position = rm.EnumRadialMenuPosition.righttop
    'rm.enableAnimation = False
    rm.BackgroundColor = "red"
    'rm.Radius = "100"
    'rm.renderMode = pg.EnumRenderMode.android

    'add individual menu items
    rm.AddMenuItem("google", "Google", "", "google.png", True)
    rm.AddMenuItem("music", "Music", "", "music.png", True)
    rm.AddMenuItem("direction", "Direction", "", "map.png", True)
    rm.AddMenuItem("message", "Message", "300", "messaging.png", True)


    pg.AddRadialMenu(rm)
    pg.Render
    Activity.AddView(pg.asview, 0dip, 0dip, Activity.Width, Activity.Height)
    Activity.AddMenuItem3("Tiles", "cmdTiles",LoadBitmap(File.DirAssets,"tiles.png"),True)

 

[Mashiane]

Trapping the menu click event...

Sub pg_MenuClicked(value As String)
    'show the name of the menu selected
    'value returns the index of the selected item
    Log(value)
    Dim menu As String = rm.GetID(value)
    Activity.Title = menu
End Sub

 

[Wolli013]

Nice, thank you!

 

[zsugar]

Hi, the downloading link is AMTileView

 

[Mashiane]

Hi, the downloading link is AMTileView

Yes, I am aware of this, the components are based on the same pot of source code i.e. javascript, however they are still separate components. Play around with the example and see.

 

[Mashiane]

Version 108, download from same location, library name is AMTileView108 The Radial Menu can now be placed in the middle of the screen. This is the Android Flavour...

This will now be maintained and be part of the AMTileView library

 

[Mashiane]

The IOS Flavour / Theme..

 

[Mashiane]

The Windows Theme...

 

[Wolli013]

The Windows Theme...

View attachment 52529

We can change the Color of Out Circle?
Circle Transparent?

 

[Mashiane]

We can change the Color of Out Circle?
Circle Transparent?

Will look into it...

 

[Mashiane]

What's New: Version 109 (same location as in Post #1)

1. The WindowsTheme Outer Circle can now be transparent. As the radius for this theme is smaller, increase it

rm.Radius = 200
rm.HideOuterCircle = True

2. Added functionality for SubMenus, for example the Twitt menu has child buttons.. Clicking the arrow goes back to the menu. In this case, the outer circle is hidden so one has to touch just outside that button. If there are no child buttons, there is nothing to worry about. Investigating how I can just show only the arrow button if there are child buttons.

3. Removed the GetID method, the MenuClicked item now returns the id of the selected menu and id of child menu if it exists. For now this is still buggy and only works for the Flat and Windows themes.

Sub pg_MenuClicked(value As String, childIndex As String)
    'update the badge
    'return the clicked value and childindex
    Activity.Title = value & "," & childIndex
End Sub

4. Added some extra methods for the Radial Menu. Each item in the menu has an index starting from zero, in the sequence you add items to the RadialMenu in.

4.1 DisableItemByIndex
4.2 EnableItemByIndex
4.3 HideBadge
4.4 ShowBadge
4.5 UpdateBadgeValue
4.6 SetRenderMode
4.7. SetPosition
4.8 SetRadius

Enums

EnumRadialMenuPosition.Initialize
    EnumRadialMenuPosition.leftcenter = "leftcenter"
    EnumRadialMenuPosition.lefttop = "lefttop"
    EnumRadialMenuPosition.leftbottom = "leftbottom"
    EnumRadialMenuPosition.rightcenter = "rightcenter"
    EnumRadialMenuPosition.righttop = "righttop"
    EnumRadialMenuPosition.rightbottom = "rightbottom"
    EnumRadialMenuPosition.topcenter = "topcenter"
    EnumRadialMenuPosition.bottomleft = "bottomleft"
    EnumRadialMenuPosition.bottomcenter = "bottomcenter"
    EnumRadialMenuPosition.none = ""

EnumRenderMode.Initialize
   EnumRenderMode.windows = "windows"
   EnumRenderMode.auto = "auto"
   EnumRenderMode.android = "android"
   EnumRenderMode.flat = "flat"
   EnumRenderMode.ios7 = "ios7"

Events (linked to the AMPage object)

[CODE]#Event: MenuClicked (value As String, childIndex as string)

[/CODE]

 

[Mashiane]

Adding a menu item with child menu items...

Dim rmi As AMMenu
    rmi.Initialize("twitt","Twitt","3","twitt.png", True)
    rmi.AddSubMenu("google","Google","1","google.png", True)
    rmi.AddSubMenu("music", "Music",  "", "music.png", True)
    rmi.AddSubMenu("direction", "Direction", "", "map.png", True)
    rmi.AddSubMenu("message", "Message", "300", "messaging.png", True)
    rmi.AddSubMenu("mindmap","Mind Map","","mindmap.png", True)
    rm.AddMenu(rmi)

 

[Wolli013]

Thank You!

 

[javiers]

Congratulations for your work.
You can use AMRadialMnu on a page other than AMPage. I would like to use this control on a page that I have already defined. Or can you put AMPage transparent?

Thanks for your answer.

 

[Mashiane]

@javiers

The AMPage component itself is a webview control that renders html content. The radial menu as a javascript css based component uses that too including webviewextras to trap its events. Try the SetBackground method of AMPage with the color you want, in this case "transparent", havent tested though.