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.
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>
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" />
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" />
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);