Using property animation to change the background color of a view between 2 different colors

Question

Android Studio 1.1 Beta 4

Hello,

I am trying to animate a PagerTitleStrip to change color from a dark green to a light green and repeat itself. However, when I try and start the animation nothing changes.

This is my PagerTitleStrip that I am trying to change the background property. Background property not specified here, as I will change it at runtime.

<android.support.v4.view.PagerTitleStrip
android:id="@+id/pager_title_strip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:paddingBottom="4dp"
    android:paddingTop="4dp"
    android:textColor="#fff"/>

My animation file in my res/animator/pager_title_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName="background"
        android:valueTo="@android:color/holo_green_light"
        android:valueFrom="@android:color/holo_green_dark"
        android:duration="500"
        android:repeatCount="-1"
        android:repeatMode="reverse"/>
</set>

And in my java code where I start it:

AnimatorSet animatorSet = (AnimatorSet)AnimatorInflater.loadAnimator(getApplicationContext(),R.animator.pager_title_animator);
animatorSet.setTarget(mPagerTitleStrip);
animatorSet.start();

Many thanks for any suggestions,

score 1 · Accepted Answer · edited May 23 '17 at 12:10

You can accomplish this by using a TransitionDrawable as seen in this thread: Animate change of view background color on Android

Here's the breakdown:

Create a drawable xml file in your drawable folder similar to this:

<?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="@android:color/holo_green_light" />
    <item android:drawable="@android:color/holo_green_dark" />
</transition>

Define your pager title strip with this as the background:

<android.support.v4.view.PagerTitleStrip
android:id="@+id/pager_title_strip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:paddingBottom="4dp"
    android:paddingTop="4dp"
    android:textColor="#fff"
    android:background="@drawable/my_transition_bg"/>

Then animate in the code like so:

TransitionDrawable transition = (TransitionDrawable) mPagerTitleStrip.getBackground();
transition.startTransition(500);

This should get you started.

Using property animation to change the background color of a view between 2 different colors

1 Answers1