Question

I need help coming up with a way of executing the following sequence using some type of view or layout combination in Android:

I have 3 image objects… say object A, B, and C…

[all objects invisible and layered, one on top of the other… A/B/C, like in a RelativeLayout]–>[fade in object A]–>[display A for 200ms]–>[simultaneously fade out object A and fade in object B]–>[display object B for 200ms]–>[simultaneously fade out object B and fade in object C]–>[object C remains on the screen indefinitely]

I have tried every combination of Threads, AsyncTasks, Handlers, custom layouts, AnimationListeners, etc. but everything I’ve tried has failed.

If only the ViewSwitcher could take more than 2 views… Please help.

Ryan

Answer 1

The main thing about threads is that they are supposed to allow you to do parallel tasks, but the problem is that they don’t guarantee “how parallel” those tasks will actually look when they’re executed. Since the scheduler decides which thread to execute at any given time you are not guaranteed that your images will be properly faded in/out. While you can do this task with multithreaded code, I don’t think it’s a good candidate.

The best thing to do is to update both images (fade in/fade out) on every frame of the animation. A signals when it begins to fade out and B picks up that signal, then it starts to fade in. You will get a smooth transition since both A and B get updated on each frame, and you will not have any of the uncertainty of the threads. Do the same thing for B and C.

UPDATE: You caught me! 🙂
I thought you’d let me get away with just giving you the general information, but now that you have me cornered I had no choice but to google stuff :). OK, so the android library has some animation classes, the library also offers you a way in which you can actually perform frame-by-frame animation.

I’d give you a simple hack for this, but I’m sure there are better ways to do it:
The animations take several images which should be displayed over a certain duration, so all you have to do is alternate the images.

<!-- Animation frames are AfadeOut01.png to AfadeOut03.png and BfadeIn01.png to BfadeIn03.png files inside the res/drawable/ folder,  -->
 <animation-list android:id="selected" android:oneshot="true">
    <item android:drawable="@drawable/AfadeOut01" android:duration="50" />
    <item android:drawable="@drawable/BfadeIn01" android:duration="50" />
    <item android:drawable="@drawable/AfadeOut02" android:duration="50" />
    <item android:drawable="@drawable/BfadeIn02" android:duration="50" />
    <item android:drawable="@drawable/AfadeOut03" android:duration="50" />
    <item android:drawable="@drawable/BfadeIn03" android:duration="50" />
 </animation-list>

You have to load the xml animation and display the animation, do something like this:

 // Load the ImageView that will host the animation and
 // set its background to our AnimationDrawable XML resource.
 ImageView img = (ImageView)findViewById(/*resourceImageID e.g. AfadeOut03*/);
 img.setBackgroundResource(/*backgroundResource*/);

 // note that this loads the resource from an XML file, but
 // instead of getting the resource from file you can generate
 // it from a single image by performing the required modifications
 // of the image and storing them in a resource.

 // Get the background, which has been compiled to an AnimationDrawable object.
 AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();

 // Start the animation
 frameAnimation.setOneShot(true);// don't loop if not set in XML
 frameAnimation.start();

OK, so I know that was a dirty hack, but it should do what you want :). If this is too simple and uncool for you, then you could go the original route and try to figure out how to display your images frame by frame, etc.