Animar cambio de color de fondo de vista en Android

9 minutos de lectura

Animar cambio de color de fondo de vista en Android
hpico

¿Cómo se anima el cambio de color de fondo de una vista en Android?

Por ejemplo:

Tengo una vista con un color de fondo rojo. El color de fondo de la vista cambia a azul. ¿Cómo puedo hacer una transición suave entre los colores?

Si esto no se puede hacer con vistas, una alternativa será bienvenida.

  • Uno esperaría que una transición suave entre colores no debería ser un problema para una plataforma como Android. Sin embargo, tal vez las vistas no estén diseñadas para eso. La pregunta sigue en pie.

    – hpique

    10 de abril de 2010 a las 20:16


  • Un bien videotutorial

    – Alex Jolig

    8 de abril de 2017 a las 4:39


Animar cambio de color de fondo de vista en Android
Minenok romano

Puedes usar nuevos API de animación de propiedades para animación en color:

int colorFrom = getResources().getColor(R.color.red);
int colorTo = getResources().getColor(R.color.blue);
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
colorAnimation.setDuration(250); // milliseconds
colorAnimation.addUpdateListener(new AnimatorUpdateListener() {

    @Override
    public void onAnimationUpdate(ValueAnimator animator) {
        textView.setBackgroundColor((int) animator.getAnimatedValue());
    }

});
colorAnimation.start();

Para compatibilidad con versiones anteriores con el uso de Android 2.x Biblioteca de nueve viejos androides de Jake Warton.

los getColor El método quedó obsoleto en Android M, por lo que tiene dos opciones:

  • Si usa la biblioteca de soporte, debe reemplazar el getColor llamadas con:

    ContextCompat.getColor(this, R.color.red);
    
  • si no usa la biblioteca de soporte, debe reemplazar el getColor llamadas con:

    getColor(R.color.red);
    

  • solución “imprescindible” si está utilizando la API de animación de propiedades (o NineOldAndroid). Anima muy suavemente.

    – Dmitri Zaytsev

    6 de febrero de 2014 a las 15:04

  • ¿Hay alguna forma de establecer la duración de la transición de esta manera?

    – iGio90

    22 de marzo de 2014 a las 17:29

  • @iGio90 sí, no lo vas a creer, pero el método llama a setDuration() 🙂

    – Roman Minenok

    2 mayo 2014 a las 19:10

  • ValueAnimator.ofArgb(colorFrom, colorTo) parece más al punto, pero lamentablemente es nuevo.

    – TWiStErRob

    29 de marzo de 2016 a las 11:37


  • ¡Hermosa solución! Gracias.

    – Steve locura

    3 de agosto de 2016 a las 12:32


Animar cambio de color de fondo de vista en Android
idolatrar

¡Terminé encontrando una (bastante buena) solución para este problema!

Puedes usar un TransiciónDibujable para lograr esto. Por ejemplo, en un archivo XML en la carpeta dibujable, podría escribir algo como:

<?xml version="1.0" encoding="UTF-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- The drawables used here can be solid colors, gradients, shapes, images, etc. -->
    <item android:drawable="@drawable/original_state" />
    <item android:drawable="@drawable/new_state" />
</transition>

Luego, en su XML para la Vista real, haría referencia a este TransitionDrawable en el android:background atributo.

En este punto, puede iniciar la transición en su código a pedido haciendo lo siguiente:

TransitionDrawable transition = (TransitionDrawable) viewObj.getBackground();
transition.startTransition(transitionTime);

O ejecute la transición a la inversa llamando:

transition.reverseTransition(transitionTime);

Consulte la respuesta de Roman para conocer otra solución que utiliza la API de animación de propiedades, que no estaba disponible en el momento en que se publicó originalmente esta respuesta.

  • Gracias mxrider! Esto responde la pregunta. Desafortunadamente, no funciona para mí porque la vista que tiene TransitionDrawable como fondo también debe estar animada, y parece que la animación de la vista anula la transición de fondo. ¿Algunas ideas?

    – hpique

    9 de julio de 2010 a las 20:36

  • Lo resolvió iniciando TransitionDrawable DESPUÉS de iniciar la animación.

    – hpique

    9 de julio de 2010 a las 21:00

  • ¡Increíble! ¡Me alegro de que lo hayas hecho funcionar! Hay muchas cosas geniales que puedes hacer en xml con Android, muchas de las cuales están un poco ocultas en los documentos y, en mi opinión, no son obvias.

    – idolatrar

    10 de julio de 2010 a las 4:28

  • No es obvio en absoluto. Debo mencionar que no estoy usando xml en mi caso, ya que el color es dinámico. Su solución también funciona si crea el TransitionDrawable por código.

    – hpique

    10 de julio de 2010 a las 9:43

  • Uno de los principales inconvenientes es que no hay un oyente completo de animación.

    – Leonid Ustenko

    16 de agosto de 2018 a las 9:49

1646750296 698 Animar cambio de color de fondo de vista en Android
mattías

Dependiendo de cómo su vista obtiene su color de fondo y cómo obtiene su color de destino, hay varias formas diferentes de hacerlo.

Los dos primeros utilizan el Animación de propiedades de Android estructura.

Utilizar una Animador de objetos si:

  • Su vista tiene su color de fondo definido como un argb valor en un archivo xml.
  • Su vista ha tenido previamente su color establecido por view.setBackgroundColor()
  • Su vista tiene su color de fondo definido en un dibujo que NO define cualquier propiedad adicional como trazo o radios de esquina.
  • Su vista tiene su color de fondo definido en un dibujo y desea eliminar cualquier propiedad adicional como trazo o radios de esquina, tenga en cuenta que la eliminación de las propiedades adicionales no se animará.

El animador de objetos funciona llamando view.setBackgroundColor que reemplaza el dibujable definido a menos que sea una instancia de un ColorDrawable, que rara vez lo es. Esto significa que se eliminarán todas las propiedades de fondo adicionales de un dibujo como un trazo o esquinas.

Utilizar una Animador de valor si:

  • Su vista tiene su color de fondo definido en un dibujo que también establece propiedades como el trazo o los radios de las esquinas Y desea cambiarlo a un nuevo color que se decide durante la ejecución.

Utilizar una Transición dibujable si:

  • Su vista debe cambiar entre dos dibujables que se han definido antes de la implementación.

He tenido algunos problemas de rendimiento con los elementos de diseño de transición que se ejecutan mientras abro un DrawerLayout que no he podido resolver, por lo que si encuentra algún tartamudeo inesperado, es posible que se haya encontrado con el mismo error que yo.

Tendrá que modificar el ejemplo de Value Animator si desea utilizar un Listas de estado dibujables o un Listas de capas dibujablesde lo contrario se bloqueará en el final GradientDrawable background = (GradientDrawable) view.getBackground(); línea.

Animador de objetos:

Ver definición:

<View
    android:background="#FFFF0000"
    android:layout_width="50dp"
    android:layout_height="50dp"/>

Crear y utilizar un ObjectAnimator Me gusta esto.

final ObjectAnimator backgroundColorAnimator = ObjectAnimator.ofObject(view,
                                                                       "backgroundColor",
                                                                       new ArgbEvaluator(),
                                                                       0xFFFFFFFF,
                                                                       0xff78c5f9);
backgroundColorAnimator.setDuration(300);
backgroundColorAnimator.start();

También puede cargar la definición de animación desde un xml usando un AnimatorInflater como lo hace XMight en Android objectAnimator animate backgroundColor of Layout

Animador de valor:

Ver definición:

<View
    android:background="@drawable/example"
    android:layout_width="50dp"
    android:layout_height="50dp"/>

Definición dibujable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke
        android:color="#edf0f6"
        android:width="1dp"/>
    <corners android:radius="3dp"/>

</shape>

Cree y use un ValueAnimator como este:

final ValueAnimator valueAnimator = ValueAnimator.ofObject(new ArgbEvaluator(),
                                                           0xFFFFFFFF,
                                                           0xff78c5f9);

final GradientDrawable background = (GradientDrawable) view.getBackground();
currentAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

    @Override
    public void onAnimationUpdate(final ValueAnimator animator) {
        background.setColor((Integer) animator.getAnimatedValue());
    }

});
currentAnimation.setDuration(300);
currentAnimation.start();

Transición dibujable:

Ver definición:

<View
    android:background="@drawable/example"
    android:layout_width="50dp"
    android:layout_height="50dp"/>

Definición dibujable:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#FFFFFF"/>
            <stroke
                android:color="#edf0f6"
                android:width="1dp"/>
            <corners android:radius="3dp"/>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="#78c5f9"/>
            <stroke
                android:color="#68aff4"
                android:width="1dp"/>
            <corners android:radius="3dp"/>
        </shape>
    </item>
</transition>

Usa el TransitionDrawable así:

final TransitionDrawable background = (TransitionDrawable) view.getBackground();
background.startTransition(300);

Puede invertir las animaciones llamando .reverse() en la instancia de animación.

Hay otras formas de hacer animaciones, pero estas tres son probablemente las más comunes. Generalmente uso un ValueAnimator.

  • en realidad, es posible definir y usar TransitionDrawable en el código, pero por alguna razón, no funciona la segunda vez. extraño.

    – desarrollador de Android

    30 de abril de 2014 a las 8:31

  • Puedo usar el animador de objetos incluso cuando mi vista tiene configurado ColorDrawable. Simplemente lo guardo en una variable local, lo configuro en nulo y cuando finaliza la animación, restablezco el ColorDrawable original.

    – Milos Černilovský

    21 de julio de 2015 a las 13:13

1646750298 265 Animar cambio de color de fondo de vista en Android
ademar111190

Puedes hacer un animador de objetos. Por ejemplo, tengo un targetView y quiero cambiar el color de fondo:

int colorFrom = Color.RED;
int colorTo = Color.GREEN;
int duration = 1000;
ObjectAnimator.ofObject(targetView, "backgroundColor", new ArgbEvaluator(), colorFrom, colorTo)
    .setDuration(duration)
    .start();

1646750299 175 Animar cambio de color de fondo de vista en Android
RBK

Si quieres una animación en color como esta,

Ingrese la descripción de la imagen aquí

este código te ayudará:

ValueAnimator anim = ValueAnimator.ofFloat(0, 1);   
anim.setDuration(2000);

float[] hsv;
int runColor;
int hue = 0;
hsv = new float[3]; // Transition color
hsv[1] = 1;
hsv[2] = 1;
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {

        hsv[0] = 360 * animation.getAnimatedFraction();

        runColor = Color.HSVToColor(hsv);
        yourView.setBackgroundColor(runColor);
    }
});

anim.setRepeatCount(Animation.INFINITE);

anim.start();

  • ¿Dónde está la parte cuando animado se inicializa la variable?

    – Voto

    22 de agosto de 2016 a las 18:26

  • @VoW, es solo una instancia de ValueAnimator.

    – RBK

    24 de abril de 2018 a las 9:16

  • Debería ser anim.setRepeatCount(ValueAnimator.INFINITE); no Animation.INFINITE por ahora es lo mismo, pero no tenemos garantías

    – Mikhail Kristop

    04/10/2018 a las 12:50

  • @MikhailKrishtop ¿Qué pasa con Animation.INFINITE? desarrollador.android.com/reference/android/view/animation/…

    – RBK

    5 de octubre de 2018 a las 7:05

1646750301 43 Animar cambio de color de fondo de vista en Android
c0dehunter

la mejor manera es usar valor animador y ColorUtils.blendARGB

 ValueAnimator valueAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
 valueAnimator.setDuration(325);
 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {

              float fractionAnim = (float) valueAnimator.getAnimatedValue();

              view.setBackgroundColor(ColorUtils.blendARGB(Color.parseColor("#FFFFFF")
                                    , Color.parseColor("#000000")
                                    , fractionAnim));
        }
});
valueAnimator.start();

  • ¿Dónde está la parte cuando animado se inicializa la variable?

    – Voto

    22 de agosto de 2016 a las 18:26

  • @VoW, es solo una instancia de ValueAnimator.

    – RBK

    24 de abril de 2018 a las 9:16

  • Debería ser anim.setRepeatCount(ValueAnimator.INFINITE); no Animation.INFINITE por ahora es lo mismo, pero no tenemos garantías

    – Mikhail Kristop

    04/10/2018 a las 12:50

  • @MikhailKrishtop ¿Qué pasa con Animation.INFINITE? desarrollador.android.com/reference/android/view/animation/…

    – RBK

    5 de octubre de 2018 a las 7:05

1646750302 818 Animar cambio de color de fondo de vista en Android
mbo

La documentación sobre animaciones basadas en XML es horrible. He buscado alrededor de horas solo para animar el color de fondo de un botón al presionar … Lo triste es que la animación está a solo un atributo de distancia: puede usar exitFadeDuration en el selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:exitFadeDuration="200">

    <item android:state_pressed="true">
        <shape android:tint="#3F51B5" />
    </item>

    <item>
        <shape android:tint="#F44336" />
    </item>

</selector>

Entonces solo úsalo como background para tu vista No se necesita código Java/Kotlin.

  • Excelente respuesta Tenga en cuenta que es posible que necesite android:enterFadeDuration así como; mi experiencia fue que, sin ella, mi animación no funcionó la segunda vez.

    – Libra esterlina

    13 de febrero de 2020 a las 18:38

  • @String, extraño, en un emulador funciona muchas veces sin android:enterFadeDuration.

    – CoolMind

    23 de julio de 2021 a las 11:28

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad