🟥[FREE]NeoDialog Extension from Still_Learning

Extensions
1

🧩 NeoDialog

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

:memo: Specifications

:package: Package: jsr.neodialog
:floppy_disk: Size: 45.49 KB
:mobile_phone: Minimum API Level: 14
:date: Updated On: 2026-01-23T18:30:00Z
:laptop: 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.

:rocket: 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.

:open_book: 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.

:sparkles: Key Features

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

:brick: 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.

:artist_palette: 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.)

:mobile_phone: 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.

:down_arrow: Download

V1: jsr.neodialog.aix (45.5 KB)

V2: jsr.neodialog.aix (42.4 KB)
MaterialIcon : Direct Download from GoogleFonts <== upload this font in your project asset

:fire::fire::fire: V3: jsr.neodialog.aix (43.4 KB)
This version doesnot require you to upload the material icon font. Just upload this extension and enjoy the fun.

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.

:scroll: Blocks

Summary

A Blockly visual programming interface showing a script that uses a text-to-speech extension to speak various nouns and sentences in Thai language when the space key is pressed. (Captioned by AI)
A Blockly visual programming interface showing a script that uses a text-to-speech extension to speak various nouns and sentences in Thai language when the space key is pressed. (Captioned by AI)1052×1430 117 KB

Newly added block in V2

Summary

image

A programming block labelled 'when NeoDialog1.ErrorOccurred' with parameters 'source' and 'message' and an empty action section. (Captioned by AI)
A programming block labelled 'when NeoDialog1.ErrorOccurred' with parameters 'source' and 'message' and an empty action section. (Captioned by AI)560×181 6.15 KB

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.

If you design the NeoDialog and buttons bg colour in beautiful gradient colours along with the shimmer effect, your card will look like awesome, impressive

:scroll: 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

6 Likes
2

A mobile screen displaying an app interface with a button labeled 'Show NeoDialog TextBox' and the text 'waiting for response..' below it. (Captioned by AI)

A block-based visual programming interface showing code to initialise a NeoDialog with a text box for user input and a button click event that displays the dialog with animation and a prompt asking if the user wants to exit the app. (Captioned by AI)
A block-based visual programming interface showing code to initialise a NeoDialog with a text box for user input and a button click event that displays the dialog with animation and a prompt asking if the user wants to exit the app. (Captioned by AI)537×394 33.9 KB

Untitleddesign-ezgif.com-resize (1)

A colourful visual block code interface showing event handlers for Screen1 initialisation and Button1 click, configuring a NeoDialog component with various settings, buttons labelled 'Yes' and 'No', and applying rotation and shimmer effects. (Captioned by AI)
A colourful visual block code interface showing event handlers for Screen1 initialisation and Button1 click, configuring a NeoDialog component with various settings, buttons labelled 'Yes' and 'No', and applying rotation and shimmer effects. (Captioned by AI)826×285 41.7 KB

sample video and relavent blocks also added

3 Likes
3

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??

4

Nice extension! keep it up :+1:

1 Like
5

Transparency level 75 + blue shimmer

IMG_20260126_063628
IMG_20260126_063628719×731 105 KB

Transparency level 10 + mild black shimmer

A user interface prompt asking if the user wants to exit the app, with options to select Yes or No. (Captioned by AI)
A user interface prompt asking if the user wants to exit the app, with options to select Yes or No. (Captioned by AI)720×753 74.1 KB

6

V4 is updated

V4: jsr.neodialog (1).aix (64.7 KB)

Today 7:49 AM

Developers can build 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 the days but throws error. Finally after texting him he spotted it in less than min and got reply to use the filder name as helpers and not Helpers. (A new learning)

2 Likes
7

V5 Updated (some logics are modifed after testing)

V5: jsr.neodialog.aix (91.0 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
  • In 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.

Sample aia is attached here

Thanks a lot

Still_Learning

2 Likes