Animate a custom Dialog Animate a custom Dialog android android

Animate a custom Dialog


I've been struggling with Dialog animation today, finally got it working using styles, so here is an example.

To start with, the most important thing — I probably had it working 5 different ways today but couldn't tell because... If your devices animation settings are set to "No Animations" (Settings → Display → Animation) then the dialogs won't be animated no matter what you do!

The following is a stripped down version of my styles.xml. Hopefully it is self-explanatory. This should be located in res/values.

<?xml version="1.0" encoding="utf-8"?><resources>    <style name="PauseDialog" parent="@android:style/Theme.Dialog">        <item name="android:windowAnimationStyle">@style/PauseDialogAnimation</item>    </style>    <style name="PauseDialogAnimation">        <item name="android:windowEnterAnimation">@anim/spin_in</item>        <item name="android:windowExitAnimation">@android:anim/slide_out_right</item>    </style></resources>

The windowEnterAnimation is one of my animations and is located in res\anim.The windowExitAnimation is one of the animations that is part of the Android SDK.

Then when I create the Dialog in my activities onCreateDialog(int id) method I do the following.

Dialog dialog = new Dialog(this, R.style.PauseDialog);// Setting the title and layout for the dialogdialog.setTitle(R.string.pause_menu_label);dialog.setContentView(R.layout.pause_menu);

Alternatively you could set the animations the following way instead of using the Dialog constructor that takes a theme.

Dialog dialog = new Dialog(this);dialog.getWindow().getAttributes().windowAnimations = R.style.PauseDialogAnimation;


I have created the Fade in and Fade Out animation for Dialogbox using ChrisJD code.

  1. Inside res/style.xml

    <style name="AppTheme" parent="android:Theme.Light" /><style name="PauseDialog" parent="@android:style/Theme.Dialog">    <item name="android:windowAnimationStyle">@style/PauseDialogAnimation</item></style><style name="PauseDialogAnimation">    <item name="android:windowEnterAnimation">@anim/fadein</item>    <item name="android:windowExitAnimation">@anim/fadeout</item></style>

  2. Inside anim/fadein.xml

    <alpha xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/accelerate_interpolator"    android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="500" />
  3. Inside anim/fadeout.xml

    <alpha xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/anticipate_interpolator"    android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="500" />
  4. MainActivity

    Dialog imageDiaglog= new Dialog(MainActivity.this,R.style.PauseDialog);


For right to left (entry animation) and left to right (exit animation):

styles.xml:

<style name="CustomDialog" parent="@android:style/Theme.Dialog">    <item name="android:windowAnimationStyle">@style/CustomDialogAnimation</item></style><style name="CustomDialogAnimation">    <item name="android:windowEnterAnimation">@anim/translate_left_side</item>    <item name="android:windowExitAnimation">@anim/translate_right_side</item></style>

Create two files in res/anim/:

translate_right_side.xml:

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

translate_left_side.xml:

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

In you Fragment/Activity:

Dialog dialog = new Dialog(getActivity(), R.style.CustomDialog);