Custom Dialogs (Without Extensions)

[RaYzZz (Gianluca Franco)]

Hi everyone !!!
Today, I want to share a method for creating custom dialogues without using any extensions.

Designer

First, you’ll need a full-screen Vertical Scroll Arrangement (VSA_Main).
Inside this, we’ll create two main vertical arrangements:

• VA_Layout_Main: This will serve as the primary container for all your app’s layouts.
• VA_Dialog_Main: This will house all our custom dialogues.
  Each layout dialogue will be placed within its own vertical arrangement.

Next, we’ll add the final components: Decoration, Clock, and Animation.

---

Blocks

During screen initialization, we’ll call the initializeLayout function.

This function performs the following steps in order:

• Set both main layouts.Height to match the screen height.
  VA_Dialog_Main.Height = VSA_Main.Height+2 because I noticed that on some devices, VA_Dialog_Main was one pixel shorter than VSA_Main .
  (I hope someone with more experience can explain why this happens).

I think I’ve solved this problem, but it’s necessary to use an extension

Fix

The problem lies in the screen DP, in my case, a number with a decimal point that was rounded down, causing those missing pixels.
The legendary bodymindpower created this very useful extension that allows you to get the real screen DP,
Get Device Metrics → DisplayMetrics │ Resolution - Density - Font scaling - Extensions - MIT App Inventor Community

having this data, we round it up and the problem seems to be solved.

-56 = TitleBar.Height
CustomDialogMetrics.aia (40.1 KB)

• Then, assign the value "margin" to the clockFunction variable (we’ll explain the reason for this shortly)
• And enable the clock.

As soon as the clock runs

• We stop it.
• If clockFunction is set to "margin", we set the top margin of VA_Dialog_Main to the negative height of VSA_Main, causing VA_Dialog_Main to slide over and cover VA_Layout_Main.
• We then hide VA_Dialog_Main.

The screen.BackgroundColor = -1 condition is a workaround i came up with to avoid creating a separate variable to track the first clock execution .
It’s admittedly a hack, but it shouldn’t cause issues, and if it does, we’ll address it later

• If clockFunction = "orientationChanged" is used to handle device rotation,
  when the phone is rotated the heights of VA_Dialog_Main and VA_Layout_Dialog wouldn’t automatically update, this function ensures they do.

I’ve also added a small function to set up the layout for the various dialogues.

This function

• Hides all layouts and makes only the specified one visible.
• Changes the background of VA_Dialog_Main.
  For example, the alert dialog remains transparent, while the offline dialog uses a black background with high transparency.
• An animation in then played to avoid making the transition feel too static.

---

The result

CustomDialogWE.aia (32.6 KB)

What if I wanted a blurred background?

I need to know! NOW!

Add this awesome extension from @varsha
[Free] BlurBackground with image. My 11th extension

Simply add this block when switching between layouts,
and that’s it!
CustomDialogBlur.aia (40.4 KB)

---

I’ve tested the APK on Android 12, 13, and 14, and everything appears to be working correctly.
If anyone would like to try it on other devices, I’ll be very grateful.
Please report any issues you encounter, and we can work together to resolve them!

---

IMPORTANT!!!

Many thanks to @iamwsumit, his guide:

Slide and animate arrangement with animation utilities

Hello everyone welcome again Today I am sharing a little logic with you all How to slide two layout in one screen both horizontally and vertical First we will overlap a layout vertically Component Required [Annotation 2020-10-09 172900] Blocks Images [blocks (24)] You can set the desired duration for speed Screen output Now we are going to slide the layout [Vertically] Component Required [Annotation 2020-10-09 172900] Blocks Images [blocks (26)] Screen Output Now …

Gave me the idea for this method

---

Happy oding

[FIKIR_KUMESI (TÜRKİYE)]

great guide

[RaYzZz (Gianluca Franco)]

Custom Dialog Extra

Hi everyone, recently a user needed a drawer layout and, thanks to this guide, we managed to recreate it.
So, I wanted to share the result publicly.
On top of that, I also added a custom snackbar and a full-screen Lottie, which can produce some really nice effects.

With the recent update to SDK35, I noticed that the title bar and status bar were causing issues, so I removed them for convenience.
If you need them active, you just have to subtract them from the height variable.

I left the GetMetrics extension implemented, it can be removed and replaced with the +2 method.

And I modified this part of the setDialogLayout function.

CustomDialogExtra.aia (50.9 KB)

Happy oding!!!

[RaYzZz (Gianluca Franco)]

Custom Dialog Floating Action Buttons

Hi all!

A user asked me how to create this layout, and we managed to replicate it with this guide,
so I wanted to share it with you all.

edit: Add to Favorites

As with all the other customDialogs, I simply added a layout with the FABs, check out the project to understand it better.

Maybe with some animations it could look even better, but I kept it static for simplicity.

CustomDialogExtra.aia (51.7 KB)

Happy oding!

[Gaston (zodiaclogic)]

Congratulations, creativity makes many things possible.