CODEWITHSUNDEEP
androidimageviewtransitiondrawable
AlexKost
AlexKost

Reputation: 2972

Is there any CircleImageView alternative with TransitionAnimation support?

I have ImageView. After loading bitmap in onPostExecute I call setImageDrawable to fill imageView ( I use CircleImageView) with image. But TransitionDrawable shows only 1st image and no transaction executed. How do I get this working? Thanks in advance.

private void setImageDrawable(ImageView imageView, Bitmap bitmap) {
            if (mFadeInBitmap) {
                BitmapDrawable drawable = null, placeholder = null;
                if (bitmap != null) {
                    drawable = new BitmapDrawable(mResources, bitmap);
                    placeholder = new BitmapDrawable(mResources, mPlaceHolderBitmap);
                }
                final TransitionDrawable td =
                            new TransitionDrawable(new Drawable[] {
                                placeholder,
                                drawable,
                        });

            imageView.setImageDrawable(td);
            td.startTransition(200);
        } else {
            imageView.setImageBitmap(bitmap);
        }
    }

UPDATE: I've found solution why it doesn't work for me in CircleImageView documentation: "Using a TransitionDrawable with CircleImageView doesn't work properly and leads to messed up images."(https://github.com/hdodenhof/CircleImageView).

So can somebody suggest me the way I can get circle image with fade in animation working properly?

UPDATE 2: Workaround that I've found to get smooth transition between two circle images is to fadeout the first one and then fadein the second one with Animation and post delayed runnable. Here's code example.

fade_out.xml

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

fade_in.xml almost identical except you change fromAlpha and toAlpha by places. After that apply these animations to your circle image view, like that:

 Animation anim = AnimationUtils.loadAnimation(mContext, R.anim.fade_out);
 imageView.startAnimation(anim);
 final Handler handler = new Handler();

 handler.postDelayed(new Runnable() {

     @Override
     public void run() {
         imageView.setImageBitmap(value);//changing to different image ,here you will set image that you have loaded
         Animation anim = AnimationUtils.loadAnimation(mContext, R.anim.fade_in);
         imageView.startAnimation(anim);
      }

  }, 100);

Hope it'll be helpful.

Upvotes: 4

Views: 542

Answers (1)

Mikhail
Mikhail

Reputation: 3746

I have tried the following code myself and can say that it works and transition is pretty much visible:

private void setImageDrawable(ImageView imageView) {
    Bitmap bitmap1 = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
    Bitmap bitmap2 = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
    new Canvas(bitmap1).drawRect(0, 0, 100, 100, mWhitePaint);
    new Canvas(bitmap2).drawRect(0, 0, 100, 100, mBlackPaint);

    BitmapDrawable drawable1 = new BitmapDrawable(getResources(), bitmap1);
    BitmapDrawable drawable2 = new BitmapDrawable(getResources(), bitmap2);
    TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[] {drawable1, drawable2});
    imageView.setImageDrawable(transitionDrawable);
    transitionDrawable.startTransition(3000);
}

Please, check that your bitmap is not null and it's different from mPlaceHolderBitmap (which also should not be null). Also try setting transition duration to 3 seconds, for example, because maybe 200ms is just too fast to see the transition itself.

Upvotes: 2

Related Questions