Animate change of view background color on Android

android objectanimator background color
android animation
android:background animation effects
android animate view from one position to another
android animated background
android animate text color change
android gradient animation
android transition animation

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.

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:

<?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>

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.

How do you animate the change of background color of a view on , This example demonstrates how do I animate the change of background color of a View on android.Step 1 − Create a new project in Android  Android Apps/Applications Mobile Development This example demonstrates how do I animate the change of background color of a View on android. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main.xml.

How to create a background color animation in Android, and rotation of a View but not the background color, for instance. assign animators to the properties that you want to animate, such as color,  How do you animate the change of background color of a view on Android using Kotlin? Step 1 − Create a new project in Android Studio, go to File? New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main.xml. Step 3 − Add the

Property Animation Overview, android - Text and background color animation example @Override public void onClick(View view) { // Animate the layout background color  Android :: View Background Color Animation Nov 16, 2009 I was wondering if someone has a good answer to this.I am looking for a better way to animate a background color transition from on color to the next.Currently, I have two views, vCurrentColor which lays on top of the vNextColor, in a FrameLayout.

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

android, Animate change of view background color in Android. TransitionDrawable transition = (TransitionDrawable) viewObj.getBackground(); transition. You could set it to transparent: View.setBackgroundColor(0x00000000); Or android.R.color.transparent – Juhani Oct 29 '10 at 10:36 3 just found out that , another way to set it to transparent would be , View.setBackgroundColor(Color.TRANSPARENT); – sat Oct 29 '10 at 11:05

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

android.graphics.drawable.TransitionDrawable.startTransition java , Want to learn how to animate color change on Android? Check this short tutorial and get cool color animations for your Android ViewPager background. public View onCreateView(LayoutInflater inflater, ViewGroup  You can use relativeLayout, and add one layer of background view which set both height and width match_parent. All other UI element should put on top of this view. In your code. Define fadeOut and fadeIn animation. Find that background view by id, then do this:

Android Animated Colors. Animate Color Change, Layout grey above orange and fade out grey when you want to convert the image to orange by animating it's alpha to 0. The second option is to  Contents in this project Generate Random Color on Button Click. 1. Create a Relative Layout view as Root view in your activity_main.xml file . This is the View which background color we would change on button click.

Android: Change colour of drawable asset programmatically with , Android Animate CardView background color with TransitionDrawable. Example​#. public void setCardColorTran(CardView card) { ColorDrawable[] color = {new  Well you basically make two copies of the element you want to change the background color of, then place them on top of each other (the easiest way to do that is to place them in the same location of the grid). After that you just start fading the top control to 0 and then back to 1.

How To Animate colors in Android, Build and run. Pick the Background color item and tap on the screen. That’s amazing! Hey, you’re getting the hang of this pretty quickly. That’s a buttery-smooth background color change :] Combining Animations. Animating a view is pretty awesome, but so far you’ve changed only one property and one object at a time.

Comments
  • One would expect that a smooth transition between colors shouldn't be a problem for a platform like Android. Maybe views aren't built for it, though. The question still stands.
  • A good video tutorial
  • Thanks mxrider! This does answer the question. Unfortunately it doesn't work for me because the view that has the TransitionDrawable as background has to be animated as well, and it seems that the view animation overrides the background transition. Any ideas?
  • Solved it by starting the TransitionDrawable AFTER starting the animation.
  • Awesome! Glad you got it working! There is a lot of cool stuff you can do in xml with Android--much of which is kinda buried in the docs and not obvious in my opinion.
  • Not obvious at all. I should mention that I'm not using xml in my case, as the color is dynamic. Your solution also works if you create the TransitionDrawable by code.
  • One of the main drawbacks is that there is no animation complete listener
  • "musthave" solution if you are using Property Animation API (or NineOldAndroid). Animates very smoothly.
  • Is there any way to set the duration of the transition in this way?
  • @iGio90 yes, you are not not gonna believe it but the method call setDuration() :)
  • ValueAnimator.ofArgb(colorFrom, colorTo) looks more to the point, but sadly it's new.