Custom Alert Dialog

Custom Alert Dialog in Android

In this tutorial we will learn how to build the custom alert dialog with example. In custom alert dialog we will design a new custom layout and inflate the layout in dailog class.

Example:

• Create a new layout as custom_dailog.xml.
• Design a custom layout as follows.

File: custom_layout.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="#ffffffff"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:background="#303F9F"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/delete"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Delete this item"
            android:textColor="#ffffff"
            android:textSize="28sp" />


        <ImageView
            android:id="@+id/img_delete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:scaleType="center"
            android:src="@drawable/delete" />
    </LinearLayout>

    <TextView
        android:id="@+id/text_dialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView"
        android:layout_margin="20dp"
        android:gravity="center"
        android:text="Do you want to delete this item?"
        android:textColor="#ff000000"
        android:textSize="18sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:gravity="center"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_yes"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginRight="10dp"
            android:background="#3F51B5"
            android:text="YES"
            android:textColor="#ffffffff" />

        <Button
            android:id="@+id/btn_no"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:background="#3F51B5"
            android:text="NO"
            android:textColor="#ffffffff" />

    </LinearLayout>

</LinearLayout>

Now do the code for the custom dialog as follows.

File: MainActivity.java:

Button custom_button = (Button) findViewById(R.id.button_custom);
custom_button.setOnClickListener(new View.OnClickListener() {
    @Override    
        public void onClick(View v) {
        final Dialog dialog = new Dialog(MainActivity.this);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.custom_dialog);
        dialog.setCancelable(true);
        dialog.show();

        Button yes = (Button) dialog.findViewById(R.id.btn_yes);
        yes.setOnClickListener(new View.OnClickListener() {
            @Override            
                public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Deleted", Toast.LENGTH_LONG).show();
                dialog.cancel();
            }
        });

        Button no = (Button) dialog.findViewById(R.id.btn_no);
        no.setOnClickListener(new View.OnClickListener() {
            @Override            
                public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Not deleted", Toast.LENGTH_LONG).show();
                dialog.cancel();
            }
        });
    }
});

Run the Application and see the output

Output:

Download project here

Thank You!!!

Please like and share...