change background color of a textview with animation

Question

I am developing an android application I'd like to display alphabets in a single circular area and I also need the circular area to be white and the alphabet to have primaryColor of my application,

this is my textView:

   <TextView
            android:id="@+id/first"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="A"
            android:background="@drawable/circle" />

This is the code for circle.xml in the drawable folder:

<?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval" >
    <stroke android:width="1dp" android:color="@color/colorPrimaryDark" />
    <gradient android:startColor="@color/white" android :endColor="@color/white"
    android:angle="270"
      />
 </shape>

This is the code of the filled_circle :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
  android:shape="oval" >
  <stroke android:width="1dp" android:color="@color/colorPrimaryLight" />
   <gradient android:startColor="@color/colorPrimaryLight" 
      android:endColor="@color/colorPrimaryLight"
    android:angle="270"
    />
</shape>

and code in the java file:

 @Override
public void onClick(View v) {


}

Question when each textarea of alphabet is clicked the white color should be fading out and the primaryColor should be fading in, with animation. can someone help , get this done with help of animation library in android 4 and above?

I am currently trying to replace the background of textview with another resource and applying animation to it, but I am completely open to any new suggestion and new way of performing this, I also provide my current code above but let me know if I have to make a fundamental change or modification to get it working with animation library?

Answer 1

I'd recommend you to do the following:

Do not try to animate everything in a single background drawable. You need to have:

<FrameLayout>
  <View/> //Just a view with your white circular background
  <View/> //Another view with circular background, but this one is gonna display the color
  <TextView/> //Centered, your alphabet letter
</FrameLayout>

So you want to put all this inside a custom view. The white circular background view is going to stay at it is. You can use the second circular view to set your alphabet's letter color. There's plenty of easy ways to change a color from a layer in a custom drawable list-layer (for example Programmatically change color of shape in layer list).

When you first inflate your custom view, you want to set the visibility of the colored circular view to invisible. The white circular view is going to stay visible. The TextView always on top.

Override the onClick method making your custom view to implement the View.OnClickListener and you should place there the code to run the animation. The only thing that you need to do is do an alpha animation of the colored circle view, and in the onAnimationEnd() hook you should set the visibility of the view to visible. You are going to need a boolean variable in your custom view to keep track of whether the colored circle is being shown or not. That way if the colored circle view is being displayed and the user clicks it, you can do the reverse animation to show only the white circle view.

Remember to do all this in a custom view to keep it nice and clean. Also remember to add a couple of custom attributes, so you can set the color of the colored circle view just from the xml.

I hope that this gives you an idea about how to implement it, IDK really have time for an example, but let me know if you get stuck somewhere or if you didn't get something of what I said.