In Android, A dialog is a small window that prompts the user to make a decision, provide some additional information, and inform the user about some particular task. The following are the main purposes or goals of a dialog
- To warn the user about any activity.
- To inform the user about any activity.
- To tell the user whether it is an error or not.
- To tell the user that his/her desired action has been succeeded.
So, in this article, we are going to learn how to create Custom Dialog in android Studio. In this project, we firstly design the layout which we want to show in our activity as a custom dialog after that we are going to integrate this layout into our java file. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/gfg_img" android:layout_marginTop="-150dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/dialogBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Show Dialog" android:layout_marginTop="50dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/imageView2" /></androidx.constraintlayout.widget.ConstraintLayout> |
Step 3: Create another layout XML file
Create another layout XML file that you want to show in your dialog. You can add any element to this layout.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp"> <ImageView android:id="@+id/imageView" android:layout_width="150dp" android:layout_height="150dp" android:layout_centerHorizontal="true" android:src="@drawable/success" /> <TextView android:id="@+id/textview" android:layout_width="392dp" android:layout_height="112dp" android:layout_marginTop="10dp" android:padding="10dp" android:layout_below="@id/imageView" android:text="Congratulations!! You have created custom dialog successfully" android:textAlignment="center" android:textSize="25sp" android:textStyle="bold"/> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/textview" android:layout_margin="15dp" android:layout_centerHorizontal="true"> <TextView android:id="@+id/okay_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="100dp" android:text="Okay" android:textStyle="bold" android:textColor="#3F51B5" android:textSize="30sp" /> <TextView android:id="@+id/cancel_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="30dp" android:layout_marginLeft="100dp" android:layout_toRightOf="@id/okay_text" android:text="Cancel" android:textStyle="bold" android:textColor="#FF0000" android:textSize="30sp" /> </RelativeLayout></RelativeLayout> |
Step 4: Modification in the theme.xml file
Add this code to your theme.xml file to create the opening and closing animation of Dialog.
XML
<style name="animation"> <item name="android:windowEnterAnimation">@android:anim/fade_in</item> <item name="android:windowExitAnimation">@android:anim/fade_out</item></style> |
Step 5: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import androidx.appcompat.app.AppCompatActivity;import android.app.Dialog;import android.os.Bundle;import android.view.View;import android.view.ViewGroup;import android.widget.Button;import android.widget.TextView;import android.widget.Toast;public class MainActivity extends AppCompatActivity { Button mDialogButton; TextView okay_text, cancel_text; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mDialogButton = findViewById(R.id.dialogBtn); Dialog dialog = new Dialog(MainActivity.this); mDialogButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.setContentView(R.layout.dialog_layout); dialog.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); dialog.setCancelable(false); dialog.getWindow().getAttributes().windowAnimations = R.style.animation; okay_text = dialog.findViewById(R.id.okay_text); cancel_text = dialog.findViewById(R.id.cancel_text); okay_text.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); Toast.makeText(MainActivity.this, "okay clicked", Toast.LENGTH_SHORT).show(); } }); cancel_text.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); Toast.makeText(MainActivity.this, "Cancel clicked", Toast.LENGTH_SHORT).show(); } }); dialog.show(); } }); }} |
Output:
