Crossfading using TransitionDrawable not working on android

Question

I have two Images that I want to cross fade. Initially they both use imageview. I then use .getDrawable() to get the drawable of the images.

This is the code I used

Drawable backgrounds[] = new Drawable[2];
backgrounds[0] = BackgroundImage.getDrawable();
backgrounds[1] = BackgroundImageBlurred.getDrawable();

TransitionDrawable crossfader = new TransitionDrawable(backgrounds);
crossfader.startTransition(3000);

It only shows the image on the first array element, which it shows anyway since both images were set to visible in the XML.

The transition doesn't start

Any help would be appreciated :)

Answer 1

Here's an example IF you have 2 drawables and want to animate their transition in some ImageView:

package com.example.app;

import android.app.Activity;
import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;
import android.widget.ImageView;

 class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Drawable backgrounds[] = new Drawable[2];
        Resources res = getResources();
        backgrounds[0] = res.getDrawable(android.R.drawable.btn_star_big_on);
        backgrounds[1] = res.getDrawable(android.R.drawable.btn_star_big_off);

        TransitionDrawable crossfader = new TransitionDrawable(backgrounds);

        ImageView image = (ImageView)findViewById(R.id.image);
        image.setImageDrawable(crossfader);

        crossfader.startTransition(3000);

    }
}

Then if you want to transition back to the original image you can call

// Make sure the transition occurred
crossfader.startTransition(0);
// Reverse transition
crossfader.reverseTransition(3000);

Please correct me if I misunderstood your question.

Answer 2

You should use setCrossFadeEnabled propery

final TransitionDrawable briefcaseTransition = (TransitionDrawable) briefcase.getDrawable();
briefcaseTransition.setCrossFadeEnabled(true);
briefcaseTransition.startTransition(500);

Answer 3

Maybe you like this one
- res/drawable/transition.xml:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/on" />
    <item android:drawable="@drawable/off" />
</transition>

ImageView:

<ImageButton android:id="@+id/button"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/transition" /> 

Javacode:

ImageButton button = (ImageButton) findViewById(R.id.button);
TransitionDrawable drawable = (TransitionDrawable) button.getDrawable();
drawable.startTransition(500);

If it is helpfull, you can see Google-Dev:

http://developer.android.com/guide/topics/resources/drawable-resource.html

Answer 4

If you are using Vectors, your VectorDrawables won't be cross-faded in the TransitionDrawable.

You'll need to convert them into BitmapDrawables first.

See my answer here https://stackoverflow.com/a/54583929/114549 for an example

Answer 5

A TransitionDrawable is just a special kind of drawable. It is not drawn by itself, it must be placed somewhere (e.g. on a View background, on an ImageView, &c) to be displayed.

If you're trying to crossfade two images, you have two possible approaches:

1. Use a single ImageView with a TransitionDrawable.
2. Use two ImageViews and crossfade them with animations.