Removing the background of a frame animation in Android

Question

How can I remove the background of a frame animation (or set it to be transparent)?

When I set the background colour in the xml layout file to be transparent, it turns up black when running it.

When I setBackgroundColor(0); in the Java code I get the following exception:

java.lang.ClassCastException: android.graphics.drawable.ColorDrawable cannot be cast to android.graphics.drawable.AnimationDrawable

/res/layout/dialog_loading.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/background_black_semitransparent" >
    <!-- The background of this LinearLayout is so that there is 
         a semi transparent black overlay over the application content 
         while the loading animation plays -->

    <FrameLayout
        android:layout_width="@dimen/dialog_width"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@android:color/transparent" >

        <ImageView
            android:id="@+id/iv_loading"
            android:layout_width="@dimen/dialog_width"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            android:background="@android:color/transparent" />

    </FrameLayout>

</LinearLayout>

/res/anim/frame_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- The animation is defined by the animation-list element. The oneshot attribute defines whether or not the animation loops.
Each image is placed in a separate item elementwith the drawable attribute specifying the image file in /res/drawable/. 
The duration attribute specifies the time delay between images.
 -->

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
    android:oneshot="false">
<item android:drawable="@drawable/loading_1_00000" android:duration="75" />
<item android:drawable="@drawable/loading_1_00002" android:duration="75" />
<item android:drawable="@drawable/loading_1_00004" android:duration="75" />
<item android:drawable="@drawable/loading_1_00006" android:duration="75" />
<item android:drawable="@drawable/loading_1_00008" android:duration="75" />
<item android:drawable="@drawable/loading_1_00010" android:duration="75" />

<item android:drawable="@drawable/loading_1_00012" android:duration="75" />
<item android:drawable="@drawable/loading_1_00014" android:duration="75" />
<item android:drawable="@drawable/loading_1_00016" android:duration="75" />
<item android:drawable="@drawable/loading_1_00018" android:duration="75" />
<item android:drawable="@drawable/loading_1_00020" android:duration="75" />
<item android:drawable="@drawable/loading_1_00022" android:duration="75" />

<item android:drawable="@drawable/loading_1_00024" android:duration="75" />
<item android:drawable="@drawable/loading_1_00026" android:duration="75" />
<item android:drawable="@drawable/loading_1_00028" android:duration="75" />
<item android:drawable="@drawable/loading_1_00030" android:duration="75" />
<item android:drawable="@drawable/loading_1_00032" android:duration="75" />
<item android:drawable="@drawable/loading_1_00034" android:duration="75" />

<item android:drawable="@drawable/loading_1_00036" android:duration="75" />
<item android:drawable="@drawable/loading_1_00038" android:duration="75" />
<item android:drawable="@drawable/loading_1_00040" android:duration="75" />
<item android:drawable="@drawable/loading_1_00042" android:duration="75" />
<item android:drawable="@drawable/loading_1_00044" android:duration="75" />
<item android:drawable="@drawable/loading_1_00046" android:duration="75" />

<item android:drawable="@drawable/loading_1_00048" android:duration="75" />
<item android:drawable="@drawable/loading_1_00050" android:duration="75" />
<item android:drawable="@drawable/loading_1_00052" android:duration="75" />

</animation-list>

Java code:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

    // Inflate the layout to use as dialog or embedded fragment
    view = inflater.inflate(R.layout.dialog_loading, container, false);

    //Get the ImageView 
    ImageView img1 = (ImageView) view.findViewById(R.id.iv_loading);
    //set the animation as the background of the ImageView
    //the animation is described in /res/anim/frame_animation.xml

    img1.setBackgroundResource(R.anim.frame_animation);

    img1.setBackgroundColor(0);   // <---- get error here

    //create an instance of AnimationLoop
    AnimationLoop animLoop = new AnimationLoop(img1);

    //create a timer
    Timer t = new Timer(false);
    //schedule the animation loop
    t.schedule(animLoop, 100);

    return view;
}

//our animation handler
class AnimationLoop extends TimerTask
{
    ImageView img1;
    AnimationLoop(ImageView im)
    {
        img1 = im;
    }

    public void run()
    {
        // Get the background, which has been compiled to an AnimationDrawable object.
        AnimationDrawable frameAnimation1 = (AnimationDrawable) img1.getBackground();

        // Start the animation (looped play back by default).
        frameAnimation1.start();
    }
}

Error:

06-07 12:04:39.450: E/AndroidRuntime(6581): FATAL EXCEPTION: Timer-1
06-07 12:04:39.450: E/AndroidRuntime(6581): java.lang.ClassCastException: android.graphics.drawable.ColorDrawable cannot be cast to android.graphics.drawable.AnimationDrawable
06-07 12:04:39.450: E/AndroidRuntime(6581):     at za.co.domain.client.product.tools.ProgressDialogFragment$AnimationLoop.run(ProgressDialogFragment.java:79)
06-07 12:04:39.450: E/AndroidRuntime(6581):     at java.util.Timer$TimerImpl.run(Timer.java:284)

EDIT:

See screenshot from when the android:background="#0000" as suggested:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#0000" >
    <FrameLayout
        android:layout_width="@dimen/dialog_width"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#0000" >        
        <ImageView
            android:id="@+id/iv_loading"
            android:layout_width="@dimen/dialog_width"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            android:background="#0000" />        
    </FrameLayout>
</LinearLayout>

Answer 1

Try set

android:background="@null"

in your FrameLayout, remove the line android:background="@android:color/transparent" from your imageView.

---

UPDATE

You can also try adding this:

AnimationDrawable drawable = (AnimationDrawable)res.getDrawable(R.R.anim.frame_animation);
img1.setBackgroundDrawable(drawable);

Answer 2

ImageView has method setImageResource which corresponds to the image being drawn in the foreground. You have to set background to be transparent as some have pointed out already and call

img1.setImageResource(R.anim.frame_animation);

on your ImageView.

Also personally I would try to avoid having 52 bitmaps loaded into memory at once. animation-lists loads them all. This will probably work only on newer phones depending on image sizes.

Btw, it all works if your frames are on a transparent background. If they're not and you either need to make them to be or if it's not possible, you can implement a custom view which would draw bitmaps directly on a scale using PorterDuff blending mode. See documentation on Paint and PorterDuffColorFilter