How to make TransitionDrawable animation run continuously in Android?

Question

I'm trying to make an animated logo. It consists of two static images.

I would like to achieve a fading effect.

I did this using TransitionDrawable, set crossFadeEnabled and everything looks good.

The fact is that I need to run in circles. How can this be achieved?

<transition xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/image_expand"> <item android:drawable="@drawable/image_collapse"> </transition> Resources res = mContext.getResources(); TransitionDrawable transition = (TransitionDrawable) res.getDrawable(R.drawable.expand_collapse); ImageView image = (ImageView) findViewById(R.id.toggle_image); image.setImageDrawable(transition); 

This code is from google which works fine. The most important thing is that you need to work under Android 1.6.

Answer 1

I managed to get an accessible transition to work through the handler method, which changes direction after the transition from drawable1 to drawable2. In my XML:

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

Selectable Gradients:

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:topLeftRadius = "10dp" android:topRightRadius="10dp" android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp"/> <gradient android:startColor="#d200ff" android:centerColor="#4e00ff" android:endColor="#006cff"/> </shape> 

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <size android:width="900dp" android:height="500dp"/> <corners android:topLeftRadius = "10dp" android:topRightRadius="10dp" android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp"/> <gradient android:startColor="#006cff" android:centerColor="#ff6600" android:endColor="#d200ff"/> </shape> 

In my initialization code:

 trans = (TransitionDrawable) getResources().getDrawable(R.drawable.transition); trans.setCrossFadeEnabled(true); backgroundimage.setImageDrawable(trans); .... handlechange(); 

And the most important bit in the handler code; check the flag that runs globally. I got this on Gingerbread and Kitkat;

 void handlechange1() { Handler hand = new Handler(); hand.postDelayed(new Runnable() { @Override public void run() { change(); } private void change() { if (flag) { trans.startTransition(8000); flag = false; } else { trans.reverseTransition(8000); flag = true; } handlechange1(); } }, 8000); } 

Answer 2

There is really no built-in way to do this. TransitionDrawable does not have an endless loop animation function. The simplest recommendation would be to use Animation (alpha, scale, translation, etc.) on a View containing only one of your Drawable , if you can.

Pretty easy to hack would be to add a Handler and callback to your custom View holding your TransitionDrawable . When a View is created, the Handler can be set to your transition interval. View also implements Handler.Callback and inside its handleMessage(Message) method, it will call reverseTransition(int) on your TransitionDrawable .

The following is an example:

 public class myView extends View implements Handler.Callback { private Handler mHandler = new Handler(this); private int mDelay = 1000; // Delay in milliseconds. private Runnable mEvent = new Runnable() { public void run() { mHandler.removeCallbacks(mEvent); mHandler.postDelayed(mEvent, mDelay); Message message = mHandler.obtainMessage(); mHandler.sendMessage(message); } }; public View(Context context) { super(context); // Set your background TransitionDrawable. setBackgroundDrawable(...); } public handleMessage(Message message) { TransitionDrawable drawable = (TransitionDrawable) getBackgroundDrawable(); drawable.reverseTransition(mDelay); } public void start() { mHandler.post(mEvent); } public void stop() { mHandler.removeCallbacks(mEvent); } } 

Call start() to start the continuous transition, stop() to stop it. This is a bit like creating your own animation, but it works as a last resort.