Friday, 20 January 2017

Android Custom Popup Using AlertDialog And Dialog

There are more that one how to create a popup view in android. Generally developer using two ways for creating it, there are :
  1. AlertDialog.Builder()
  2. Dialog()
The default design of AlertDialog actually used for display message that had two option, YES or NO or something related that have two option.

But Dialog is a little bit different. Dialog used to display popup that have a specific function, maybe for input data, login, register or something like that. Generally :
  • If people uses Dialog, it must be contains external layout.
  • If people uses AlertDialog, it must be for display message that had two option, YES or NO
Correct me if i'm wrong.

But it's just on theory, in fact much of developer creating popup that using external layout (red : custom dialog), event it for AlertDialog or Dialog.
In video above, i created a same popup view using two different Dialog. These are AlertDialog and Dialog.

On that video, the external layout is same, i just use one layout for external layout named layout_alert_dialog.xml. Here is the layout :

And this is the layout of activity_main.xml :


1. Popup using AlertDialog


The set the external layout into your AlertDialog is by using LayoutInflater. After that, you just need to setView() in your builder (look at the code above)

Take a look at this code : final AlertDialog alertDialog = builder.show(); Why we have to write that code?

The answer is because if you use a custom button, you cannot find method for dismiss the AlertDialog. So by using the code, then you can find the method dismiss by type alertDialog.dismiss();

The AlertDialog has default button called NegativeButton and PositiveButton. If you use that default button, you will easy to dismiss the alert dialog by using the following code :

builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
    @Override    
    public void onClick(DialogInterface dialogInterface, int i) {
        dialogInterface.dismiss();
    }
});

That code creating the button OK, inside the onClickListener contains DialogInterface, so you easy dismiss the dialog by using dialogInterface.dismiss();


2. Popup using Dialog


I think it more easy creating a popup view by using Dialog, like code above, after you define the Dialog, you just type setContentView(R.layout.your_layout), don't need LayoutInflater method.  

Take a look at this code :

dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

That code used to hide or remove the title space. I mean the title of Dialog. But if you want to display the title, that remove that code and type like this : dialog.setTitle("your dialog title");

Take a look at this code :

dialog.getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT);

That code user to set height and width of the Dialog. Why use that code? Because if you remove the title space, the dialog automatically the width and height set to WRAP_CONTENT. So we set the weight and height again. In this Dialog, i set the height as WRAP_CONTENT and the width as MATCH_PARENT.

To dismiss the dialog, you can find dismiss() method, just called inside the custom button dialog.dismiss()


Hope that poor tutorial can helps you to create popup dialog. Thank you.

Like our fans page to get new update :



Link Download Project


EmoticonEmoticon