🗨️✨ MaterialDialog Extension: Enhanced Dialogs and Toasts for App Inventor

Black_Knight · September 30, 2024, 8:49pm

MaterialDialog Extension

Blocks

Overview

The MaterialDialog extension enhances dialog and toast functionalities for MIT App Inventor. It enables the creation of custom dialogs, bottom sheets, full-screen WebView dialogs, and provides advanced toast and view clickability features.

Functions and Events

1. CreateDialogFromView

Description: Creates a custom dialog using an existing AndroidViewComponent.

Parameters:

dialogId (String): Unique identifier for the dialog
androidViewComponent (AndroidViewComponent): Component for dialog content
cancelable (boolean): Dismissible by outside touch
animationType (int): Animation type for the dialog
paddingDp (int): Padding around dialog content in DP

Note: Ensure that the androidViewComponent is properly configured before >creating the dialog to achieve the desired layout.

image720×1280 78.6 KB

Example:

AlphaDialog1.CreateDialogFromView("myDialog", VerticalArrangement1, true, 1, 10)

2. CreateTitleDialog

Description: Creates a dialog with title, message, and up to three buttons.

Parameters:

dialogId (String): Unique identifier for the dialog
title (String): Dialog title
message (String): Dialog message
positiveButtonText (String): Text for positive button (optional)
negativeButtonText (String): Text for negative button (optional)
neutralButtonText (String): Text for neutral button (optional)
cancelableOnTouchOutside (boolean): Dismissible by outside touch
isIndeterminateProgress (boolean): Show indeterminate progress bar
rgbColor (String): RGB color string (currently unused)

Important: Handle the OnButtonClick event to respond to user interactions with the dialog buttons.

image720×1280 83.1 KB

Events:

OnButtonClick: Triggered on button click. Provides dialogId and buttonType.

Example:

AlphaDialog1.CreateTitleDialog("myDialog", "Confirmation", "Are you sure?", "Yes", "No", "Cancel", true, false, "")

3. DeleteDialog

Description: Removes a dialog from memory and dismisses if showing.

Parameters:

dialogId (String): Identifier of dialog to delete

Caution: Make sure to delete dialogs that are no longer needed to free up memory.

Example:

AlphaDialog1.DeleteDialog("myDialog")

4. Show

Description: Displays a previously created dialog.

Parameters:

dialogId (String): Identifier of dialog to show

Note: Ensure that the dialog has been created before calling this method.

Example:

AlphaDialog1.Show("myDialog")

5. Dismiss

Description: Dismisses a currently showing dialog.

Parameters:

dialogId (String): Identifier of dialog to dismiss

Tip: Use this method to programmatically close dialogs when needed.

Example:

AlphaDialog1.Dismiss("myDialog")

6. OnDismiss

Event: Triggered when a dialog is dismissed.

Parameters:

dialogId (String): Identifier of dismissed dialog

Usage: Use this event to perform cleanup or update UI after a dialog is dismissed.

7. OnShow

Event: Triggered when a dialog is shown.

Parameters:

dialogId (String): Identifier of shown dialog

Tip: This event is useful for performing actions right after a dialog becomes visible.

8. OnCreateDialogError

Event: Triggered on dialog creation error.

Parameters:

errorMessage (String): Description of the error

Important: Always handle this event to catch and respond to dialog creation errors.

9. LongLength

Property: Represents long duration for toasts (1).

10. ShortLength

Property: Represents short duration for toasts (0).

Note: Use these properties to set consistent toast durations across your app.

11. ShowToast

Description: Displays a toast message using an AndroidViewComponent.

Parameters:

androidViewComponent (AndroidViewComponent): Component for toast content
i (int): Toast duration (0 for short, 1 for long)

Tip: Custom toasts allow for more complex layouts than standard text-only toasts.

image720×209 98.9 KB

Example:

AlphaDialog1.ShowToast(Label1, AlphaDialog1.LongLength)

12. WrapContent

Property: Controls whether toast content should wrap (true) or not (false).

Note: Set this property before showing a toast to control its layout behavior.

13. CreateBottomSheet

Description: Creates a Bottom Sheet dialog with custom content.

Parameters:

dialogId (String): Unique identifier for the Bottom Sheet
contentLayout (AndroidViewComponent): Component for Bottom Sheet content
cancelable (boolean): Dismissible by outside tap

Usage: Bottom Sheets are great for displaying additional information without >leaving the current screen.

image720×1280 46.2 KB

Example:

AlphaDialog1.CreateBottomSheet("myBottomSheet", VerticalArrangement1, true)

14. ShowBottomSheet

Description: Displays a Bottom Sheet dialog.

Parameters:

dialogId (String): Identifier of Bottom Sheet to show

Note: Ensure the Bottom Sheet has been created before calling this method.

Example:

AlphaDialog1.ShowBottomSheet("myBottomSheet")

15. DismissBottomSheet

Description: Closes a Bottom Sheet dialog.

Parameters:

dialogId (String): Identifier of Bottom Sheet to dismiss

Tip: Use this to programmatically close Bottom Sheets when needed.

Example:

AlphaDialog1.DismissBottomSheet("myBottomSheet")

16. OnBottomSheetDismissed

Event: Triggered when a Bottom Sheet is dismissed.

Parameters:

dialogId (String): Identifier of dismissed Bottom Sheet

Usage: Use this event to update your app's state after a Bottom Sheet is closed.

17. CreateWebViewDialog

Description: Creates a full-screen WebView dialog.

Parameters:

dialogId (String): Unique identifier for the dialog
url (String): URL to load in WebView
cancelable (boolean): Dismissible by outside tap
animationType (int): Animation type for dialog
userAgent (String): Custom UserAgent string (optional)

Important: Ensure the URL is properly formatted and accessible before creating the WebView dialog.

Events:

AfterPageLoaded: Triggered when WebView finishes loading. Provides dialogId and url.

Example:

AlphaDialog1.CreateWebViewDialog("webDialog", "https://www.example.com", true, 1, "MyCustomUserAgent")

18. EvaluateJSInDialogWebView

Description: Executes JavaScript in a dialog's WebView.

Parameters:

dialogId (String): Identifier of dialog with WebView
jsCode (String): JavaScript code to execute

Caution: Be careful when executing JavaScript code, especially with user-provided input.

Events:

AfterEvaluation: Triggered after JS evaluation. Provides dialogId and result.

Example:

AlphaDialog1.EvaluateJSInDialogWebView("webDialog", "document.getElementById('myElement').innerHTML")

19. MakeWholeViewClickable

Description: Makes an entire AndroidViewComponent clickable.

Parameters:

viewComponent (AndroidViewComponent): Component to make clickable
viewId (String): Unique identifier for the view
clickable (boolean): Enables/disables click events
longClickable (boolean): Enables/disables long-click events

Note: This function adds a visual feedback (gray overlay) on click, enhancing user interaction.

Events:

ViewClicked: Triggered on view click
ViewLongClicked: Triggered on view long-click

Example:

AlphaDialog1.MakeWholeViewClickable(HorizontalArrangement1, "myLayout", true, true)

20. AfterPageLoaded

Event: Triggered after WebView in dialog loads a page.

Parameters:

dialogId (String): Identifier of dialog with WebView
url (String): Loaded URL

Usage: Use this event to perform actions after a page has finished loading in the WebView.

21. AfterEvaluation

Event: Triggered after JS evaluation in WebView dialog.

Parameters:

dialogId (String): Identifier of dialog with WebView
result (String): Result of JS evaluation

Tip: This event is useful for handling the results of JavaScript execution in the WebView.

22. ViewClicked

Event: Triggered when a view made clickable is clicked.

Parameters:

viewId (String): Identifier of clicked view

Note: Use this event to respond to clicks on views made clickable with MakeWholeViewClickable.

23. ViewLongClicked

Event: Triggered when a view made clickable is long-clicked.

Parameters:

viewId (String): Identifier of long-clicked view

24. Drawer Functions:

CreateDrawer(drawerId, contentLayout, mainLayout, drawerWidth, gravity):
- drawerId (String): A unique identifier for the drawer.
- contentLayout (AndroidViewComponent): The layout component that will hold the content of the drawer.
- mainLayout (AndroidViewComponent): The main layout component of your screen.
- drawerWidth (Number): The width of the drawer in density-independent pixels (dp).
- gravity (Number): Where the drawer should appear. Use 1 for Gravity.START (left side in left-to-right languages) and 2 for Gravity.END (right side).
- Description: Creates a Drawer and adds it to the main layout. The main layout must be the Screen component.
OpenDrawer(drawerId):
- drawerId (String): The ID of the drawer to open.
- Description: Opens the specified drawer.
CloseDrawer(drawerId):
- drawerId (String): The ID of the drawer to close.
- Description: Closes the specified drawer.
- Example:

call MaterialDialog1.ShowListDialog
  dialogId = "listDialog1"
  title = "Choose an Option"
  itemsString = "Option 1,Option 2,Option 3,Option 4"

25.ShowDatePickerDialog(dialogId)**

Parameters:
- dialogId (String): A unique identifier for the date picker dialog.
Description: Shows a date picker dialog that allows the user to select a date (year, month, and day). When a date is selected, the OnDatePicked event is triggered.
Example:

call MaterialDialog1.ShowDatePickerDialog
  dialogId = "datePicker1"

26. ShowTimePickerDialog(dialogId)

Parameters:
- dialogId (String): A unique identifier for the time picker dialog.
Description: Shows a time picker dialog that allows the user to select a time (hour and minute). When a time is selected, the OnTimePicked event is triggered.
Example:

call MaterialDialog1.ShowTimePickerDialog
  dialogId = "timePicker1"

ShowListDialog(dialogId, title, itemsString)

image1000×435 50.1 KB

Parameters:
- dialogId (String): A unique identifier for the list dialog.
- title (String): The title to display at the top of the list dialog.
- itemsString (String): A comma-separated string of items that you want to display in the list.
Description: Shows a dialog with a list of items. When the user selects an item, the OnItemSelected event is triggered, providing the selected item's text and its index in the list.
Example:

call MaterialDialog1.ShowListDialog
  dialogId = "listDialog1"
  title = "Choose an Option"
  itemsString = "Option 1,Option 2,Option 3,Option 4"

Tip: Long-click events can be used to provide additional options or actions for a view.

Aix file

MaterialDialog.aix - V1 (2.3 MB)

MaterialDialog.aix - V2 (2.4 MB)

MaterialDialog.aix - V3.aix (2.4 MB)

Video Preview
20241025_115853_0001 (1)

AIA_File

dialogs.aia - for V2 (4.4 MB)

Support Our Work

If you find the MaterialDialog extension helpful in your projects, please consider supporting our work. Your contributions help us maintain and improve the extension, create documentation, and develop new features.

Connect With Us

Stay updated with the latest developments, get support, or contribute to the AlphaDialog extension by connecting with us on our social media channels:

TIMAI2 · September 30, 2024, 8:57pm

You probably need to update your first post with example blocks, most developers here will not understand your text representations.

Black_Knight · September 30, 2024, 9:01pm

Ok, I will replace them soon thanks @TIMAI2 for you recommendation

TIMAI2 · September 30, 2024, 9:14pm

Does it work in Companion ?

A simple toast

devxlabs · October 1, 2024, 12:22am

Can we make a bottom sheet like this

Black_Knight · October 1, 2024, 8:46am

No , but I will update it to achieve this request

Black_Knight · October 1, 2024, 8:47am

Yes , did you try it ?

enviro500 · October 18, 2024, 2:29pm

How do I make this bottom sheet (the image below). Do I just add the buttons in the component.

this is my code

but i keep receiving this error

Runtime Error
java.lang.NoClassDefFoundError: Failed resolution of: Lcom/google/android/material/R$attr;

Black_Knight · October 24, 2024, 10:54am

Make this block to be requested one time for example when screen initialized block
And remove it from when button clicked to avoid requesting it multiple times

Black_Knight · October 25, 2024, 9:14am

Now the Extension has been updated to achieve your request

Black_Knight · December 23, 2024, 9:34am

New functions Added to V3

Black_Knight:

24. Drawer Functions:

image1064×784 43.9 KB

CreateDrawer(drawerId, contentLayout, mainLayout, drawerWidth, gravity):

drawerId (String): A unique identifier for the drawer.

contentLayout (AndroidViewComponent): The layout component that will hold the content of the drawer.

mainLayout (AndroidViewComponent): The main layout component of your screen.

drawerWidth (Number): The width of the drawer in density-independent pixels (dp).

gravity (Number): Where the drawer should appear. Use 1 for Gravity.START (left side in left-to-right languages) and 2 for Gravity.END (right side).

Description: Creates a Drawer and adds it to the main layout. The main layout must be the Screen component.

OpenDrawer(drawerId):

drawerId (String): The ID of the drawer to open.

Description: Opens the specified drawer.

CloseDrawer(drawerId):

drawerId (String): The ID of the drawer to close.

Description: Closes the specified drawer.

Example:
when Screen1.Initialize
  do call MaterialDialog1.CreateDrawer
    drawerId = "myDrawer"
    contentLayout = VerticalArrangement_DrawerContent // Layout for drawer content
    mainLayout = Screen1 // The main screen layout
    drawerWidth = 250
    gravity = 1 // Left-side drawer
25.ShowDatePickerDialog(dialogId)**

image1080×1920 131 KB

Parameters:

dialogId (String): A unique identifier for the date picker dialog.

Description: Shows a date picker dialog that allows the user to select a date (year, month, and day). When a date is selected, the OnDatePicked event is triggered.
Example:
call MaterialDialog1.ShowDatePickerDialog
  dialogId = "datePicker1"
26. ShowTimePickerDialog(dialogId)

image1080×1920 137 KB

Parameters:

dialogId (String): A unique identifier for the time picker dialog.

Description: Shows a time picker dialog that allows the user to select a time (hour and minute). When a time is selected, the OnTimePicked event is triggered.

Example:
call MaterialDialog1.ShowTimePickerDialog
  dialogId = "timePicker1"
ShowListDialog(dialogId, title, itemsString)

image1000×435 50.1 KB

Parameters:

dialogId (String): A unique identifier for the list dialog.

title (String): The title to display at the top of the list dialog.

itemsString (String): A comma-separated string of items that you want to display in the list.

Description: Shows a dialog with a list of items. When the user selects an item, the OnItemSelected event is triggered, providing the selected item's text and its index in the list.

Example:
call MaterialDialog1.ShowListDialog
  dialogId = "listDialog1"
  title = "Choose an Option"
  itemsString = "Option 1,Option 2,Option 3,Option 4"

husnain · December 23, 2024, 10:04am

Thank you, today I used your extension for bottom sheet and you have added new functions in V3. Thanks a lot.