Learn Programming Together: Showing Dialog with animation in Android

Dialog, was defined in doc, is a small window that prompts the user to make a decision or enter additional information. A dialog does not fill the screen and is normally used for modal events that require users to take an action before they can proceed. With it's subclasses (AlertDialog, ProgressDialog, AppCompatDialog,...), they become a alert system in Android. For making more exciting when they appear/exit, we can set animation for them easily. In this tip, I provide a way to do this trick through styles resource. Please watch this DEMO VIDEO first:

In this sample project, I use AlertDialog to explain my solution. Other Dialog types are completely similar. We've already known building a AlertDialog by AlertDialog.Builder like this:

        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("Animation Dialog");
        builder.setMessage(type);
        builder.setNegativeButton("OK", null);
        AlertDialog dialog = builder.create();
        dialog.show();

In order to adding animation to Dialog, please add it's style before showing (prior to call show() method) by assigning style_id to it:

dialog.getWindow().getAttributes().windowAnimations = R.style.DialogAnimation; //style id

Now, we'll talk about making the Dialog style. To create animations, we must provide animation resource files in res/anim folder. So put these 2 files here:

slide_left.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="100%p" android:toXDelta="0"
    android:duration="500" />

slide_right.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="0"
    android:toXDelta="100%p" />

Declaring windowEnterAnimation and windowExitAnimation properties in Dialog style (put in styles.xml file) using 2 animations above:

<style name="DialogTheme">
        <item name="android:windowEnterAnimation">@anim/slide_left</item>
        <item name="android:windowExitAnimation">@anim/slide_right</item>
    </style>

We will obtain this output:

As similar as above steps, making up/down efftect by these 2 animations resource files: slide_up.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
      android:duration="@android:integer/config_mediumAnimTime" 
      android:fromydelta="100%" 
      android:interpolator="@android:anim/accelerate_interpolator" 
      android:toxdelta="0">
    </translate>
</set>

slide_bottom.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:duration="@android:integer/config_mediumAnimTime" 
        android:fromydelta="0%p" 
        android:interpolator="@android:anim/accelerate_interpolator" 
        android:toydelta="100%p">
    </translate>
</set>

Style for this animation design:

<style name="DialogAnimation_2">
        <item name="android:windowEnterAnimation">@anim/slide_up</item>
        <item name="android:windowExitAnimation">@anim/slide_bottom</item>
    </style>

Output:

We also can use the system animations (was defined in SDK) to do this work. So, only need create a style using them:

<style name="DialogAnimation">
        <item name="android:windowEnterAnimation">@android:anim/fade_in</item>
        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
    </style>

Fade in/fade out animation have been created after that:

Finally, I provide full code for a testing activity where the AlertDialogs will showing by click the corresponding button:

TestActivity.java

package devexchanges.info.animationdialog;

import android.app.AlertDialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class TestActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);

        View btnShowDialog = findViewById(R.id.btn_show_dialog);
        View btnShowDialog2 = findViewById(R.id.btn_show_dialog_2);
        View btnShowDialog3 = findViewById(R.id.btn_show_dialog_3);
        View btnShowDialog4 = findViewById(R.id.btn_show_dialog_4);

        btnShowDialog.setOnClickListener(onClickListener(1));
        btnShowDialog2.setOnClickListener(onClickListener(2));
        btnShowDialog3.setOnClickListener(onClickListener(3));
        btnShowDialog4.setOnClickListener(onClickListener(4));
    }

    private View.OnClickListener onClickListener(final int style) {
        return new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (style == 1) {
                    buildDialog(R.style.DialogTheme, "Left - Right Animation!");
                } else if (style == 2) {
                    buildDialog(R.style.DialogAnimation, "Fade In - Fade Out Animation!");
                } else if (style == 3) {
                    buildDialog(R.style.DialogAnimation_2, "Up - Down Animation!");
                } else {
                    buildDialog(0, "Normal Dialog (no animation)");
                }
            }
        };
    }

    private void buildDialog(int animationSource, String type) {
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("Animation Dialog");
        builder.setMessage(type);
        builder.setNegativeButton("OK", null);
        AlertDialog dialog = builder.create();
        dialog.getWindow().getAttributes().windowAnimations = animationSource;
        dialog.show();
    }
}

And it's layout:

activity_test.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">
 
    <Button
        android:id="@+id/btn_show_dialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/show_1" />
 
    <Button
        android:id="@+id/btn_show_dialog_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_show_dialog"
        android:text="@string/show_2" />
 
    <Button
        android:id="@+id/btn_show_dialog_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_show_dialog_2"
        android:text="@string/show_3" />
 
    <Button
        android:id="@+id/btn_show_dialog_4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_show_dialog_3"
        android:text="@string/show_4" />
</RelativeLayout>

This screen when launching app:

Styles resource:

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="DialogTheme">
        <item name="android:windowEnterAnimation">@anim/slide_left</item>
        <item name="android:windowExitAnimation">@anim/slide_right</item>
    </style>

    <style name="DialogAnimation">
        <item name="android:windowEnterAnimation">@android:anim/fade_in</item>
        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
    </style>

    <style name="DialogAnimation_2">
        <item name="android:windowEnterAnimation">@anim/slide_up</item>
        <item name="android:windowExitAnimation">@anim/slide_bottom</item>
    </style>

</resources>

Over here, you've learned the way to making Dialog animations, this small tip will make your app displaying smoother and more friendly. From now on, check this link to read others posts about animation topic. Don't forget to subscribe my blog to see newest tutorials!

Learn Programming Together

Showing Dialog with animation in Android

Author : Hong Thai

Share