How to open a custom dialog box in Android ?

What is a dialog box?

A dialog box is a small area of a screen generally termed as a popup screen which is used to provide information or select commands.

How to implement a custom dialog box in an android app using Java?

Through this example, you are going to learn how you can implement a dialog box easily.

Step 1: Create a new Android Studio project  

File -> new -> New Project and fill all the required details.

Step 2: Create a new layout file and name it custom_dialog.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <androidx.constraintlayout.widget.ConstraintLayout 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:background="@drawable/layout_bg">  
   <TextView  
     android:textAlignment="center"  
     android:id="@+id/textView49"  
     android:layout_width="0dp"  
     android:layout_height="wrap_content"  
     android:layout_marginStart="50dp"  
     android:layout_marginTop="20dp"  
     android:layout_marginEnd="50dp"  
     android:text="@string/we_gave_you_choice"  
     android:textColor="@color/black"  
     android:textSize="20sp"  
     android:textStyle="bold"  
     app:layout_constraintEnd_toEndOf="parent"  
     app:layout_constraintStart_toStartOf="parent"  
     app:layout_constraintTop_toTopOf="parent" />  
   <TextView  
     android:textAlignment="center"  
     android:id="@+id/textView51"  
     android:textColor="@color/black"  
     android:layout_margin="20dp"  
     android:layout_width="0dp"  
     android:layout_height="wrap_content"  
     android:layout_marginTop="20dp"  
     android:text="@string/edit_the_data_you_enterd"  
     app:layout_constraintEnd_toEndOf="parent"  
     app:layout_constraintStart_toStartOf="parent"  
     app:layout_constraintTop_toBottomOf="@+id/textView49" />  
   <LinearLayout  
     android:layout_marginTop="20dp"  
     android:layout_width="0dp"  
     android:layout_height="wrap_content"  
     android:gravity="center"  
     android:weightSum="2"  
     android:layout_marginBottom="20dp"  
     app:layout_constraintBottom_toBottomOf="parent"  
     app:layout_constraintEnd_toEndOf="parent"  
     app:layout_constraintStart_toStartOf="parent"  
     app:layout_constraintTop_toBottomOf="@+id/textView51">  
     <Button  
       android:layout_marginStart="20dp"  
       android:id="@+id/editButton"  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       android:layout_weight="1"  
       android:background="@null"  
       android:padding="10dp"  
       android:text="@string/edit"  
       android:textColor="@color/orangeThemeBg"  
       android:textStyle="bold" />  
     <Button  
       android:id="@+id/cancelButton"  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       android:layout_marginEnd="20dp"  
       android:layout_weight="1"  
       android:background="@drawable/button_orange_custom"  
       android:padding="10dp"  
       android:text="@string/cancel"  
       android:textColor="@color/white"  
       android:textStyle="bold" />  
   </LinearLayout>  
 </androidx.constraintlayout.widget.ConstraintLayout>  

(Design your layout according to your design)

Step 3: In your main screen XML file add a button to the layout.

 <?xml version="1.0" encoding="utf-8"?>  
 <androidx.constraintlayout.widget.ConstraintLayout 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/button"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="Open Dialog"  
     app:layout_constraintBottom_toBottomOf="parent"  
     app:layout_constraintEnd_toEndOf="parent"  
     app:layout_constraintStart_toStartOf="parent"  
     app:layout_constraintTop_toTopOf="parent" />  
 </androidx.constraintlayout.widget.ConstraintLayout>  

Step 4: Initialize the button and set onClickListener on the button.

 public class MainActivity extends AppCompatActivity {  
   Button button;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     button = findViewById(R.id.button);  
     button.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View view) {  
       }  
     });  
   }  
 }  

Step 5: Now add the following code in your onClick method.

 public class MainActivity extends AppCompatActivity {  
   Button button;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     button = findViewById(R.id.button);  
     button.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View view) {  
         AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);  
         ViewGroup viewGroup = view.findViewById(android.R.id.content);  
         View dialogView = LayoutInflater.from(view.getContext()).inflate(R.layout.custom_dialog, viewGroup, false);  
         builder.setView(dialogView);  
         final AlertDialog alertDialog = builder.create();  
         alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));  
         alertDialog.show();  
       }  
     });  
   }  
 }  

In this above example, we are inflating a custom layout using the AlertDialog builder.

Conclusion - Custom dialog box

Time to look at what we learned. AlertDialog will come handy whenever required whenever we need to inflate the custom dialogs in our application. In fact, It is much easier and recommended to implement the custom dialog box by inflating through AlertDialog rather than making the whole activity behave as a dialog.

Comment your thoughts below.