Making a smooth fade out for imageview in android

denza picture denza · Dec 26, 2013 · Viewed 24.6k times · Source

I managed to make the imageView dissapear after 10 seconds(a tutorial image on my mainActivity). But i want to make a smooth fade out because like this it doesn`t look good, can anyone refer me to any good tutorial

     img=(ImageView)findViewById(R.id.ImageTutorial);
    if(getIntent()!=null)
    {

        Bundle extras = getIntent().getExtras();
        String TutorialDemo=extras !=null? extras.getString("TutorialDemo"):"false";

        if(TutorialDemo.equals("true"))
        {
            Runnable mRunnable;
            Handler mHandler=new Handler();

            mRunnable=new Runnable() {

                        @Override
                        public void run() {

                            img.setVisibility(View.GONE); //This will remove the View. and free s the space occupied by the View    
                        }
                    };
                    mHandler.postDelayed(mRunnable,10*900);
        }
        else
        {
            img.setVisibility(View.GONE);
        }
         }

here is the image view xml

  <?xml version="1.0" encoding="utf-8"?>
  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
 android:layout_height="match_parent" 
 android:id="@+id/fullview"
>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    android:orientation="vertical" >

      .
      .
      .
      .

    <ImageView
        android:contentDescription="tutorial"
        android:id="@+id/ImageTutorial"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/tutorial"
        android:layout_marginTop="40dp"
        android:gravity="center"
        />

</LinearLayout>

Answer

Const picture Const · Dec 26, 2013

Replace img.setVisibility(View.GONE) in your code with a call to fadeOutAndHideImage(img) which is defined like this:

  private void fadeOutAndHideImage(final ImageView img)
  {
    Animation fadeOut = new AlphaAnimation(1, 0);
    fadeOut.setInterpolator(new AccelerateInterpolator());
    fadeOut.setDuration(1000);

    fadeOut.setAnimationListener(new AnimationListener()
    {
            public void onAnimationEnd(Animation animation) 
            {
                  img.setVisibility(View.GONE);
            }
            public void onAnimationRepeat(Animation animation) {}
            public void onAnimationStart(Animation animation) {}
    });

    img.startAnimation(fadeOut);
}

It will apply the fade out animation first, then will hide the image view.