Animating custom CheckedTextView when clicked with AnimationDrawable

1.1k views Asked by At

I want to add some kind of Material look to my checkboxes. I want the checkmark drawable to animate from one state to another, using custom drawables. I tried to animate both an ImageView (to see if it works) and a CheckedTextView (which is what I really need).

In order to do this I created both views in my layout, and set android:onClick to a custom method, respectively animateImage(View v) and animateChecked(View v). My problem is that the second does NOT work, despite the only difference between the two is how I get and set the drawable I need.

layout.xml

<ImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_gravity="center"
    android:src="@drawable/checkbox_off" <!-- static png showing the unchecked mark -->
    android:clickable="true"
    android:onClick="animateImage"/>

<CheckedTextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/impo8"
    android:gravity="center_vertical|left"
    android:checked="false"
    android:clickable="true"
    android:CheckMark="@drawable/checkbox_off" <!-- again -->
    android:onClick="animateChecked" />

activity

public void animateImage(View v) {
    ImageView iv = (ImageView)v;
    iv.setBackgroundResource(R.drawable.animation_checkbox_on);
    AnimationDrawable adOn = (AnimationDrawable)iv.getBackground();
    adOn.setColorFilter(getResources().getColor(R.color.static), PorterDuff.Mode.SRC_IN);
    adOn.start();
}
public void animateChecked(View v) {
    CheckedTextView c = (CheckedTextView)v;
    c.setCheckMarkDrawable(R.drawable.animation_checkbox_on);
    AnimationDrawable ad = (AnimationDrawable) c.getCheckMarkDrawable();
    ad.setColorFilter(getResources().getColor(R.color.static), PorterDuff.Mode.SRC_IN);
    ad.start();
}

Of course animation_checkbox_on, used in both methods, is an animation-list xml resource with static pngs and duration. I wanted to keep this as simple as possible (not even implemented an "if checked" statement).

As said: the first method works and ImageView gets animated correctly; the second method does NOT work, and the checkmark remains still. Is there some kind of conceptual error in my code, or am I wrong somewhere? How can I make this work on a CheckedTextView mark? I don't get any warning from Android Studio. Thank you.

/drawable/animation_checkbox_on

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item
    android:drawable="@drawable/checkbox_off2" android:duration="50" />
<item
    android:drawable="@drawable/checkbox_off3" android:duration="50" />
<item
    android:drawable="@drawable/checkbox_on" android:duration="50" />

EDIT: I noticed that the first item in the animation-list gets actually loaded. Also, the result is the same if I delete the line ad.start() (!).

It looks like either setCheckMarkDrawable or getCheckMarkDrawable return just the first item of the animation-list, thus making ineffective ad.start(), and transforming the animation into a simple drawable switch. If this is true the question would be how to animate a CheckedTextView. I've read about manually pausing the thread for some time before applying next drawable, but that doesn't seem the best option to me.

0

There are 0 answers