How to make a Custom Dialog in Kodular Creator?

 

Hey guys, today we are going to discuss again on another topic of Kodular Tutorials.Today we will be learning how to make a custom dialog box in Kodular.

How to make a Custom Dialog in Kodular Creator?

So,let's start our new fresh tutorial.

1.What are custom dialog?

Custom Dialogs are any component or layout in kodular which are shown to draw attention of user.for example we have seen sometimes a dialog box pop up on our mobile screen which is highlighted in a app.We must have seen a dialog box asking us for choosing any option or anything else.You have also seen some dialog asking you for "Are you sure to quit".So,these dialog box are known as custom dialog box in Kodular.

From Kodular Documentation:

"Show whatever you want in a dialog. You can use as example arrangements, or images or whatever you want. Your chosen layout will be then removed from the screen and only visible in custom dialog. You can use the "Light Theme" property to have a light or dark background. Or you enable "Use Background Color" property to use the background color property as background dialog color. Please make sure the layout you want to use is visible."

Create custom Dialog block:

1. Component-Component or layout you want to show in Custom Dialog

2. Title-Gives a title to your Custom Dialog.

3. Button-Given you a button to add for performing an action.

4. Cancel button text-The text of button used to make Custom Dialog Invisible.

5. Cancelable-Will user be able to cancel your custom dialog.

2.Why should we use Custom Dialog?

This is the first question that why to use Custom Dialog. So, there are many situations in which we can improve UI and UX  of our applications using Custom Dialog.This  attract special attention of user towards any notifications or anything else which we want to show in Custom Dialog.This also makes our application user friendly.

3.How to implement Custom Dialog In our project?

This is getting to be some long. So we are going to discuss it in Further steps:

Step 1:Drag and drop a notifier in your project:

The first step is that you should drag and drop a notifier in your project and design a layout which you want to show as custom dialog.For example you can make a dialog box on "Are you sure to exit".Just write the text and add two buttons "Yes" or "No".Once you have done this then you are ready to move ahead.(Note:Keep in mind to leave the Layout Visible)

Step 2: Open the blocks Section and Set the Blocks:

The main work by which we will be showing a custom dialog is in our blocks section.After opening the blocks section drag and drop a block "When screen 1 Initialize do".

Step 3:Add create custom Dialog:

The third step is to add a block to screen 1 initialize block from the Notifier Component.So, click on notifier component and drag and drop the block create custom dialog....

Step 4:Add some more blocks:

Now,you need to add some more blocks to the create custom dialog box with our designed layout.So just drag and drop the Layout's block and attach it with Component Section in create custom dialog Block.

After this you are mostly done now You can add blank text block in all other left sections and true or false in cancelable block.

Now you are all done with making custom dialog in your app.

Now you need to specify when to show this dialog:

And after this you have successfully implemented Custom Dialog in your app.

So,this was our tutorial for today we will be back tomorrow with a new tutorial.Till Then.......

Happy Koding...............