How to give Color changing animation to a custom shape?

Question

I have a round custom shape and I want it to change its color, but I get the shape as a square not round as I want

Here is my shape:

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid
    android:color="#666666"/>

<size
    android:width="120dp"
    android:height="120dp"/>

in my layout:

  <ImageView
    android:id="@+id/rgb_led"
    android:visibility="gone"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:background="@drawable/round_led"
    android:layout_centerHorizontal="true" />  

in code:

 ledImageView.setVisibility(View.VISIBLE);
    int colorFrom = getResources().getColor(colorFromId);
    int colorTo = getResources().getColor(colorToId);
    colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
    colorAnimation.setDuration(duration);
    colorAnimation.setRepeatCount(ValueAnimator.INFINITE);
    colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

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

    });
    colorAnimation.start();  

but I get a flashing square not a round shape!?

EDIT:
I actually would like to animate a round image to get an effect of a flashing colored light that can change colors and flashing duration.
Cheers.

Answer 1

Try this code, I use it in my application to show a round animation cycle:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="5"
    android:toDegrees="360" >

<!--    Duration = 1 means that the rotation will be done in 1 second
    increase duration if you want to speed up the rotation-->


<shape
android:innerRadiusRatio="30"
android:shape="ring"
android:thicknessRatio="80"
android:useLevel="false">

<size
    android:height="80dp"
    android:width="80dp" />

<gradient
    android:centerColor="@android:color/transparent"
    android:centerY="0.50"
    android:endColor="#E6E6E6"
    android:startColor="#BEBEBE"
    android:type="sweep"
    android:useLevel="false" />
</shape>

</rotate>

Edit 1:

You can use ProgressBar, much easier to implement and to control via code:

in your xml file:

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="bottom|center_horizontal"
        android:visibility="gone"
        android:indeterminate="true" >
    </ProgressBar>

in your *.java file

ProgressBar progress = (ProgressBar) findViewById(R.id.progressBar);
// Control the size
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(80,80);
// Control position
params.gravity = Gravity.CENTER_VERTICAL| Gravity.CENTER_HORIZONTAL;
// Set new parameters and visibility
progress.setLayoutParams(params);
progress.setVisibility(View.VISIBLE);
// Set Color  
progress.getIndeterminateDrawable().setColorFilter(0xFFFF0000,android.graphics.PorterDuff.Mode.MULTIPLY);