Android TransitionDrawable with multiple items

Question

I want to create a Button in Android with a text, and a background image. The background image should crossfade every X time.

I have this working using a TransitionDrawable with 2 images.

But I can't get this to work with more than 2 images.

What I have :

In Java code I create a Button and set a background (which is a TransitionDrawable defined in XML). And I start the transition.

final Button b = new Button(getApplicationContext());
b.setTextColor(getResources().getColor(R.color.white));
b.setText("Some text");
b.setBackgroundDrawable(getResources().getDrawable(R.drawable.tile));
StateListDrawable background = (StateListDrawable) b.getBackground();
TransitionDrawable td = (TransitionDrawable) background.getCurrent();
td.startTransition(2000);

In XML I define in tile.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#449def" />
        </shape>
    </item>
    <item android:drawable="@drawable/transition">
        <shape>
            <solid
                android:color="#0000ff" />
        </shape>
    </item>
</selector> 

And finally a transition.xml

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android"     android:oneshot="false">
  <item android:drawable="@drawable/desert"/> 
  <item android:drawable="@drawable/hydrangeas" /> 
  <item android:drawable="@drawable/jellyfish" /> 
</transition> 

Now the effect is that when I start the app the desert image is shown. This image crossfades to the hydrangeas image as it should. But the jellyfish image is never shown.

In the doc for TransitionDrawables it is stated that you can specify more than 2 drawables but I can't get this to work.

I also tried this without any XML but in pure JAVA but this gave exactly the same problem :-(

Answer 1

You can do it by using a handler

mAnimateImage is your button

int DrawableImage[] = {R.drawable.back_red, R.drawable.back_green, R.drawable.back_purple};

final Handler handler = new Handler();
    final int[] i = {0};
    final int[] j = {1};
    handler.postDelayed(new Runnable() {
        @Override
        public void run() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Resources res = getApplicationContext().getResources();
                    TransitionDrawable out = new TransitionDrawable(new Drawable[]{res.getDrawable(DrawableImage[i[0]]), res.getDrawable(DrawableImage[j[0]])});
                    out.setCrossFadeEnabled(true);
                    mAnimateImage.setBackgroundDrawable(out);
                    out.startTransition(4000);
                    i[0]++;
                    j[0]++;
                    if (j[0] == DrawableImage.length) {
                        j[0] = 0;
                    }
                    if (i[0] == DrawableImage.length) {
                        i[0] = 0;
                    }
                    handler.postDelayed(this, 8000);
                }
            });
        }
    }, 0);

Answer 2

According to the official documentation, TransitionDrawable can only cross-fade among 2 layers, quoting from the official android reference.

An extension of LayerDrawables that is intended to cross-fade between the first and second layer. To start the transition, call startTransition(int). To display just the first layer, call resetTransition().

If you don't read it carefully, since it extends LayerDrawables, which can have multiple layers, one may expect that you could cross-fade from N layers. But it is very clear, startTransition shows the second layer, resetTransition shows the first.

I suggest you do your own implementation for multiple transitions. What I'd do is to have 2 images and animate them. You may need to set the drawables by hand, but it should be a quite simple piece of code.

Answer 3

in appendix operating time you can dynamically change pictures

Use td.setDrawableByLayerId(td.getId(1), drawable) on your TransitionDrawable

TransitionDrawable transitionDrawable = (TransitionDrawable) myImage
                            .getDrawable();
transitionDrawable.setDrawableByLayerId(transitionDrawable.getId(1), getResources()
                            .getDrawable(R.drawable.c));

Answer 4

You can only transition maximum two images with TransitionDrawable. To work with more than two images you can extend LayerDrawable and implement your own TransitionDrawable.

Here's the ready implementation of custom TransitionDrawable to work with more than two images.

You can see the complete sample along with the gif demo here on Github.

Answer 5

No need to use handler, it's more efficient + cleaner to use coroutines instead of a handler and as a bonus you can make this transition between as many drawables as you like:

    /**
     * Run multitransition animation on a view.
     *
     * @param drawableIds The drawables to load into the view, one after the other
     * @param delayBetweenTransitions the number of milliseconds to transition from one drawable to the next
     * @param viewToAnimate The view to animate.
     */
    fun runMultitransitionAnimation(@DrawableRes vararg drawableIds: Int, 
                                    delayBetweenTransitions : Int, 
                                    viewToAnimate : View) {
        CoroutineScope(Dispatchers.Main).launch(Dispatchers.Main.immediate) {
            val delay = SOME_INTEGER_MILLISECONDS
            for (i in 0 until drawableIds.size-1) {
                val nextTransition = TransitionDrawable(arrayOf(
                    context.getDrawable(drawableIds[i]),
                    context.getDrawable(drawableIds[i+1])))
                ))
                nextTransition.isCrossFadeEnabled = true
                viewToAnimate.background = nextTransition
                nextTransition.startTransition(delayBetweenTransitions)
                delay(delayBetweenTransitions*2)
            }
        }
    }

Answer 6

You'll need to just make a new TransitionDrawable per iteration.

This will step up through your index of all the images you add, you can have any number of images...

private Handler handler = new Handler();

private void startImageCrossfading(@IdRes int imageViewResId, @DrawableRes int... drawableIds) {

    Drawable[] bitmapDrawables = new Drawable[drawableIds.length];

    for (int i = 0; i < drawableIds.length; i++) {
        // if you are using Vectors cross fade won't work unless you do this! - See my answer at https://stackoverflow.com/a/54583929/114549
        // bitmapDrawables[i] = getBitmapDrawableFromVectorDrawable(this, drawableIds[i]);
        bitmapDrawables[i] = ContextCompat.getDrawable(this, drawableIds[i]);
    }

    final ImageView imageView = findViewById(imageViewResId);

    handler.postDelayed(new Runnable() {
        int index = 0;
        @Override
        public void run() {

            TransitionDrawable td = new TransitionDrawable(new Drawable[]{
                    bitmapDrawables[index % bitmapDrawables.length],
                    bitmapDrawables[++index % bitmapDrawables.length]
            });
            td.setCrossFadeEnabled(true);
            imageView.setImageDrawable(td);

            td.startTransition(500); // transitionDurationMillis
            handler.postDelayed(this, 3000);
        }
    }, 3000);

}

On pause you should clean up the handler

handler.removeCallbacksAndMessages(null);