How to create a custom Alert Dialog in Android? - About & Feedback dialogs

Alert Dialogs are very useful popups that can be used to ask user for confirmation. We have seen a simple use of alert dialog in a previous article. Apart from this, alert dialogs can also be use to get information without getting the user to navigate out of the activity. You can use alert dialogs for login/signup popups, to ask feedback and more. This can be done using custom layouts in the AlertDialog.

About Dialog

In the first part of the article we will demonstrate the simple use of the custom layout using the setCustomView() method of the AlertDialog.Builder class.

Create a simple layout for the about dialog view (about_dialog.xml). I have used a ScrollView to enclose the entire layout so that I can display scrollable content with ImageView and TextView.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:orientation="vertical">

        <ImageView
            android:contentDescription="@string/app_name"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:id="@+id/app_logo"
            android:src="@mipmap/ic_launcher"/>

         <TextView
             android:id="@+id/about_app"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="@string/about_app"/>
    </LinearLayout>
</ScrollView>

Set the id of the layout to the setCustomView() method. This will display the layout in the dialog.

 AlertDialog.Builder builder = new AlertDialog.Builder(this);
 builder.setView(R.layout.about_dialog);

The complete method is as follows:

// Alert Dialog with custom view
    private void showAboutDialog() {
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("About the app");
        builder.setView(R.layout.about_dialog);
        builder.setNegativeButton("Close", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                // dismiss dialog
                dialogInterface.dismiss();
            }
        });
        builder.show();
    }

You will end up with an AlertDialog as shown in the image.

Feedback Dialog

In the second part of this article, we are going to create an AlertDialog with a custom view that asks the user for his/her feedback for the app. The end result is going to look something like this.

Here, instead of setting the view directly in the setCustomView() method, we have to inflate the view and get a reference to it in a variable. Then we can set the custom view to that variable. Now we create a layout with three EditText inputs for name, email and feedback.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <EditText
        android:id="@+id/feedback_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Name"
        android:inputType="textPersonName"/>

    <EditText
        android:id="@+id/feedback_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email"
        android:inputType="textEmailAddress"/>

    <EditText
        android:id="@+id/feedback_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="top"
        android:hint="What would you like to tell us?"
        android:inputType="textMultiLine"
        android:lines="5"/>

</LinearLayout>

Now, we can use LayoutInflater and inflate the layout of the Feed dialog (feedback_dialog.xml).

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
View dialogView = LayoutInflater.from(MainActivity.this).inflate(R.layout.feedback_dialog, null);
builder.setView(dialogView);

You can use the dialogView variable to access the views in the layout, in this to access the EditText inputs. Below is the complete code of the showFeedbackDialog() method:

// Alert Dialog with custom view and EditText inputs
    private void showFeedbackDialog() {
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);

        View dialogView = LayoutInflater.from(MainActivity.this).inflate(R.layout.feedback_dialog, null);
        final TextView feedbackName = (TextView) dialogView.findViewById(R.id.feedback_name);
        final TextView feedbackEmail = (TextView) dialogView.findViewById(R.id.feedback_email);
        final TextView feedbackContent = (TextView) dialogView.findViewById(R.id.feedback_content);

        builder.setView(dialogView);
        builder.setTitle("Please share your feedback");

        builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.dismiss();
            }
        });

        builder.setPositiveButton("Submit", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                String name = feedbackName.getText().toString();
                String email = feedbackEmail.getText().toString();
                String content = feedbackContent.getText().toString();

                Toast.makeText(MainActivity.this, "Name: " + name + "\nEmail: " + email + "\nFeedback: " + content, Toast.LENGTH_SHORT).show();

            }
        });

        builder.show();

    }

Access the code of the Alert Dialogs demo at Github