[BETA] Circular menu Extension an interactive circular menu with customizable properties


🧩 CircularMenuX

An extension for MIT App Inventor 2.
Developed by th aka TechHamara using Fast. It allows you to create an interactive circular menu with customizable properties such as colors, sizes, and behaviors

:memo: Specifications


:floppy_disk: Size: 10.83 KB
:gear: Version: 1.0
:iphone: Minimum API Level: 7
:date: Updated On: 2025-01-30T19:00:00Z
:computer: Built & documented using: FAST-CLI
:arrow_down: Download aix here
io.th.circularmenux.circularmenux.aix (10.8 KB)

:placard: Demo aia here
CircularMenuX.aia (14.4 KB)

Demo apk get on GitHub

:selfie:Connect me on Telegram

:test_tube: Bete Tester @Passos_0213

Events:

CircularMenuX has total 2 events.

:yellow_heart: ItemClicked

Triggered when an item in the Circular Menu is clicked.

Parameter Type
index number

:yellow_heart: CenterClicked

Triggered when the center item of the Circular Menu is clicked.

Methods:

CircularMenuX has total 13 methods.

:purple_heart: Initialize

Initialize the Circular Menu inside a Vertical or Horizontal Arrangement.

Parameter Type
arrangement component

:purple_heart: ItemBorderWidth

Get the border width of items

:purple_heart: ItemBorderColor

Get the border color of items

:purple_heart: ItemGap

Get the current gap between items in degrees

:purple_heart: PressedColor

Get the color of a pressed item

:purple_heart: StartAngle

Get the starting angle of the circular menu

:purple_heart: ItemColor

Get the color of a menu item

:purple_heart: BackgroundColor

Get the background color of the circular menu

:purple_heart: InnerRadiusWidth

Get the Inner Radius width of the radius

:purple_heart: OuterRadiusWidth

Get the Outer Radius width of the circular menu

:purple_heart: InnerRadius

Get the inner radius of the circular menu

:purple_heart: Radius

Get the radius of the circular menu

:purple_heart: ItemCount

Get the count of items in the circular menu

Setters:

CircularMenuX has total 14 setter properties.

:green_heart: BackgroundColor

Set the background color of the Circular Menu.

  • Input type: number

:green_heart: PressedColor

Set the Pressed color of the Circular Menu.

  • Input type: number

:green_heart: OuterRadiusWidth

Set the Outer Radius width of the Circular Menu.

  • Input type: number

:green_heart: InnerRadiusWidth

Set the Inner Radius Width of the Circular Menu.

  • Input type: number

:green_heart: Radius

Set the radius of the Circular Menu.

  • Input type: number

:green_heart: InnerRadius

Set the inner radius of the Circular Menu.

  • Input type: number

:green_heart: StartAngle

Set the start angle of the Circular Menu.

  • Input type: number

:green_heart: ItemColor

Set the item color of the Circular Menu.

  • Input type: number

:green_heart: ItemCount

Set the number of items in the Circular Menu.

  • Input type: number

:green_heart: PointerSize

Set the size of the pointers in the center

  • Input type: number

:green_heart: PointerColor

Set the color of the pointers

  • Input type: number

:green_heart: ItemBorderWidth

Set the border width for each item in the Circular Menu.

  • Input type: number

:green_heart: ItemBorderColor

Set the border color for items in the Circular Menu.

  • Input type: number

:green_heart: ItemGap

Set the gap between items in degrees

  • Input type: number

Blocks

CenterClickedBlock

ItemClickedBlock

InitializeBlock

BackgroundColorBlock

InnerRadiusBlock

InnerRadiusWidthBlock

ItemBorderColorBlock

ItemBorderWidthBlock

ItemColorBlock

ItemCountBlock

ItemGapBlock

OuterRadiusWidthBlock

PointerColorBlock

PointerSizeBlock

PressedColorBlock

RadiusBlock

StartAngleBlock

##Demo Output

8bbd444b-6ce6-4c90-964e-b4ea27e3c084

548d4011-9048-4c70-ab80-d4d87935c360

5c4a176c-eedb-4fb5-93b7-3ae4b83ab1a7

18b7f229-f710-4d6e-b920-df816baa8034

de208f3a-871c-4a56-88e3-a3e57e1d6a7f

286e68c2-9981-44ac-a312-aaf6cbe07cc4

Thanks and Regards
TechHamara

3 Likes

Update docs and release aix any suggestions or welcome