Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android fade in and fade out with ImageView

I'm having some troubles with a slideshow I'm building.

I've created 2 animations in xml for fade in and fade out:

fadein.xml

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

fadeout.xml

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

What Im'trying to do, is to change images from an ImageView using the fade effect, so the currently displayed image will fade out, and another one will fade in. Considering that I have an image already set, I can fadeout this Image without problem, with this:

    Animation fadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.your_fade_in_anim);     imageView.startAnimation(fadeoutAnim); 

But then, I set the next image to be displayed:

    imageView.setImageBitmap(secondImage); 

It just shows up in the imageView, and when i set the animation it hides the image, the fade it in... Is there any way to fix that, I mean, when I do imageView.setImageBitmap(secondImage); command, the image do not shows up immediately, and only when the fade in animation is executed?

like image 594
IPValverde Avatar asked Jan 04 '12 00:01

IPValverde


People also ask

How do you fade pictures on android?

To use Fade In or Fade Out animations in our android applications, we need to define a new XML file with <alpha> tag like as shown below. For Fade In animation, we need to increase the alpha value from 0 to 1 like as shown below.

What is Alpha Animation in Android?

An animation that controls the alpha level of an object. Useful for fading things in and out. This animation ends up changing the alpha property of a Transformation.

What is the use of fade out option?

Definition and Usage The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect). Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: This method is often used together with the fadeIn() method.


1 Answers

I wanted to achieve the same goal as you, so I wrote the following method which does exactly that if you pass it an ImageView and a list of references to image drawables.

ImageView demoImage = (ImageView) findViewById(R.id.DemoImage); int imagesToShow[] = { R.drawable.image1, R.drawable.image2,R.drawable.image3 };  animate(demoImage, imagesToShow, 0,false);        private void animate(final ImageView imageView, final int images[], final int imageIndex, final boolean forever) {    //imageView <-- The View which displays the images   //images[] <-- Holds R references to the images to display   //imageIndex <-- index of the first image to show in images[]    //forever <-- If equals true then after the last image it starts all over again with the first image resulting in an infinite loop. You have been warned.      int fadeInDuration = 500; // Configure time values here     int timeBetween = 3000;     int fadeOutDuration = 1000;      imageView.setVisibility(View.INVISIBLE);    //Visible or invisible by default - this will apply when the animation ends     imageView.setImageResource(images[imageIndex]);      Animation fadeIn = new AlphaAnimation(0, 1);     fadeIn.setInterpolator(new DecelerateInterpolator()); // add this     fadeIn.setDuration(fadeInDuration);      Animation fadeOut = new AlphaAnimation(1, 0);     fadeOut.setInterpolator(new AccelerateInterpolator()); // and this     fadeOut.setStartOffset(fadeInDuration + timeBetween);     fadeOut.setDuration(fadeOutDuration);      AnimationSet animation = new AnimationSet(false); // change to false     animation.addAnimation(fadeIn);     animation.addAnimation(fadeOut);     animation.setRepeatCount(1);     imageView.setAnimation(animation);      animation.setAnimationListener(new AnimationListener() {         public void onAnimationEnd(Animation animation) {             if (images.length - 1 > imageIndex) {                 animate(imageView, images, imageIndex + 1,forever); //Calls itself until it gets to the end of the array             }             else {                 if (forever){                 animate(imageView, images, 0,forever);  //Calls itself to start the animation all over again in a loop if forever = true                 }             }         }         public void onAnimationRepeat(Animation animation) {             // TODO Auto-generated method stub         }         public void onAnimationStart(Animation animation) {             // TODO Auto-generated method stub         }     }); } 
like image 65
Crocodile Avatar answered Oct 03 '22 09:10

Crocodile