Tuesday, October 6, 2020

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.




Previous Post
Next Post

post written by:

Hi, Navjyot Singh is a coder, content maker and a freelance developer who's pursuing an undergraduate Engineering degree in Computer Science. He started out as a web developer but later picked up the mobile as his favourite platform to develop applications. A Writer by day and coder by night is loathed to discuss himself as the third person but can be persuaded to do so from time to time.

0 comments: