This tutorial provides a brief explanation on the usage of some useful  Android UI components that most real-life applications use. Specifically, this tutorial will cover how to use dialogs and even how to create your own custom dialog.

Dialogs are small windows that appear in front of an activity. The activities behind them are either blurred or dimmed. There are different types of dialog. The most commonly used are Alert Dialog, Progress Dialog, DatePicker Dialog and TimePicker Dialog.

Alert Dialog – A dialog that can manage up to three buttons, or a list of selectable items that can include checkboxes or radio buttons.

 

ProgressDialog – A dialog that displays either a progress wheel or a progress bar. Commonly used when your app is doing an action that takes a certain period of time to finish. e.g. downloading files, account sign in, and etc..

DatePicker Dialog – A dialog that allows a user to select a certain date.

TimePickerDialog – A dialog that allows a user to select a certain time.

 

 

 

 

 

 

 

In this tutorial, We are going to focus on building alert dialog and later on we’ll try to create our customized alert dialog. Let’s start by creating a new blank project in Android Studio. Creating an alert dialog is very fast and easy to do. One advantage of using dialog is that you do not need to include it in your AndroidManifest.xml. Which means using dialog is like simple build and show.

Open your activity_main.xml and add one button. The alert dialog will be displayed when you clicked this button.

You should have something like this in your layout.

Now open MainActivity.java then copy and paste the codes provided below. I’ve put some comments there so you can understand what we are doing.

In summary, If we want to create an alert dialog we usually follow these steps.

  1. Create a new alert dialog builder using the AlertDialog.Builder.
  2. Set the title, message, and icon of your alert dialog. You can include/exclude any of the following. It’s really up to you what you need in your alert dialog.
  3. Set the buttons for your alert dialog. You can set positive, negative and neutral button.
  4. Build and show your alert dialog.

Very easy to implement right? Now you can run and test you app if it is working. The final output of this tutorial should be like this.

Now what if we want to change the content of the alert dialog by putting our own custom layout inside it. It will be easier to use alert dialog rather than creating your own class in handling such display. For example I have a real-life application where I want user to view a certain information. I want my alert dialog to look something like this.

Let’s start by creating a new XML layout file for this and name it prompt_about.xml. Copy and paste the provided code in your prompt-about.xml. You can download the image above.

Open your activity_main.xml and add another button which will display our custom dialog when clicked by the user.

Now that we have our customized layout, we can now start our coding. Open MainActivity.java then copy and paste the provided code.

Now you can run and test you app if it is working. The final output of this tutorial should be like this.

If you’re having trouble reaching up to this point, you can download the full source code here:¬†Download Link