How to fade out and in between two images?

Question

Okay a little help here, so I have two images loading in my splash screen. The first image opens (starting the splash screen) then the second image opens, once the second image closes the mainactivity starts. Now my question is how do I make my first image fade out, then fade in with my second image?

-Oh yes, and no cross fading -Just a complete fade out and in transition -Thanks in advance

-The splash.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:id="@+id/lin_lay"
android:gravity="center" >

<ImageView
android:contentDescription="@string/desc"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/spinning_wheel_image"
android:background="@drawable/splashscreen1" />
</LinearLayout>

The mainanim.xml

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item android:drawable="@drawable/splashscreen1" android:duration="2500" />
<item android:drawable="@drawable/splashscreen2" android:duration="4000" />
</animation-list>

The Splash.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.splash);
    ourSong = MediaPlayer.create(Splash.this, R.raw.splashsound);
    ourSong.start();
    Thread timer = new Thread(){
        public void run(){
            try{
                sleep(10500);
            } catch (InterruptedException e){
                e.printStackTrace();
            }finally{
                Intent openStartingPoint = new Intent("com.theapplication.app.STARTINGPOINT");
                startActivity(openStartingPoint);

            }
        }
    };
    timer.start();
}

@Override
public void setRequestedOrientation(int requestedOrientation) {
    // TODO Auto-generated method stub
    super.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

}

@Override
public void onWindowFocusChanged(boolean hasFocus) {
    // TODO Auto-generated method stub
    super.onWindowFocusChanged(hasFocus);
    ImageView mainimage = (ImageView)findViewById(R.id.spinning_wheel_image);
    mainimage.setBackgroundResource(R.anim.mainamin);
    mainanimation = (AnimationDrawable) mainimage.getBackground();
    mainanimation.start();

Answer 1

use ImageSwitcher instead of ImageView which support animations by it self. see this sample:

http://www.java2s.com/Code/Android/UI/UsingImageSwitcher.htm

you can add animation like this:

imageSwitcher.setInAnimation(fadeInAnimation);
imageSwitcher.setOutAnimation(fadeOutAnimation);

// my test:

  public class IntroActivity extends Activity implements ViewFactory {

        private static final String TAG = "IntroActivity";

        private final int[] images = { R.drawable.img3, R.drawable.img2,
            R.drawable.img1, R.drawable.img4, R.drawable.img5, R.drawable.img6,
            R.drawable.img7, R.drawable.img8 };
    private int index = 0;
    private final int interval = 10000;
    private boolean isRunning = true;

    @Override
    public void onCreate(Bundle bundle) {
        super.onCreate(bundle);
        setContentView(R.layout.activity_intro);

        startAnimatedBackground();  

    }

    private void startAnimatedBackground() {
        Animation aniIn = AnimationUtils.loadAnimation(this,
                android.R.anim.fade_in);
        aniIn.setDuration(3000);
        Animation aniOut = AnimationUtils.loadAnimation(this,
                android.R.anim.fade_out);
        aniOut.setDuration(3000);

        final ImageSwitcher imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher1);
        imageSwitcher.setInAnimation(aniIn);
        imageSwitcher.setOutAnimation(aniOut);
        imageSwitcher.setFactory(this);
        imageSwitcher.setImageResource(images[index]);

        final Handler handler = new Handler();
        Runnable runnable = new Runnable() {

            @Override
            public void run() {
                if (isRunning) {
                    index++;
                    index = index % images.length;
                    Log.d("Intro Screen", "Change Image " + index);
                    imageSwitcher.setImageResource(images[index]);
                    handler.postDelayed(this, interval);
                }
            }
        };
        handler.postDelayed(runnable, interval);

    }

    @Override
    public View makeView() {
        ImageView imageView = new ImageView(this);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
                LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        return imageView;
    }

    @Override
    public void finish() {
        isRunning = false;
        super.finish();
    }
}

to start next activity, in @Override public void run() { if (isRunning) {

just check for the index, if the index equals to 1 then start the next activity and finish the current;

Answer 2

You can simply just fade out the image, change it, and then finally fade it in again.

imageView.animate()
       .alpha(0f)
       .setDuration(100)
       .setListener(new Animator.AnimatorListener() {
           @Override
           public void onAnimationStart(Animator animator) { }
           @Override
           public void onAnimationEnd(Animator animator) {
               imageView.setImageResource(R.drawable.newimg);
               imageView.animate().alpha(1).setDuration(200);
           }
           @Override
           public void onAnimationCancel(Animator animator) { }
           @Override
           public void onAnimationRepeat(Animator animator) { }
       });