How to display imageview slide out animation with another imageview beneath it?

Question

I'm trying to figure out the best approach to displaying an imageview on top of another and with the slide of the finger, the top imageview will slide off the screen. Think of a deck of cards: As you use your finger to slide the top card off the deck, the card below it becomes more and more visible.

I have created a slide in and out animation before using an ImageSwitcher. But the way that worked was as one image is sliding out to the right of the screen another was sliding in to the right from the left (which is not what I want for this case). So, I thought about having two imageviews (one on top of the other) and when the top is moved off the screen the bottom one becomes more visible and looks as if it were below the top imageview. But the problem is I have a lot of images to do this with so, if I did this way, I would need to put the top imageview below the bottom one once it left the screen.

So, to clear up what I'm asking, what is the best way to approach displaying two imageviews, one on top of the other (Z-axis), that when the user slides their finger across the screen the top imageview will slide off the screen leaving the bottom imageview visible?

Any advice, ideas, or help will be greatly appreciated!

Answer 1

After some experimenting, I finally came up with my solution. Though, I still need to tweak the animations to get the full desired effect. I first looked at using a LayerDrawable because this would align images against each other according to the z-axis. However, I could not come up with a way to animate just one layer at a time. So, to solve my problem I used a FrameLayout.

FrameLayouts are good for ordering things on the z-axis (they go on top of each other in the order you place them in the XML). However, they get complicated when trying to place views in specific areas of the screen. First, I made my layout XML:

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    <ImageView 
        android:id="@+id/image_below"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" /> 
    <ImageView
        android:id="@+id/image_above"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    </FrameLayout>

Then, of course, in the Activity I set the content view and declared and instantiated the imageview objects:

setContentView(R.layout.game_layout);
ImageView imageOne = (ImageView)findViewById(R.id.image_above);
ImageView imageTwo = (ImageView)findViewById(R.id.image_below);

Then, I created the animation:

Animation slideOutRight = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);

Now that the animation is created I set an AnimationListener to it. This way I can tell when the animation was completed:

slideOutRight.setAnimationListener(new AnimationListener(){
    @Override
        public void onAnimationEnd(Animation arg0) {
            imageTwo.bringToFront();

        }

        @Override
        public void onAnimationRepeat(Animation arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationStart(Animation arg0) {
            // TODO Auto-generated method stub

        }

});

If you noticed in the above code in the onAnimationEnd method I placed imageTwo.bringToFront(); That way when the top imageview slides off the screen it won't be visible anymore (if I didn't use that method, the top imageview would reappear in its orignal place, over the other imageview, once its animation were complete).

Finally, all is left to do is to set the images of the imageviews and start the animation when needed:

imageOne.setImageDrawable(getResources().getDrawable(R.drawable.YOUR_DRAWABLE_ONE);
imageTwo.setImageDrawable(getResources().getDrawable(R.drawable.YOUR_DRAWABLE_TWO);
imageOne.startAnimation(slideOutRight);

I hope this proves to be useful for anyone else who may face the same problem.