🟩 [FREE] NeoDialog Extension from Still_Learning

[Still_Learning]

🧩 NeoDialog

An extension for MIT App Inventor 2.
NeoDialog Final: Input Support, Shimmer Effect, Transparency Control, and Strict Block Dropdowns.

Specifications

---

Package: jsr.neodialog
Size: 45.49 KB
Minimum API Level: 14
Updated On: 2026-01-23T18:30:00Z
Built & documented using: FAST v5.3.2-premium

This is a fantastic extension! It includes advanced features like Shimmer effects, Glassmorphism, and Input handling which are highly sought after in the community.

Here is a comprehensive guide formatted for the Kodular Community and MIT App Inventor Community. You can copy and paste this directly into a new post.

---

Introducing NeoDialog: The Ultimate Custom Dialog Extension

Created by: @Still-learning
Version: 1.0
Platform: Kodular & MIT App Inventor
Credit to: @JEWEL for his wounderful FAST@CLi platfrom for making extension easily.

Overview

NeoDialog is a powerful, non-visible extension that allows you to create stunning, fully customizable dialogs. Move away from boring standard alerts and create modern UIs with curves, gradients, glassmorphism, animations, and input fields.

Key Features

• Advanced Styling: Support for gradient backgrounds, transparency, borders, and Glassmorphism.
• Flexible Positioning: Show dialogs at Top, Center, or Bottom.
• Animations: Enable Shimmer effects on text and Rotation animations for icons.
• Input Support: Add TextBoxes (Text, Number, or Password) with Submit/Cancel buttons.
• Material Icons: Built-in support for Material Design icons using just strings.
• Curved Layouts: Option for beautiful curved dialog corners.

---

Blocks Documentation

1. Initialization

Use this block to set up a new dialog. You must assign a unique Tag to every dialog (e.g., "Dialog1").

• Tag: A unique string to identify the dialog.
• Anchor: Can be set to Any Component or left as generic if not used for anchoring.
• Cancelable: True if user can tap outside to close.
• Position: Use the dropdown blocks (e.g., PositionBottom).
• Layout: Vertical or Horizontal button arrangement.
• Background Colors: A list of colors for the gradient (e.g., create a list with Red and Blue).
• Top Image: The filename of an image in your assets (or "default" for app icon).
• Size: Size of the top image in dp.
• Curved: True for rounded corners.
• Icon Alignment: AlignLeft, AlignRight, or AlignCenter.
• Rotation: True to animate the top image spinning.

2. Adding Content

These blocks allow you to add elements to the dialog identified by the Parent Tag.

AddButton:
Adds a clickable button to the dialog.

• Icon Name: Use text strings like "check", "close", "delete", etc. (See full list below).

AddTextBox:
Adds an input field with custom Submit/Cancel buttons.

• Tag: A unique ID for this specific textbox.
• Hint: The placeholder text.
• Is Password/Number: Toggle input type.
• Submit/Cancel Configs: Customize text and colors for the action buttons.

3. Styling & Effects

Beautify:
Apply modern visual effects.

• Glass Mode: True for a blur effect (depending on system support).
• Transparency: 0 (invisible) to 255 (solid).
• Border Size & Color: Add a custom border outline.

ApplyShimmer:
Creates a moving light reflection effect on the dialog's text.

• Shimmer Color: The color of the light beam.
• Duration: Speed of the animation in milliseconds.

SetRotationSpeed:
Change how fast the top icon spins (if enabled in Initialize).

4. Actions

Show:
Displays the dialog.

• Tag: The ID of the dialog to show.
• Title: The main heading.
• Message: The sub-text.

Dismiss:
Closes the dialog programmatically.

---

Available Material Icons

You can use the following strings in the Icon Name property:

• Actions: check, close, cancel, add, delete, edit, save, exit, search, refresh, share, star, favorite, thumb_up, warning, error, info, help
• Navigation: arrow_back, arrow_forward, home, exit_to_app, open_in_new, history, map, location_on
• Social: email, phone, chat, notifications
• Media: photo, camera_alt, videocam, music_note, mic
• System: settings, lock, lock_open, power_settings_new, fingerprint, wifi, bluetooth, airplanemode_active, battery_full

(Note: The extension uses MaterialIcons-Regular.ttf internally, ensuring these icons render without needing external image files.)

---

Example Usage (Logic Flow)

Here is a simple example of how to create a Login Dialog:

1. When Screen1 Initialize:

   • Call Initialize:
     • Tag: "LoginDialog"
     • Position: PositionCenter
     • BgColors: Make a list of (White), (Light Gray)
     • Curved: True

2. When Button1 Click:

   • Call AddTextBox:
     • ParentTag: "LoginDialog"
     • Hint: "Enter Password"
     • IsPassword: True
     • SubmitText: "Login"
   • Call Beautify:
     • Tag: "LoginDialog"
     • GlassMode: True
     • Transparency: 230
   • Call Show:
     • Tag: "LoginDialog"
     • Title: "Welcome Back"
     • Message: "Please enter your credentials."

3. When InputSubmitted (Event):

   • Check clickButtonText. If it equals "Login":
     • If inputText is correct, do something. Else, show a notification.

---

Download

V1: jsr.neodialog.aix (45.5 KB)

V2: jsr.neodialog.aix (42.4 KB)
MaterialIcon : Direct Download from GoogleFonts

V3: jsr.neodialog.aix (43.4 KB)
(it doesnot require material icon font in their app asset. Already i have inbuild into extension asset and i called it successfully without troubling kodular or mit app).

V2 Updates:

Wheni try to access material icon from the extension assets i find difficulty to access it in various app platforms. So the best approach (in my conscern), kindly upload the MaterialIcons-Reguls.ttf
in to your app asset. I find no difficulty insetting material icons in any kind of appdeleopment platforms. No change in the blocks setup.

Summary

Newly added block in V2

V3 Updates:

I have modified the code so here then user no need to upload materialicon font in their app assest. I struggled a lot to solve this issue but it was achieved and i felt very very happy. Now it supports more than 128 material icons code.

No change in the blocks. only logic was changed.

Recommened Version is V3:

Blocks

Summary

License

Free to use for personal and commercial projects.

Feedback and bug reports are welcome!

{Note] If you do not want top image then set empty text box. if you give text as default then app icon will set as topimage. You canuse gradient effects and shimmer effects to import beautiful notification card

sample: shimmer + rotation + top/bottom/center postion (buttons in horizontal)

Summary

Textbox

Summary

you can change the card gradient colours as well the buttons background. change the roation speed. shimmer time.

[Still_Learning]

@Still_Learning

V3: jsr.neodialog.aix (43.4 KB)
(it doesnot require material icon font in their app asset. Already i have inbuild into extension asset and i called it successfully without troubling kodular or mit app).

Version 3 has been updated in the first post. In this version, users no longer need to include Material Icons in their project. In earlier versions, I faced issues with both Kodular and MIT App Inventor platforms, so I left the option for users to upload the font themselves.

This new version feels better and includes nearly 128 symbols. If possible, please test the updated version and share any errors you encounter. No special permissions are required.

[ProTip]: You can use this dialog as a loader too. Just by using initi + shimmer + show function with title and subtitle if req. So the shimmer effect along with rotating topimage will give iconic experience to the users.

I tried to make the top icon to move left to right and viceversa even iscurved enabled. But i feel it is not smooth for me. What is your opinion

[Still_Learning]

V4 is reeased with few more options

V4: jsr.neodialog.aix (64.7 KB)
2026-01-28T02:19:00Z

now

1. button
2. textbox
3. toggle switch
4. radio buttons
   5, rating stars ( material icon supports, availble icons have given as separate simplefunction to avoid confusion)

Now Timer functions was added. Untill the timer over, user cannot see the components built in the neoDialog or cannot access the page, especially cannot cancel the dialog page. It will read your value after the timeer is over

Developer can customonize the title, subtittle colour, text, font size. Also can update these value after timercompletes.

Spl thanks to @JEWEL for helping me to resolve the helpers block. I thought we can use customized folder name so i was trying the same more than a day but got error. Finally after texting him he spotted it in less than min and got reply to use the fil5der name as helpers and not Helpers. (A new learning )

[uskiara]

Wow and then Wow, plus Wow !!!
(Still)Learning is truly infinite....
Could you please also add a small .aia, so to start playing ?
Cheers !

[Still_Learning]

V5 Updated (some logics are modifed after testing)

V5: NeoDialog_GSR.aia (96.7 KB)2026-01-28T18:25:00Z

• When timer reaches the danger limti background will turn to red
• Now neodialog title, subtitle font , colour can be changed
• Can cancel the shimmer effect
• Future let we add digital font ( so for i tried but failed)

Feel free to test and share us your feedback if possible.
(Note: Whatever component you want to create pls add it in the screen initialization in any number and you can call it any component using its tag). If you dont add any component , using rotating effect and shimmer you can use it as loading dialoge. users cannot by pass it untill it gets over or set cancellable to true.

Thanks a lot

Still_Learning

[uskiara]

Simply great !
Thanks a lot @Still_Learning.
Cheers.