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 enter image description here 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>

Animation bg is turning black while running because frame images used for animation have black bg i guess. So, if u change just in xml, it wl b same(black bg) while running animation — Braj, Jul 01 '13 at 12:22

Neoh · Answer 1 · 2013-06-29T15:07:01.520

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);

edited Jun 29 '13 at 15:07

answered Jun 26 '13 at 16:41

Neoh

15,906
14
66
78

Thanks Neoh, but this doesn't work. The background is still black. I think it's because of this: img1.setBackgroundResource(R.anim.frame_animation); but I don't know what else?? – marienke Jun 27 '13 at 09:32

EvilDuck · Answer 2 · 2013-07-02T15:38:53.910

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

score 0 · Answer 3 · answered Jun 27 '13 at 15:27

0

For transparent background use android:background="#0000". #0000 denotes transparent background. Please note that if you use this in FrameLayout then you will have background_black_semitransparent as your background. If you want complete transparency then replace this with the above code.

answered Jun 27 '13 at 15:27

Rohan Kandwal

9,112
8
74
107

This doesn't work on my side - the background is still there. I've checked that the png images do NOT have a background. So where is this background coming from? I've put android:background="#0000" in the root LinearLayout (tested - the background is still there), then I added it to the FrameLayout AND the ImageView and the background is still there :( – marienke Jun 28 '13 at 08:24
1

consider this, you have 3 different components in xml each has its background. Each Layout is like a layer. `LinearLayout` is at the `bottom` then middle is `FrameLayout` and top most is `ImageView`. Now as far as transparency is considered. Consider putting a transparent glass as the base of each layer. Now if you put `ImageView`'s background as a glass then you can see the background of `FrameLayout`. Now if you set `FrameLayout`'s background as glass then you can see background of `LinearLayout` since both `ImageView` and and `FrameLayout` are glass. – Rohan Kandwal Jun 28 '13 at 12:01
If you want to just show the `ImageView` with no background at all. Then set the background of `LinearLayout` and `FrameLayout` as transparent ie. `#0000`. Also set the background of the `ImageView` as transparent . Since you are using `FrameLayout` your `ImageView` might not scale to the complete width and height of the `FrameLayout`. Thus the left space is filled with a background. This is happening with me too. – Rohan Kandwal Jun 28 '13 at 12:11
But I have had all set to android:backgroud="#0000" and I still saw a background when running the app. I checked that the images themselves do not have a background - just what has to be seen in each frame. – marienke Jun 29 '13 at 06:27
@Enke can you post any screenshot? – Rohan Kandwal Jul 01 '13 at 03:45
Please see the screenshot. For privacy purposes I had to change the actual content of the image, but the just of it is there – marienke Jul 01 '13 at 11:26

Ben Kane · Answer 4 · 2013-07-02T20:02:48.790

0

Have you tried setting the background to transparent using an R.id.color of #0000 or #00000000 before you do the setBackgroundResource? In other words switch around your two background setting lines of code.

edited Jul 02 '13 at 20:02

answered Jul 02 '13 at 19:55

Ben Kane

9,331
6
36
58

Removing the background of a frame animation in Android

4 Answers4

Linked