Overview

In Android, dialog box is used to show result or sometimes you would see a confirmation alert dialog with Yes/No buttons. In this article we will talk, how to customize a dialog box step by step.

What extra will we discuss?

  • Rounded corners on each side.
  • Responsive Width.

So, we are going to build similar to this below dialog box.





Let’s get started!

Step 01: Create a layout file

First and foremost we need to create a layout file like res/layout/your_layout.xml.

your_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/root_vg">

    <View
        android:layout_width="40dp"
        android:layout_height="60dp"
        android:background="@drawable/ic_corner"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true" />
    
    <ImageView
        android:id="@+id/btn_close"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginTop="2dp"
        android:layout_marginEnd="2dp"
        android:src="@drawable/ic_clear"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="2dp"
        android:layout_alignParentRight="true" />
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/img_icon"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/ic_android"
            android:elevation="8dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="12dp"/>

        <TextView
            android:id="@+id/txttite"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:fontFamily="@font/roboto_black"
            android:text="Custom Dialog Title"
            android:textColor="@color/colorBlacky"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/txtDesc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:fontFamily="@font/open_sans"
            android:gravity="center_horizontal"
            android:text="@string/text_description"
            android:textColor="@color/colorBlacky"
            android:paddingStart="12dp"
            android:paddingEnd="12dp"/>
        
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_horizontal"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="12dp">

            <Button
                android:id="@+id/btn_no"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="No"
                android:textColor="@color/black"
                android:backgroundTint="@color/colorAccent"/>

            <Button
                android:id="@+id/btn_yes"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Yes"
                android:backgroundTint="@color/colorAccent"
                android:layout_marginStart="24dp"
                android:layout_marginLeft="24dp"
                android:textColor="@color/black"/>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

Here is how the above code snippets are look like in our Android Studio. So our Step 01 is done.



Step 02: Prepare Dialog Box & Display

At first, you have to create a dialog instance and pass this in the parameter. But if you are using fragment then pass getContext() instead this.

Dialog dialog = new Dialog(this);

Now set your layout file as shown below:

dialog.setContentView(R.layout.layout_custom_dialog);



Now you can initialize all your views as shown below:

ImageView btnClose = dialog.findViewById(R.id.btn_close);

//Attached onClick listener
btnClose.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
       dialog.dismiss();
    }
});

Finally, we can call dialog.show();

Here is the all code together:

Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.layout_custom_dialog);

ImageView btnClose = dialog.findViewById(R.id.btn_close);

btnClose.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
     dialog.dismiss();
   }
});

dialog.show();


Step 03: Rounded Window Corners

It’s quite easy. All you have to do is, just create a shape with some radius inside res/drawable. As shown in the below XML code snippets.

bg_window.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:angle="45"
        android:startColor="@color/color_Blue_Light"
        android:endColor="@color/colorGrayText"/>
    <corners android:radius="12dp"/>
</shape>

Here is how it looks like,

bg_window.xml

Now before dialog.show(), just write this below line. In order to set the above XML as the dialog’s background.

dialog.getWindow().setBackgroundDrawableResource(R.drawable.bg_window);

Step 04: Responsive Dialog Box

By default any dialog box leaves some spaces in each side of the phone’s screen. Actually dialog window takes minimum width of 80% spaces. So if you want that your Custom Dialog should use the entire width of the screen.

For that matter, we can create a style. As shown below,

<style name="DialogStyle" parent="Theme.AppCompat.Dialog">
  <item name="android:windowMinWidthMajor">100%</item>
  <item name="android:windowMinWidthMinor">100%</item>
</style>

Finally, apply this style with a Dialog Box.

dialog = new Dialog(this, R.style.DialogStyle);

Congratulations!!! Now you can design your own Custom Dialog Box. That’s it now! Thank you so much for following all the Steps.


Translate »