How to make an ImageView overlay another View and hide it after a certain period of time?

Question

I'm making a very simple Andriod app and I was wondering if I could get some help with my app.

I would like to show an ImageView over the full ListView (including the action bar) for 3 seconds, and then remove the ImageView (or hide it, anything), to go back to the list view.

How can this be done? I have tried a few things but it either breaks my code or doesn't show anything at all.

Thanks in advance everyone - let me know if you need any further explanation.

EDIT: As per the question below, I'd like the ImageView to be shown as soon as the ListView is shown, for 3 seconds, then disappear.

Answer 1

Allright. What you want is actually quite easy.

Simply create a RelativeLayout that contains a ListView and an ImageView above it. Then inside your onCreate(...) method, you use a Handler and set the Visibility of the ImageView to GONE after 3 seconds.

Here is the layout.xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >
    </ListView>

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:scaleType="fitXY"
        android:src="@drawable/your_image" />

</RelativeLayout>

And inside the onCreate(...) method:

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

    final ImageView iv = (ImageView) findViewById(R.id.imageView1);

    Handler h = new Handler();
    h.postDelayed(new Runnable() {

        @Override
        public void run() {
            // EITHER HIDE IT IMMEDIATELY
            iv.setVisibility(View.GONE);

            // OR HIDE IT USING ANIMATION
            hideImageAnimated(iv);

            // DONT use both lines at the same time :)
        }
    }, 3000); // 3 seconds
}  

In order to make things a bit smoother, you could use an AlphaAnimation on your ImageView:

public void hideImageAnimated(final ImageView iv) {

    Animation alpha = new AlphaAnimation(1.0f, 0.0f);
    alpha.setDuration(1000); // whatever duration you want

    // add AnimationListener
    alpha.setAnimationListener(new AnimationListener(){

        @Override
        public void onAnimationEnd(Animation arg0) {
            iv.setVisibility(View.GONE);
        }

        @Override
        public void onAnimationRepeat(Animation arg0) { }

        @Override
        public void onAnimationStart(Animation arg0) { }

    });

    iv.startAnimation(alpha);
}