Android change background image with fade in/out animation

Question

I wrote code which can change background image random every 5 second.now i want to use fade in/out animation to change background image,but I do not know how I can use this animation.

This is a my source:

void handlechange() {

    Handler hand = new Handler();
    hand.postDelayed(new Runnable() {

        @Override
        public void run() {
            // TODO Auto-generated method stub

            // change image here
            change();

        }

        private void change() {
            // TODO Auto-generated method stub

            Random rand = new Random();

            int index = rand.nextInt(image_rundow.length);

            mapimg.setBackgroundResource(image_rundow[index]);

            handlechange();
        }
    }, 4000);

}

At the moment everything is OK. I can change background image random,but I don't know how can I use animation fade in/out.

If anyone knows solution please help me, thanks.

take a look at this: http://stackoverflow.com/questions/2614545/animate-change-of-view-background-color-in-android — Fenix, Jul 24 '14 at 16:38

score 24 · Accepted Answer · edited Jun 14 '19 at 05:12

You need to call these codes.

First, you have to make two xml files for fade in & out animation like this.

fade_in.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:fillAfter="true"
        android:duration="2000"
        />
</set>

fade_out.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:fillAfter="true"
        android:duration="2000"
        />
</set>

Second, you have to run animation of imageView like below and also you have to set AnimationListener to change fadeout when fadein finish.

Animation fadeOut = AnimationUtils.loadAnimation(YourActivity.this, R.anim.fade_out);
imageView.startAnimation(fadeOut);

fadeOut.setAnimationListener(new Animation.AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) {
      }
      @Override
      public void onAnimationEnd(Animation animation) {
          Animation fadeIn = AnimationUtils.loadAnimation(YourActivity.this, R.anim.fade_in);
          imageView.startAnimation(fadeIn);
      }
      @Override
      public void onAnimationRepeat(Animation animation) {
      }
});

worked like a charm. applied both fade in and fade out to my LinearLayout View. Had to change to 500 ms. 2000 is far too long. — apollosoftware.org, May 08 '15 at 18:41
This is not answering the real question. This is animation on `ImageView` (basically `View`) and not the `background` of a `View`. — Bugs Happen, Jan 24 '19 at 06:34
This [YouTube video](https://www.youtube.com/watch?v=bSgUn2rZiko) is the real answer — Bugs Happen, Jan 24 '19 at 06:40

akshay7692 · Answer 2 · 2016-11-18T16:04:41.397

For fade in animation , create new folder named 'anim' in your res folder and inside it, create 'fade_in.xml' with following code

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <alpha
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toAlpha="1.0" />

</set>

now to run this animation on your imageview, use following code in your activity

Animation anim = AnimationUtils.loadAnimation(YourActivity.this, R.anim.fade_in);
imageView.setAnimation(anim);
anim.start();

for fadeout animation, just swap values of android:fromAlpha and android:toAlpha

Hope this helps.

score 2 · Answer 3 · answered Dec 29 '14 at 21:30

You can use relativeLayout, and add one layer of background view which set both height and width match_parent. All other UI element should put on top of this view. In your code. Define fadeOut and fadeIn animation. Find that background view by id, then do this:

 xxxBackground.startAnimation(fadeOut);
 xxxBackground.setBackgroundResource(R.drawable.your_random_pic);
 xxxBackground.startAnimation(fadeIn);

You can use some interpolator to tune the performance.

Cabezas · Answer 4 · 2016-11-08T15:32:24.100

You need AnimationDrawable with animation.

First step AnimationDrawable

-Create a file /res/anim/anim_android.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false">
    <item android:drawable="@drawable/android_1"
          android:duration="100"/>
    <item android:drawable="@drawable/android_2"
          android:duration="100"/>
    <item android:drawable="@drawable/android_3"
          android:duration="100"/>
    <item android:drawable="@drawable/android_4"
          android:duration="100"/>
    <item android:drawable="@drawable/android_5"
          android:duration="100"/>
    <item android:drawable="@drawable/android_6"
          android:duration="100"/>
    <item android:drawable="@drawable/android_7"
          android:duration="100"/>
</animation-list>

-Add a ImageView with android:src="@anim/anim_android".

<ImageView
    android:id="@+id/myanimation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@anim/anim_android" />

Second step

-In your activity create AnimationDrawable and Animation

AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
            animationDrawable.setOneShot(true);
            animationDrawable.start();

    Animation animation = AnimationUtils.loadAnimation(YourActivity.this, android.R.anim.fade_in);

    imageView.setAnimation(animation);
        animation.start();
        animation.setAnimationListener(new Animation.AnimationListener() {
          @Override
          public void onAnimationStart(Animation animation) {
          }
          @Override
          public void onAnimationEnd(Animation animation) {
              Animation fadeOut = AnimationUtils.loadAnimation(YourActivity.this, android.R.anim.fade_out);
              imageView.startAnimation(fadeOut);
          }
          @Override
          public void onAnimationRepeat(Animation animation) {
          }
});

you don't need Handler.

score 1 · Answer 5 · answered Jan 24 '19 at 10:01

Answer by kimkevin animates a View (be it an ImageView, TextView etc.) and not a background of a View. Which means if you want to just highlight any View, you'll have to add another View behind it (lets call it backgroundView) and animate that backgroundView.

Use the following code for animating background of a view

val startColor = view.solidColor
val endColor = ContextCompat.getColor(context, R.color.your_color)

val colorAnim = ObjectAnimator.ofInt(view, "backgroundColor", startColor, endColor, startColor)
colorAnim.duration = 2000
colorAnim.setEvaluator(ArgbEvaluator())
colorAnim.start()

Android change background image with fade in/out animation

5 Answers5

Linked