AwesomeDialog Extension Documentation
Version: 1.0
Author: MrKoder
Description: Create modern, beautiful, and highly customizable dialogs within your App Inventor projects. Move beyond the basic Notifier component with styled pop-ups featuring icons, custom colors, multiple button layouts, and even frosted glass effects.
Downloads:
-
AIX File:
awesomedialog.aix (2.4 MB) -
AIA_File:
awesomeDialoge.aia (2.4 MB) -
Font_File
MaterialIcons-Regular.ttf => make sure to add this file into your project assets
Introduction
The AwesomeDialog extension provides blocks to create various types of dialogs (pop-up messages) that appear at the bottom of the screen. These dialogs are more visually appealing and flexible than the standard App Inventor Notifier. You can customize:
-
Icons (loaded from URLs, assets, or storage)
-
Titles and Messages
-
Text colors
-
Button text, colors, and arrangements (single, double vertical)
-
Background colors and corner rounding
-
Cancelability (whether tapping outside dismisses the dialog)
-
Frosted glass background effect
Each dialog you create needs a unique dialogId (text string). This ID is used to show, dismiss, or delete that specific dialog later.
Blocks Reference
Notes and Tips
-
Unique IDs: Always use unique dialogId strings for each distinct dialog you want to manage independently.
-
Color Contrast: Ensure your text colors have good contrast against the white dialog background and your button text (usually white) contrasts well with the button background color.
-
Image Loading: Images from URLs or storage might take a moment to load. Consider this in your UI flow. Asset images load much faster.
-
Cancelable: Think about the user experience. Should the user be forced to interact with the dialog (cancelable = false), or can they easily dismiss it (cancelable = true)?
-
Dismissal: Dialogs created with buttons are automatically dismissed when a button is clicked. You usually don't need to call the Dismiss block within the button click events unless you want to dismiss it programmatically at another time.
-
Frosted Dialog: The frostTintColor must have transparency (alpha channel) for the effect to work. Use the Make Color block and adjust the alpha slider.
If you like my work, you can support me here