[UPDATE] Free Alpha Dialog | Transparent Dialogs, Custom Toasts and much more

Alpha Dialog Extension
Alpha Dialog is a simple yet powerful and easy to use extension that you can use freely in your projects to create awesome and unique dialogs. The extension allows you create transparent dialogs, full screen dialogs and by using a very simple technique you can use custom color for dim.


Docs

create dialog

Create Dialog using ant visible component. Set cancel-able to true or false

show dialog

Show dialog

dismiss dialog

Dismiss Dialog

on show

This block is called when dialog is shown

OnDismiss

This block is called when dialog is dismissed

wrap content

get wrap content

If Wrap Content is enabled then dialog will force its content to shrink. If false it will cover whole screen. Set this to false to show a full screen dialog.


UPDATES

Annotation 2020-12-25 112802

Show any visible layout or component as a toast. If you are bored using the same text toast again and again and want to make your app look even more better then you can use this block and show custom layouts as toasts. You can find examples below.


Screenshots

>

>

In the above screenshots you can see that you can easily create transparent dialogs with ease. Moreover you can show you content as a dialog without shrinking the content. You can change dim color to any color you want. And you can also create full screen dialogs very easily.


AIX File
com.dreamers.AlphaDialog.aix (9.1 KB)
ImageScale.aia (1017.8 KB)


Hope that it helps you. Keep :kodular: oding. Keep :kodular: reating. Enjoy and please share you thoughts about my extensions as I don’t get any response from you guys. Looking forward for more suggestions for this extensions and for other extensions as well. Thanks.@Peter can I get a extension developer badge


Checkout my YouTube channel : QuickTips

103 Likes
How to create dialog like this
[Free/OS] TopSheet Extension
How to set Notifier Show Alert Position and Time
How to make an app store?
Bottom popup overlay UI
Custom notification
Please Help Me Find Extension
🕊 Floating View: float your component. [FREE] 🕊
Material Color Picker | Super Awesome & Cool Color Picker
Loading splash screen
Center Notifications
Popup text in label
Local Notifications
How to make a Image preview like playstore
Hello Koders is this notification possible in kodular?
I need a way to get the (.Image) of a component after async image loading
Notifications background color changed to white with Android 12
[Guide] RecyclerList - Google Spreadsheet - Custom Search - How to Add/Delete/Update records
Date Picker Display
Making browser app with custom web viewer need htlp
Need help to create ui in browser app
Help me find extension that sends success and warning notifcations from bottom
Image upload galary or camara
Center Notifications
Custom dailog, dismiss when anywhere tap
How to make this type of pop up?
How to create a menu that comes from the bottom of the screen
How to create this type of notification popup
How can i make modal view
How to get this type of screen?
NatureGO - Advanced Social Media App With Many Features
Making Transparent custom notifier for lottie animation
MicrosoftTTS: Convert text to audio using Microsoft TextToSpeech API
Please Assist for Image List View and popup
How to create Dynamic Shortcuts for app
Can kodular do that?
Please Help Me Find Extension
Loading screen related
Application compilation error
How to Create a 'floating layout'?
Nickname Maker - Fancy text and Symbols
Align Notier text to the center of the dialog box
Help me I want these things
[OS] Custom YT Channel App + Admin App
How to create Long Press Menu Like Chrome
Card View Style with a title like this?
Close application with pincode
Show Image In Pop Up Window
Problem notifier: background and text are white
How to make design like this
How to make pop dialog when colintree list view is click call dialog and show it detail
How to make pop dialog when colintree list view is click call dialog and show it detail
Programmed Decorated Text
Hello friends! Please have a blue tick emoji or the same as confirming your Instagram account Send it to me. I want his emoji. Grateful
Create a rating in the form of text
Private Chat - A private chat app between two users

I have added a card view inside an arrangement. Arrangement can be horizontal or vertical.
Annotation 2020-12-24 212540

Then set its height and width to fill parent
Annotation 2020-12-24 212656

Then change the background color of arrangement to any color you like. You can add a full opaque color or a transparent color.
Annotation 2020-12-24 212828

Then in blocks do something like this
blocks

And here you go. You can set any color you like. Enjoy

3 Likes

Thank you for this extension, hopefully just what I needed :slight_smile:

Maybe for Kodular too, but for App Inventor, extension icon needs to be 16 x 16 (not 64 x64)

3 Likes

Well Thanks for your response and sorry because i didn’t knew that. I will change it.
BTW is it working in ai2. Cause I only tested in kodular but it should work fine as far as I know.

Just testing now…

1 Like

Everything seems to be working OK. However, if I set cancelable to true and wrapContent to false, cancelable (just clicking on the screen) does not remove the dialog.

1 Like

set wrap content to false only if you want to show a full screen dialog. Because if it is false the layout you add will stretch to cover whole screen. And cancelable wont work in that case

Wow amazing, useful, extraordinary…
@zainulhassan thanks for all your hard work on making this extension

1 Like

Congratulations Great Job !

2 Likes

Following your example in the post above, if you set completely transparent colour, is the background still meant to dim?

There will be the default dimness as the extension does not change the dim color it just provides a workaround to set your own dim colors

Is this one a full screen dialog with a white background?
image

1 Like

Yes this one is full screen

Thank you.

The important bit is that the background of the dialog elements is transparent :slight_smile:

The extension dialog any thing by Zhangzqs gives a black background to the arrangement, so you win hands down on that score. Well done :slight_smile:

2 Likes

Thanks I am very happy that it helped you.
One Question : In ai2 you don’t have any builtin component to set padding and margin for visible components. Am I right?

1 Like

Correct. There is a margin on the label component with a tick box.

Excellent job
Congratulations

1 Like

Great Extension :nerd_face:

1 Like

Your extension is very useful, congratulations @zainulhassan
:smile: :+1:t2:

1 Like

Wow, the latest update using toast looks even better. But why is the extension icon large, you should make the icon 16 x 16 in size to make it look suitable.

2 Likes