Animate a custom Dialog

Question

I'm trying to have a custom dialog appear as though it's sliding down from a text view. Is this possible? I can't seem to apply any animation to dialog class. I've tried this line in the constructor, but it has no effect:

this.getWindow().setWindowAnimations(R.anim.paranimation);

I'm not even sure if the animation is correct, but I will be able adjust it once I see what it's doing. I'll list it below for the sake of completeness. I'm not looking for help on the actual animation, just the application to the dialog.

paranimation.xml:

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

Uhlan

I need to know this as well. It seems possible to animate just about anything, apart from this. Or am I wrong?! – Taxexempt

Answer 1

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 dialog
dialog.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;

Philipphilipa

That was just a name I made up for this example, I never actually created that animation. – Philipphilipa

Thanks so much for this answer, it's really poorly documented, though I found this post via a clue from the Android Developers group. – Words

+1 For the "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!". I had forgotten to check that. – Blanche

Dialog dialog = new Dialog(this, R.style.PauseDialog); it is for API 11 but this is general Dialog dialog = new Dialog(Context context); – Zimbabwe

@Philipphilipa + RegDwight: Superb +1 – Internalize

You dont need parent="@android:style/Theme.Dialog" if you are using custom dialog, but rest is perfect. +1 – Alboran

issue i am facing in this is that when i minimize the app when the dialog is showing and again restore the app, the dialog animates again, how to avoid that, rest its perfect. +1 – Alboran

hello, i want to use my own Interpolator, please guide me. – Centrosome

Answer 2

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);
   

Rabin

You can use default android fade animations '@android:anim/fade_in' '@android:anim/fade_out' – Prostate

Thank you, Earlier it wasn't there when I posted this answer. :) – Rabin

Answer 3

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);

Intumesce

Answer 4

First, you have to create two animation resources in res/anim dir

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>

then you have to create a style

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

and add this line to your class

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

Based in http://www.devexchanges.info/2015/10/showing-dialog-with-animation-in-android.html

Taft

reference URL is useful! – Valois

Answer 5

I meet the same problem,but ,at last I solve the problem by followed way

((ViewGroup)dialog.getWindow().getDecorView())
.getChildAt(0).startAnimation(AnimationUtils.loadAnimation(
context,android.R.anim.slide_in_left));

Alumroot

Not a sensible answer. The views inside the dialog gets animated – Lector

Answer 6

Try below code:

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));// set transparent in window background

        View _v = inflater.inflate(R.layout.some_you_layout, container, false);

        //load animation
        //Animation transition_in_view = AnimationUtils.loadAnimation(getContext(), android.R.anim.fade_in);// system animation appearance
        Animation transition_in_view = AnimationUtils.loadAnimation(getContext(), R.anim.customer_anim);//customer animation appearance

        _v.setAnimation( transition_in_view );
        _v.startAnimation( transition_in_view );
        //really beautiful
        return _v;

    }

Create the custom Anim.: res/anim/customer_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="500"
        android:fromYDelta="100%"
        android:toYDelta="-7%"/>
    <translate
        android:duration="300"
        android:startOffset="500"
        android:toYDelta="7%" />
    <translate
        android:duration="200"
        android:startOffset="800"
        android:toYDelta="0%" />

</set>

Mammal

Answer 7

with ref to https://mcmap.net/q/203955/-animate-a-custom-dialog

Animation for dialog open & close will work but if you using

dialog.setCanceledOnTouchOutside(true);

[then you ll be facing some issues]

Issue - If user clicks outside the dialogBox, then dialogBox will close without the animation

BugFix : I have changed the fadeIn/fadeOut animation to leftToRight/rightToLeft(Also in AlertDialog) leftToRight.anim

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:duration="300"
        android:fromXDelta="-100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />
</set>

rightToLeft.anim

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:duration="300"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="0%" />
</set>

Filigreed