Android - Crossfade multiple images in an ImageView

Question

I am working on an application which needs image cross-fading between multiple images,

What I have: an ImageView and 50 drawables (.png) which I will download from the cloud

What I want: 50 drawable should crossfade (fade in and out) sequentially between an interval of some seconds

What I have tried: Based on some answers here on stackoverflow, I tried the TransitionDrawable technique, but I could only crossfade between 2 images and not more and that to with touching.

the video I referred to : https://www.youtube.com/watch?v=atH3o2uh_94

score 10 · Answer 1 · answered Aug 15 '13 at 09:31

A custom view to do that:

public class FadeView extends FrameLayout {
    private long mFadeDelay = 1000;
    private ImageView mFirst;
    private ImageView mSecond;
    private boolean mFirstShowing;

    public FadeView(Context context) {
        super(context);
        init(context);
    }

    public FadeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public FadeView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }

    private void init(Context c){
        mFirst = new ImageView(c);
        mSecond = new ImageView(c);

        mFirst.setAlpha(1.0f);
        mSecond.setAlpha(0.0f);

        mFirstShowing = true;

        addView(mFirst);
        addView(mSecond);
    }

    public void setFadeDelay(long fadeDelay) {
        mFadeDelay = fadeDelay;
    }

    public void ShowImage(Drawable d){
        if(mFirstShowing){
            mSecond.setImageDrawable(d);
            mSecond.animate().alpha(1.0f).setDuration(mFadeDelay);
            mFirst.animate().alpha(0.0f).setDuration(mFadeDelay);
        }else {
            mFirst.setImageDrawable(d);
            mSecond.animate().alpha(0.0f).setDuration(mFadeDelay);
            mFirst.animate().alpha(1.0f).setDuration(mFadeDelay);
        }

        mFirstShowing = !mFirstShowing;
    }
}

Usage:

public class test extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        final FadeView fw = new FadeView(this);
        setContentView(fw);

        fw.setOnClickListener(new View.OnClickListener() {
            Drawable d1 = getResources().getDrawable(android.R.drawable.ic_dialog_alert);
            Drawable d2 = getResources().getDrawable(android.R.drawable.ic_dialog_info);
            boolean flag;

            @Override
            public void onClick(View view) {
                if(flag){
                    fw.ShowImage(d1);
                }else {
                    fw.ShowImage(d2);
                }
                flag = !flag;
            }
        });
    }


}

I select your answer as correct answer. But I think that it is necessary to indicate that the ShowImage action must be executed in the UI Thread. So, It would be nice that you fix the code, and passing an Activity as parameter or whatever. do the animation call with something like: public void showImage(final Drawable d){ mActivity.runOnUiThread(new Runnable() { @Override public void run() { if(mFirstShowing){ ... }else { ... } } }); } — Anibal Itriago, Oct 09 '17 at 22:06
@AnibalItriago Any code that interacts with View types must be run on the main thread. View class and its descendants do not do this handling internally, rather, force the user to call on the appropriate thread. — S.D., Oct 10 '17 at 08:44

score -1 · Answer 2 · answered Aug 15 '13 at 09:14

-1

then create your custom Drawable that draws two Drawables with changing alpha values, of course you will need to add the support for exchanging Drawables when you need to support multiple ones

answered Aug 15 '13 at 09:14

pskink

23,874
6
66
77

Android - Crossfade multiple images in an ImageView

2 Answers2

Linked