Animate change of view background color on Android

Question

How do you animate the change of background color of a view on Android    For example    I have a view with a red background color  The background color of the view changes to blue  How can I do a smooth transition between colors   If this can t be done with views  an alternative will be welcome

User · Answer

This is the method I use in a Base Activity to change background. I'm using GradientDrawables generated in code, but could be adapted to suit.

    protected void setPageBackground(View root, int type){
        if (root!=null) {
            Drawable currentBG = root.getBackground();
            //add your own logic here to determine the newBG 
            Drawable newBG = Utils.createGradientDrawable(type); 
            if (currentBG==null) {
                if(Build.VERSION.SDK_INT<Build.VERSION_CODES.JELLY_BEAN){
                    root.setBackgroundDrawable(newBG);
                }else{
                    root.setBackground(newBG);
                }
            }else{
                TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{currentBG, newBG});
                transitionDrawable.setCrossFadeEnabled(true);
                if(Build.VERSION.SDK_INT<Build.VERSION_CODES.JELLY_BEAN){
                     root.setBackgroundDrawable(transitionDrawable);
                }else{
                    root.setBackground(transitionDrawable);
                }
                transitionDrawable.startTransition(400);
            }
        }
    }

update: In case anyone runs in to same issue I found, for some reason on Android <4.3 using setCrossFadeEnabled(true) cause a undesirable white out effect so I had to switch to a solid colour for <4.3 using @Roman Minenok ValueAnimator method noted above.

User · Answer

Here s a nice function that allows this   public static void animateBetweenColors final  NonNull View viewToAnimateItsBackground  final int colorFrom                                          final int colorTo  final int durationInMs        final ColorDrawable colorDrawable   new ColorDrawable durationInMs  gt  0   colorFrom   colorTo       ViewCompat setBackground viewToAnimateItsBackground  colorDrawable       if  durationInMs  gt  0            final ValueAnimator colorAnimation   ValueAnimator ofObject new ArgbEvaluator    colorFrom  colorTo           colorAnimation addUpdateListener animator - gt                colorDrawable setColor  Integer  animator getAnimatedValue                 ViewCompat setBackground viewToAnimateItsBackground  colorDrawable                       colorAnimation setDuration durationInMs           colorAnimation start              And in Kotlin    JvmStatic fun animateBetweenColors viewToAnimateItsBackground  View  colorFrom  Int  colorTo  Int  durationInMs  Int        val colorDrawable   ColorDrawable if  durationInMs  gt  0  colorFrom else colorTo      ViewCompat setBackground viewToAnimateItsBackground  colorDrawable      if  durationInMs  gt  0            val colorAnimation   ValueAnimator ofObject ArgbEvaluator    colorFrom  colorTo          colorAnimation addUpdateListener   animator  ValueAnimator - gt              colorDrawable color    animator animatedValue as Int              ViewCompat setBackground viewToAnimateItsBackground  colorDrawable                    colorAnimation duration   durationInMs toLong           colorAnimation start

User · Answer

I ve found that the implementation used by ArgbEvaluator in the Android source code does best job in transitioning colors  When using HSV  depending on the two colors  the transition was jumping through too many hues for me  But this method s doesn t   If you are trying to simply animate  use ArgbEvaluator with ValueAnimator as suggested here   ValueAnimator colorAnimation   ValueAnimator ofObject new ArgbEvaluator    colorFrom  colorTo   colorAnimation addUpdateListener new AnimatorUpdateListener           Override     public void onAnimationUpdate ValueAnimator animator            view setBackgroundColor  int  animator getAnimatedValue                colorAnimation start      However  if you are like me and want to tie your transition with some user gesture or other value passed from an input  the ValueAnimator is not of much help  unless your are targeting for API 22 and above  in which case you can use the ValueAnimator setCurrentFraction   method   When targeting below API 22  wrap the code found in ArgbEvaluator source code in your own method  as shown below   public static int interpolateColor float fraction  int startValue  int endValue        int startA    startValue  gt  gt  24   amp  0xff      int startR    startValue  gt  gt  16   amp  0xff      int startG    startValue  gt  gt  8   amp  0xff      int startB   startValue  amp  0xff      int endA    endValue  gt  gt  24   amp  0xff      int endR    endValue  gt  gt  16   amp  0xff      int endG    endValue  gt  gt  8   amp  0xff      int endB   endValue  amp  0xff      return   startA    int   fraction    endA - startA     lt  lt  24                  startR    int   fraction    endR - startR     lt  lt  16                  startG    int   fraction    endG - startG     lt  lt  8                  startB    int   fraction    endB - startB          And use it however you wish

User · Answer

I ended up figuring out a  pretty good  solution for this problem   You can use a TransitionDrawable to accomplish this  For example  in an XML file in the drawable folder you could write something like    lt  xml version  1 0  encoding  UTF-8   gt   lt transition xmlns android  http   schemas android com apk res android  gt       lt  -- The drawables used here can be solid colors  gradients  shapes  images  etc  -- gt       lt item android drawable   drawable original state    gt       lt item android drawable   drawable new state    gt   lt  transition gt    Then  in your XML for the actual View you would reference this TransitionDrawable in the android background attribute   At this point you can initiate the transition in your code on-command by doing   TransitionDrawable transition    TransitionDrawable  viewObj getBackground    transition startTransition transitionTime     Or run the transition in reverse by calling   transition reverseTransition transitionTime       See Roman s answer for another solution using the Property Animation API  which wasn t available at the time this answer was originally posted

User · Answer

If you want color animation like this     this code will help you   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

User · Answer

You can make an object animator  For example  I have a targetView and I want to change your background color   int colorFrom   Color RED  int colorTo   Color GREEN  int duration   1000  ObjectAnimator ofObject targetView   backgroundColor   new ArgbEvaluator    colorFrom  colorTo       setDuration duration       start

User · Answer

add a folder animator into res folder   the name must be animator   Add an animator resource file  For example res animator fade xml   lt  xml version  1 0  encoding  utf-8   gt   lt set xmlns android  http   schemas android com apk res android  gt       lt objectAnimator         android propertyName  backgroundColor          android duration  1000          android valueFrom   000000          android valueTo   FFFFFF          android startOffset  0          android repeatCount  -1          android repeatMode  reverse    gt   lt  set gt    Inside Activity java file  call this  View v   getWindow   getDecorView   findViewById android R id content   AnimatorSet set    AnimatorSet  AnimatorInflater loadAnimator this  R animator fade   set setTarget v   set start

User · Answer

You can use new Property Animation Api for color animation   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      For backward compatibility with Android 2 x use Nine Old Androids library from Jake Wharton    The getColor method was deprecated in Android M  so you have two choices    If you use the support library  you need to replace the getColor calls with   ContextCompat getColor this  R color red    if you don t use the support library  you need to replace the getColor calls with   getColor R color red

User · Answer

The documentation on XML powered animations is horrible  I ve searched around hours just to animate the background color of a button when pressing    The sad thing is that the animation is only one attribute away  You can use exitFadeDuration in the selector    lt selector xmlns android  http   schemas android com apk res android      android exitFadeDuration  200  gt        lt item android state pressed  true  gt           lt shape android tint   3F51B5    gt       lt  item gt        lt item gt           lt shape android tint   F44336    gt       lt  item gt    lt  selector gt    Then just use it as background for your view  No Java Kotlin code needed

User · Answer

best way is to use ValueAnimator and 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

User · Answer

Another easy way to achieve this is to perform a fade using AlphaAnimation    Make your view a ViewGroup Add a child view to it at index 0  with match parent layout dimensions Give your child the same background as the container Change to background of the container to the target color Fade out the child using AlphaAnimation  Remove the child when the animation is complete  using an AnimationListener

User · Answer

Use the below function for Kotlin    private fun animateColorValue view  View        val colorAnimation           ValueAnimator ofObject ArgbEvaluator    Color GRAY  Color CYAN      colorAnimation duration   500L     colorAnimation addUpdateListener   animator - gt  view setBackgroundColor animator animatedValue as Int        colorAnimation start       Pass whatever view you want to change color of

User · Answer

You can use ArgbEvaluatorCompat class above API 11  implementation  com google android material material 1 0 0     ValueAnimator colorAnim   ValueAnimator ofObject new ArgbEvaluatorCompat    startColor  endColor   colorAnim addUpdateListener new ValueAnimator AnimatorUpdateListener              Override         public void onAnimationUpdate ValueAnimator animation                mTargetColor    int  animation getAnimatedValue                      colorAnim start

User · Answer

Answer is given in many ways  You can also use ofArgb startColor endColor  of ValueAnimator    for API   21   int cyanColorBg   ContextCompat getColor this R color cyan bg   int purpleColorBg   ContextCompat getColor this R color purple bg    ValueAnimator valueAnimator   ValueAnimator ofArgb cyanColorBg purpleColorBg           valueAnimator setDuration 500           valueAnimator setInterpolator new LinearInterpolator             valueAnimator addUpdateListener new ValueAnimator AnimatorUpdateListener                    Override               public void onAnimationUpdate ValueAnimator valueAnimator                       relativeLayout setBackgroundColor  Integer valueAnimator getAnimatedValue                                         valueAnimator start

User · Answer

Based on ademar111190 s answer  I have created this method the will pulse the background color of a view between any two colors   private void animateBackground View view  int colorFrom  int colorTo  int duration          ObjectAnimator objectAnimator   ObjectAnimator ofObject view   backgroundColor   new ArgbEvaluator    colorFrom  colorTo       objectAnimator setDuration duration         objectAnimator setRepeatCount Animation INFINITE       objectAnimator addListener new Animator AnimatorListener              Override         public void onAnimationStart Animator animation                         Override         public void onAnimationEnd Animator animation                   Call this method again  but with the two colors switched around              animateBackground view  colorTo  colorFrom  duration                       Override         public void onAnimationCancel Animator animation                         Override         public void onAnimationRepeat Animator animation                           objectAnimator start

User · Answer

Depending on how your view gets its background color and how you get your target color there are several different ways to do this   The first two uses the Android Property Animation framework   Use a Object Animator if    Your view have its background color defined as a argb value in a xml file  Your view have previously had its color set by view setBackgroundColor   Your view have its background color defined in a drawable that DOES NOT defines any extra properties like stroke or corner radiuses  Your view have its background color defined in a drawable and you want to remove any extra properties like stroke or corner radiuses  keep in mind that the removal of the extra properties will not animated    The object animator works by calling view setBackgroundColor which replaces the defined drawable unless is it an instance of a ColorDrawable  which it rarely is  This means that any extra background properties from a drawable like stroke or corners will be removed   Use a Value Animator if    Your view have its background color defined in a drawable that also sets properties like the stroke or corner radiuses AND you want to change it to a new color that is decided while running    Use a Transition drawable if    Your view should switch between two drawable that have been defined before deployment    I have had some performance issues with Transition drawables that runs while I am opening a DrawerLayout that I haven t been able to solve  so if you encounter any unexpected stuttering you might have run into the same bug as I have    You will have to modify the Value Animator example if you want to use a StateLists drawable or a LayerLists drawable  otherwise it will crash on the final GradientDrawable background    GradientDrawable  view getBackground    line   Object Animator   View definition    lt View     android background   FFFF0000      android layout width  50dp      android layout height  50dp   gt    Create and use a ObjectAnimator like this   final ObjectAnimator backgroundColorAnimator   ObjectAnimator ofObject view                                                                          backgroundColor                                                                          new ArgbEvaluator                                                                           0xFFFFFFFF                                                                         0xff78c5f9   backgroundColorAnimator setDuration 300   backgroundColorAnimator start      You can also load the animation definition from a xml using a AnimatorInflater like XMight does in Android objectAnimator animate backgroundColor of Layout  Value Animator   View definition    lt View     android background   drawable example      android layout width  50dp      android layout height  50dp   gt    Drawable definition    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt       lt solid android color   FFFFFF   gt       lt stroke         android color   edf0f6          android width  1dp   gt       lt corners android radius  3dp   gt    lt  shape gt    Create and use a ValueAnimator like this   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      Transition drawable   View definition    lt View     android background   drawable example      android layout width  50dp      android layout height  50dp   gt    Drawable definition    lt  xml version  1 0  encoding  utf-8   gt   lt transition xmlns android  http   schemas android com apk res android  gt       lt item gt           lt shape gt               lt solid android color   FFFFFF   gt               lt stroke                 android color   edf0f6                  android width  1dp   gt               lt corners android radius  3dp   gt           lt  shape gt       lt  item gt        lt item gt           lt shape gt               lt solid android color   78c5f9   gt               lt stroke                 android color   68aff4                  android width  1dp   gt               lt corners android radius  3dp   gt           lt  shape gt       lt  item gt   lt  transition gt    Use the TransitionDrawable like this   final TransitionDrawable background    TransitionDrawable  view getBackground    background startTransition 300     You can reverse the animations by calling  reverse   on the animation instance   There are some other ways to do animations but these three is probably the most common  I generally use a ValueAnimator

[android] Animate change of view background color on Android

Examples related to android

Examples related to animation

Examples related to view

Examples related to background-color