Animar un diálogo personalizado


97

Estoy tratando de que aparezca un cuadro de diálogo personalizado como si se deslizara hacia abajo desde una vista de texto. es posible? Parece que no puedo aplicar ninguna animación a la clase de diálogo. Probé esta línea en el constructor, pero no tiene ningún efecto:

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

Ni siquiera estoy seguro de si la animación es correcta, pero podré ajustarla una vez que vea lo que está haciendo. Lo enumeraré a continuación en aras de la integridad. No busco ayuda sobre la animación real, solo la aplicación al diálogo.

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>

4
Necesito saber esto también. Parece posible animar casi cualquier cosa, aparte de esto. ¡¿O me equivoco ?!
andy_spoo

Respuestas:


215

Hoy he estado luchando con la animación de diálogo, finalmente lo hice funcionar usando estilos, así que aquí hay un ejemplo.

Para empezar, lo más importante: probablemente lo hice funcionar de 5 maneras diferentes hoy, pero no podía decirlo porque ... Si la configuración de animación de su dispositivo está configurada en "Sin animaciones" (Configuración → Pantalla → Animación), entonces los diálogos ganaron. ¡No te animes, no importa lo que hagas!

La siguiente es una versión simplificada de mi styles.xml. Con suerte, se explica por sí mismo. Este debe estar ubicado en 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>

El windowEnterAnimationes uno de mis animaciones y se encuentra en res\anim. El windowExitAnimationes una de las animaciones que es parte del SDK de Android.

Luego, cuando creo el Diálogo en mi onCreateDialog(int id)método de actividades , hago lo siguiente.

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

Alternativamente, puede configurar las animaciones de la siguiente manera en lugar de usar el constructor Dialog que toma un tema.

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

2
Ese fue solo un nombre que inventé para este ejemplo, en realidad nunca creé esa animación.
ChrisJD

2
Muchas gracias por esta respuesta, está muy mal documentada, aunque encontré esta publicación a través de una pista del grupo de desarrolladores de Android .
David Snabel-Caunt

3
+1 Para "Si la configuración de animación de sus dispositivos está establecida en" Sin animaciones "(Configuración → Pantalla → Animación), ¡los cuadros de diálogo no se animarán sin importar lo que haga!". Me había olvidado de comprobarlo.
Vincent Mimoun-Prat

Dialog dialog = new Dialog(this, R.style.PauseDialog);es para API 11 pero esto es generalDialog dialog = new Dialog(Context context);
mehmet

2
El problema al que me enfrento en esto es que cuando minimizo la aplicación cuando se muestra el cuadro de diálogo y nuevamente restauro la aplicación, el cuadro de diálogo se anima nuevamente, cómo evitar eso, descansa perfecto. +1
Parth Anjaria

56

He creado la animación Fade in y Fade Out para Dialogbox usando el código ChrisJD.

  1. Dentro de 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. Dentro de 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. Dentro de 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. Actividad principal

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

11
Puede usar las animaciones de desvanecimiento de Android predeterminadas '@android: anim / fade_in' '@android: anim / fade_out'
Marek

19

De derecha a izquierda (animación de entrada) y de izquierda a derecha (animación de salida):

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>

Crea dos archivos en 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%"/>

En tu Fragmento / Actividad:

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

13

Me encuentro con el mismo problema, pero, por fin, resuelvo el problema de la siguiente manera

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

4
No es una respuesta sensata. Las vistas dentro del cuadro de diálogo se animan
DJphy

12

Primero, debe crear dos recursos de animación en 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>

entonces tienes que crear un estilo

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

y agrega esta línea a tu clase

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

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


La URL de referencia es útil.
ahmednabil88

2

Pruebe el siguiente código:

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;

    }

Cree la animación personalizada: 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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.