CODEWITHSUNDEEP
androidandroid-layoutandroid-animation
Ann ann
Ann ann

Reputation: 21

android imageview with multiple image fade in fade out animation

its my first time to ask question here... im hoping that somebody could help me....

i want to animate multiple images that animates as fade in and fade out. i was able to animate one imageview but what i need is once the first imageview fade out, the second imageview must fade in and so on...

it should loop once the application is opened. thanks

here is how i call the animation in my java onCreate(),

   final ImageView image = (ImageView)findViewById(R.id.bsc);
   final Animation animationFadeIn = AnimationUtils.loadAnimation(this,     R.anim.fadein);
   image.startAnimation(animationFadeIn);
   final Animation animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fadeout);
image.startAnimation(animationFadeOut);

fade in.xml

      <?xml version="1.0" encoding="utf-8"?>
     <set xmlns:android="http://schemas.android.com/apk/res/android"
       android:interpolator="@android:anim/linear_interpolator">
      <alpha 
         android:fromAlpha="0.1" 
         android:toAlpha="1.0" 
         android:duration="2000" 
         />
    </set>

fade out.xml

     <?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
<alpha 
    android:fromAlpha="1.0" 
    android:toAlpha="0.1" 
    android:duration="2000" 
    />
 </set>

Upvotes: 1

Views: 8061

Answers (2)

user2754632
user2754632

Reputation:

In your Activity.xml layout create a new ImageView, please note I'm not using the attribute android:src="@drawable/...." in this ImageView , like this

    <ImageView 
        android:id="@+id/uno"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
       />

So you will have two imageViews in your Activity.xml finally

1.-Your first image (the original in your code)

<ImageView
    android:id="@+id/bsc"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:src="@drawable/your_first_image/>

2.-the new image without android:src attribute

 <ImageView 
        android:id="@+id/uno"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
       />

In your activity class onCreate() define the new image you want to use, of course you need to save this image in your drawable folder, and then set the image with its drawable using setImageResource() method, the code will be something like this;

ImageView nueva = null;
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         //....your code...
         nueva = (ImageView) findViewById(R.id.uno);
         //Here set the new image 
         nueva.setImageResource(R.drawable.your_new_image);
}

Now just need to add the animations, in onResume() method for example:

@Override
    protected void onResume() {
           super.onResume();
          //the imagen you are using in your code
           image.startAnimation(animationFadeOut);
           //the new image fadein
           nueva.startAnimation(animationFadeIn);


    }

Upvotes: 0

Pria
Pria

Reputation: 2853

Try using AnimationListener.

final ImageView image = (ImageView)findViewById(R.id.bsc);
final Animation animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.fadein);
final Animation animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fadeout);

AnimationListener animListener = new AnimationListener(){

        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
            }

        @Override
        public void onAnimationEnd(Animation animation) {
            image.setImageResource(R.drawable.hsc);
            image.startAnimation(animationFadeIn);
        }
    };
image.startAnimation(animationFadeOut);
animationFadeOut.setAnimationListener(animListener);

If you want to loop, then put another listener on animationFadeIn also. This will again start animationFadeOut. Pick images from an array and display.

Upvotes: 2

Related Questions