In this post we will see an Android Custom Dialog Example. I hope you know about creating Dialogs in Android, and then you might be thinking that what if I can customized the dialog completely as per my need. Then the answer is “YES” you can customized it as you want, you can put whatever design or component you need in your Alert Dialog.
Enough talking right? Now let’s start our Android Custom Dialog Example.
For the button background just create a new drawable resource file named button_background.xml and put the following code.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<stroke android:width="2dp" android:color="@color/colorPrimary" />
<solid android:color="@android:color/transparent" />
<corners android:bottomLeftRadius="6dp" android:bottomRightRadius="6dp" android:topLeftRadius="6dp" android:topRightRadius="6dp" />
</shape>
</item>
</selector>
For the icon that is displaying in the header, create one more drawable file. I created ic_success.xml and put the following code inside.
<vector android:height="24dp" android:viewportHeight="512"
android:viewportWidth="512" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FFFFFF" android:pathData="M468.907,214.604c-11.423,0 -20.682,9.26 -20.682,20.682v20.831c-0.031,54.338 -21.221,105.412 -59.666,143.812c-38.417,38.372 -89.467,59.5 -143.761,59.5c-0.04,0 -0.08,0 -0.12,0C132.506,459.365 41.3,368.056 41.364,255.883c0.031,-54.337 21.221,-105.411 59.667,-143.813c38.417,-38.372 89.468,-59.5 143.761,-59.5c0.04,0 0.08,0 0.12,0c28.672,0.016 56.49,5.942 82.68,17.611c10.436,4.65 22.659,-0.041 27.309,-10.474c4.648,-10.433 -0.04,-22.659 -10.474,-27.309c-31.516,-14.043 -64.989,-21.173 -99.492,-21.192c-0.052,0 -0.092,0 -0.144,0c-65.329,0 -126.767,25.428 -172.993,71.6C25.536,129.014 0.038,190.473 0,255.861c-0.037,65.386 25.389,126.874 71.599,173.136c46.21,46.262 107.668,71.76 173.055,71.798c0.051,0 0.092,0 0.144,0c65.329,0 126.767,-25.427 172.993,-71.6c46.262,-46.209 71.76,-107.668 71.798,-173.066v-20.842C489.589,223.864 480.33,214.604 468.907,214.604z"/>
<path android:fillColor="#FFFFFF" android:pathData="M505.942,39.803c-8.077,-8.076 -21.172,-8.076 -29.249,0L244.794,271.701l-52.609,-52.609c-8.076,-8.077 -21.172,-8.077 -29.248,0c-8.077,8.077 -8.077,21.172 0,29.249l67.234,67.234c4.038,4.039 9.332,6.058 14.625,6.058c5.293,0 10.586,-2.019 14.625,-6.058L505.942,69.052C514.019,60.975 514.019,47.88 505.942,39.803z"/>
</vector>
Now for our Custom Alert Dialog create a layout. I have created my_dialog.xml. Inside this file we will design our Android Custom Dialog.
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@color/colorPrimary">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background="@drawable/ic_success" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Success"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.Headline" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu erat tincidunt lacus fermentum rutrum."
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.Medium" />
<Button
android:id="@+id/buttonOk"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:background="@drawable/button_background"
android:text="Ok"
android:textColor="@color/colorPrimary" />
</LinearLayout>
</LinearLayout>
For this come inside activity_main.xml and create a button inside the activity.
<?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="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/buttonShowDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@color/colorPrimary"
android:padding="15dp"
android:text="Android Custom Dialog Example"
android:textAllCaps="false"
android:textColor="#ffffff" />
</RelativeLayout>
For displaying the dialog come inside MainActivity.java and write the following code.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//attaching click listener
findViewById(R.id.buttonShowDialog).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//calling this method to show our android custom alert dialog
showCustomDialog();
}
});
}
private void showCustomDialog() {
//before inflating the custom alert dialog layout, we will get the current activity viewgroup
ViewGroup viewGroup = findViewById(android.R.id.content);
//then we will inflate the custom alert dialog xml that we created
View dialogView = LayoutInflater.from(this).inflate(R.layout.my_dialog, viewGroup, false);
//Now we need an AlertDialog.Builder object
AlertDialog.Builder builder = new AlertDialog.Builder(this);
//setting the view of the builder to our custom view that we already inflated
builder.setView(dialogView);
//finally creating the alert dialog and displaying it
AlertDialog alertDialog = builder.create();
alertDialog.show();
}
}
