Animation on changing ImageBitmap of ImageButton

Question

Let's say I have an ImageButton btn. I have two different Bitmap, bmp1 and bmp2. By default, btn displays bmp1, like this:

btn.setImageBitmap(bmp1);

Can I somehow make an animation, which crossfades bmp1 and bmp2, when calling the following:

btn.setImageBitmap(bmp2);

So the question is, is it possible - if yes, how - to animate the changing of bitmaps on ImageButtons?

Answer 1

The way I see it, there are two main ways to implement this functionality. Note that there may be other methods that will make this happen exactly as you are describing, but these would be my approaches.

First Approach: Leveraging the onAnimationEnd() Callback

Here, you would want to essentially fade out the first ImageButton, change the resource in the onAnimationEnd() callback, and then fade it back in. To do this, you would have to implement the below code.

1. Create an Animation resource in XML that would be used to fade the View in:

   <!-- Filename: fadein.xml -->
   <set xmlns:android="http://schemas.android.com/apk/res/android"> 
   <!-- Note that you might want to change the duration here-->
   <alpha 
       android:fromAlpha="0.0" 
       android:toAlpha="1.0"  
       android:duration="250"/> 
   </set>   
   

2. Create an Animation resource in XML that would be used to fade the View out:

   <!-- Filename: fadeout.xml -->
   <set xmlns:android="http://schemas.android.com/apk/res/android"> 
   <!-- Note that you might want to change the duration here-->
   <alpha 
       android:fromAlpha="1.0" 
       android:toAlpha="0.0"  
       android:duration="250"/> 
   </set>
   

3. Load the fade out and fade in Animations in your code:

   // Obtain a reference to the Activity Context
   Context context = getContext();
   
   // Create the Animation objects.
   Animation outAnimation = AnimationUtils.loadAnimation(context, R.anim.fadeout);
   Animation inAnimation = AnimationUtils.loadAnimation(context, R.anim.fadein);
   

4. Assign a new AnimationListener to this Animation, and build it out as follows:

   outAnimation.setAnimationListener(new AnimationListener(){
   
       // Other callback methods omitted for clarity.
   
       public void onAnimationEnd(Animation animation){
   
           // Modify the resource of the ImageButton
           yourImageButton.setImageResource(R.drawable.[your_second_image]);
   
           // Create the new Animation to apply to the ImageButton.
           yourImageButton.startAnimation(inAnimation);                                           
       }
   }
   

5. Assign the Animation to the ImageButton, and start the first Animation:

   yourImageButton.startAnimation(outAnimation);
   

6. Then, if you wish to animate back to the previous image, you would simply do the same but in the reverse order.

Second Approach: Overlay a Second ImageButton

For this approach, you would simply assign two ImageButtons to the same coordinates on the screen, and with the same width. Then, you would fade out the first ImageButton and fade in the second one after the first Animation ended (much like the example above).

---

I hope that this answer aligns with your expectations. My apologies if there are any code errors, as I am doing this without an editor at the moment. Please let me know if you would like any additional clarification!