How to create Pop-Up Dialog Animation in App | Android App Development | Java

 In this post, you will learn how to create Pop-Up animation for Dialog Box in your Android Application.

A dialog is a small window that prompts the user to make decision or enter additional information. A dialog is normally used for modal events that require users to take an action before they can proceed.

Implementation:

First, create a new Android Resource Directory of type 'anim'. In it create two anim files 'scale_up.xml' and 'scale_down.xml'. These files will contain the code for our dialog animation. In the scale_up.xml file, add the following code:

	<?xml version="1.0" encoding="utf-8"?>
	<set xmlns:android="http://schemas.android.com/apk/res/android">
	<scale
	android:duration="400"
	android:fromXScale="0.2"
	android:fromYScale="0.2"
	android:toXScale="1"
	android:toYScale="1"
	android:pivotY="50%"
	android:pivotX="50%"/>
	</set>

view raw xml hosted with ❤ by GitHub

And in the scale_down.xml file, add the following code:

	<?xml version="1.0" encoding="utf-8"?>
	<set xmlns:android="http://schemas.android.com/apk/res/android">
	<scale
	android:duration="400"
	android:fromXScale="1"
	android:fromYScale="1"
	android:toXScale="0.2"
	android:toYScale="0.2"
	android:pivotY="50%"
	android:pivotX="50%"/>
	</set>

view raw xml hosted with ❤ by GitHub

Create a new style and add these two xml files to it.

	<style name="DialogAnim">
	<item name="android:windowEnterAnimation">@anim/scale_up</item>
	<item name="android:windowExitAnimation">@anim/scale_down</item>
	</style>

view raw xml hosted with ❤ by GitHub

Now add a button in the activity_main.xml file which will instantiate the pop-up dialog.  

	<?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/btn_dialog"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:padding="10dp"
	android:text="Show Dialog"
	android:textSize="22sp"
	app:layout_constraintBottom_toBottomOf="parent"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintHorizontal_bias="0.5"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toTopOf="parent" />
	</androidx.constraintlayout.widget.ConstraintLayout>

view raw xml hosted with ❤ by GitHub

Now create a new layout file which will contain the design layout of the dialog box .Add the following code to it.

	<?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">
	<ImageView
	android:id="@+id/dialog_img"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:src="@drawable/dialog"
	app:layout_constraintBottom_toBottomOf="parent"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintHorizontal_bias="0.5"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toTopOf="parent" />
	<ImageButton
	android:id="@+id/btn_close"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginEnd="8dp"
	android:padding="10dp"
	android:background="@null"
	android:src="@drawable/close"
	app:layout_constraintBottom_toTopOf="@+id/dialog_img"
	app:layout_constraintEnd_toEndOf="parent" />
	</androidx.constraintlayout.widget.ConstraintLayout>

view raw xml hosted with ❤ by GitHub

 Finally, in the MainActivity.java class, setup the dialog box  like so...

	import androidx.appcompat.app.AppCompatActivity;
	import android.app.Dialog;
	import android.os.Bundle;
	import android.view.View;
	import android.widget.Button;
	import android.widget.ImageButton;
	import android.widget.ImageView;
	import javax.crypto.spec.IvParameterSpec;
	public class MainActivity extends AppCompatActivity {
	Button showDialog;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	showDialog = findViewById(R.id.btn_dialog);
	showDialog.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View view) {
	showPopUpDialog();
	}
	});
	}
	private void showPopUpDialog() {
	ImageButton close;
	ImageView dialogMessage;
	Dialog dialog = new Dialog(this);
	dialog.setContentView(R.layout.dialog_layout);
	dialog.getWindow().setBackgroundDrawable(null);
	dialog.getWindow().setWindowAnimations(R.style.DialogAnim);
	close = dialog.findViewById(R.id.btn_close);
	close.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View view) {
	dialog.cancel();
	}
	});
	dialogMessage = dialog.findViewById(R.id.dialog_img);
	dialogMessage.setImageResource(R.drawable.dialog);
	dialog.show();
	}
	}

view raw java hosted with ❤ by GitHub

Output :