Toggle Button / Tags Group | Create simple and elegant button/tag group

Toggle Button Group

Lets you create simple and elegant button group. It can be configured for single selection or multi selection. For multi selection the minimum/maximum amount of buttons that are required/enabled can be specified. Icon’s can be added. Selection includes a fun press and circular reveal animation.



Create button container in a layout


Add a new button to the group. If no selected text is provided then default text is used. If no selected icon is provided then default icon is used.


Remove button from group

Button Group Properties

select animation

Selection animation.

CircularReveal Fade HorizontalSlide
demo demo demo
VerticalSlide HorizontalWindow VerticalWindow
demo demo demo

selectable amount

Maximum number of items that can be selected. Default value is 1

required amount

Required selection amount. Default value is 1

item spacing

Item spacing. Default is 8.

flex properties

Read detailed docs about flex properties here :

Button Properties


Custom font for text. Upload font as asset.

font size

Font size.

text color

Text color.

selected text color

Selected text color

text padding horizontal

Horizontal text padding.

text padding vertical

Vertical text padding

bg color

Backgroud color.

selected bg color

Selected background color.

icon size

Icon size. Default is 24.

icon spacing

Space between icon and text.

border radius

Card border radius. To create a circular radius use value 155.

border width

Border width.

selected border width

Selected border width.

border color

Border color.

selected border color

Selected border color.


on selected

Event raised when item is selected.


AIX File : com.dreamers.togglegroup.aix (94.2 KB)
AIA File : toggle_group.aia (158.6 KB)

Special Thanks

Special Thanks to @Shreyash for rush. And special thanks Bryan de Ridder for his awesome library. And to @KodularCreator.


I, Zain Ul Hassan, attest that I am the author of the ToggleGroup extension, grant that the extension included in this project is free and that MIT has a non-exclusive irrevocable license to republish the extension as part of the project file for the purposes of the MIT App Inventor Appathon 2021.


awsome extension @zainulhassan :heart_eyes:

will this work in ai2 ?
and can i use it in appathon ?

1 Like

Nice Extension
3D Sounds Great GIF by #sazanimation


1 Like

What is appathon?? It should work in all app inventor based platforms.

appathon is a competition hosted by mit app inventor

1 Like

Can you give a test apk

1 Like

Yeah why not. You can use any of my extension. If it requires license, just let me know I will add it.

for more details about appathon you can check this site

1 Like

Awesome Extension :star_struck:

1 Like

ya it requires

1 Like

another great extension :star_struck:

1 Like

Nice Creation

Really love it. Thanks for your contribution

1 Like

Atleast read the post first. You can do it from designer as well as using these blocks.

1 Like

How did you create this extension even though the library uses kotlin and not java.

1 Like

You can make extensions with kotlin language and kotlin library through Rush

1 Like

Exactly. Now I write my extensions in kotlin. It saves me alot of time plus I dont have to write boilerplate code anymore. Kotlin is awesome

1 Like

Thank you for this wonderful extention.
But I found out something was wrong with her.
When you press the icon three times, there’s a problem, like in this video.


very great extension, very helpful.

I have a question, how to refresh the toggle list? i have a list in tinydb, after I input it, I want to bring it up again with the list I just added.

I’ve tried to do it and the results are double in the previous list, I have data 1,2,3, I add 4, and the results are as in the picture, the old list is displayed double.

blocks (3)

Can this is be used in a Horizontal Scroll Arrangement? In a single line? Currently I am having issues with this scroll.