Dialog — Adding “Good” Pop-ups in Your Android App

Are you sure you want to read this? Yes.

Sung Park
Sketchware
4 min readMar 29, 2017

--

Pop-ups can be very annoying sometimes, but it’s a great way to double-check if the action is what the user was really trying to do. In programming, these pop-up windows are usually called “Modals”, and they are referred to as “Dialog” in Android Programming.

Above is a screenshot of Dialog in action. Dialog was added in Sketchware’s version 1.2. We’ll talk about it more in depth and understand how we can utilize it to create a better user experience.

What you’ll need

  1. Sketchware — a mobile IDE on your smartphone
  2. Passion to learn! :-)

What you’ll learn

  1. How and when to use Dialog Component
  2. The vision and future plans of Dialog in Sketchware

When should I use Dialog?

First, let’s talk about when we should use Dialog. I am personally not a big fan of pop-ups, because I believe they could ruin user experience if they are used too repeatedly; however, if you use them correctly in a timely manner, they can be very helpful and sometimes even life-saving.

For example, asking for a confirmation before exiting or deleting something could be very useful. Anything that has something to do with data manipulation is pretty safe to ask since it’s better to be safe than sorry.

However, imagine if we asked you guys for a confirmation every time you moved around a widget. That would be very annoying, right? Again, it’s important to decide when to prompt the user and not to make it too excessive.

Another time it would be okay is when you have to show an important message. For example, I would consider a version-breaking update very important, and would show the patch note when the app starts.

To sum it up, keyword you should take away is “important.” There are no strict guidelines or rules — you are the boss of what you create, but don’t use it too extensively!

Using Dialog

First of all, we need to add the component before we can use it.

After doing so, we get access to 6 blocks:

1. set title — Set the title of the dialog.

2. set message — Set the message of the dialog.

3. OK Button [] Clicked — Performs an action when the OK button is clicked. The argument it takes is the String value for the name of the button.

4. Cancel Button [] Clicked — Performs an action when the Cancel button is clicked. The argument it takes is the String value for the name of the button.

5. Neutral Button [] Clicked — Performs an action when the Neutral button is clicked. The argument it takes is the String value for the name of the button.

6. show — Shows the Dialog on the screen.

They are pretty straight forward. Note that all of these blocks are optional — for example, if you decided not to add the Cancel button, there would be no cancel button visible on the Dialog. This means you are able to create Dialogs with no buttons, one button, or all three buttons.

I would use a Dialog with no buttons if it was just an informative Dialog like showing patch note. If the Dialog is for just warning the user, I would add one OK button. If it was to prompt the user and to take Yes/No answer, I would add both OK and Cancel button on the Dialog. You get the hang of it. Add necessary buttons to suit your need.

Future Plans

In Android World, Dialogs are more than just a confirmation pop-up. For now, Sketchware only provides Dialog as a pop-up window, but in the future, it will be expanded for users to inject custom views inside it. That means you will be able to add any kind of widgets inside the Dialog — for example, creating a login from inside the Dialog!

Conclusion

We learned more about when and how to use Dialog! Even though Dialog in Sketchware is currently in its early stages, it will be expanded in the future for more use purposes. Still, there are a lot of places where you can add Dialog. Go ahead and try adding Dialog in your next android application! Happy coding :-)

I have shared a project named “Dialog Example,” so if you are interested in seeing a working example, take a look!

If you liked this, click the 💚 below so other people will see this here on Medium.

--

--