[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

59 Likes

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

1 Like

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)

2 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 !

1 Like

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:

1 Like

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?

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.

1 Like