Share Image element transition display incorrect size

Question

I have a recycle view to show all photo thumbnail items. When click on item, I use transition for imageview in this item to Detail activity. The problem is that image source is gotten from internet by UIL. And sometime (not always) the images not reload correct size like this:

 // on view holder item click
  final Pair<View, String>[] pairs = TransitionHelper.createSafeTransitionParticipants(this, false,
                    new Pair<>(((ItemViewHolder) viewHolder).thumbnail, getString(R.string.TransitionName_Profile_Image)),
                    new Pair<>(((ItemViewHolder) viewHolder).tvName, getString(R.string.TransitionName_Profile_Name)));

  ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this, pairs);
  startActivityForResult(intent, requestCode, transitionActivityOptions.toBundle());

Detail activity

// try to post pone transition until UIL load finish
ActivityCompat.postponeEnterTransition(this);
getSupportFragmentManager().beginTransaction().replace(R.id.layoutContent, new DetailFragment()).commit();

Fragment Detail

ImageLoader.getInstance().displayImage(url, imageViewDetail, new ImageLoadingListener() {
                @Override
                public void onLoadingStarted(String imageUri, View view) {

                }

                @Override
                public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
                    finishAnimation();
                }

                @Override
                public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {

                    finishAnimation();
                }

                @Override
                public void onLoadingCancelled(String imageUri, View view) {
                    finishAnimation();
                }
            });


 private void finishAnimation(){
     ActivityCompat.startPostponedEnterTransition(getActivity());
     imageViewDetail.invalidate();
 }

fragment_detail.xml

 <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

     <ImageView
        android:transitionName="@string/TransitionName.Profile.Image"
        android:id="@+id/imageViewDetail"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"/>
</FrameLayout>

I even wait views are laid out before load image but still not work:

imageViewDetail.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                // code load image from UIL
                return false;
            }
        });

Is there any way to avoid this issue?

Answer 1

this xml can handle diferent image size

 <ScrollView
        android:id="@+id/vScroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="51dp"
        android:scrollbars="none" >

        <HorizontalScrollView
            android:id="@+id/hScroll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scrollbars="none" 
            android:layout_gravity="center">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <ImageView
                    android:id="@+id/imgFullscreen"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:scaleType="fitXY" />
            </LinearLayout>
        </HorizontalScrollView>
    </ScrollView>

in java

fullImageView = (ImageView) findViewById(R.id.imgFullscreen);
selectedPhoto = (FeedItem) i.getSerializableExtra(TAG_SEL_IMAGE);
        zoom = 1;

        if (selectedPhoto != null) {
            fetchFullResolutionImage();
        } else {
            Toast.makeText(getApplicationContext(),
                    getString(R.string.msg_unknown_error), Toast.LENGTH_SHORT)
                    .show();
        }



private void fetchFullResolutionImage() {
    try {
        final URL url = new URL(selectedPhoto.getImge());       
        new Thread(new Runnable() {

            @Override
            public void run() {
                try {
                    Bitmap bmp = BitmapFactory.decodeStream(url
                            .openStream());
                    if (bmp != null)
                        setImage(bmp);
                    else {
                        showToast("Error fetching image!");
                    }
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }).start();
    } catch (IOException e) {
        e.printStackTrace();
    }

}
private void setImage(final Bitmap bmp) {
        runOnUiThread(new Runnable() {
            public void run() {
                fullImageView.setImageBitmap(bmp);
                adjustImageAspect(selectedPhoto.getWidth(),
                        selectedPhoto.getHeight());
            }
        });
    }
private void adjustImageAspect(int bWidth, int bHeight) {
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        if (bWidth == 0 || bHeight == 0)
            return;
        int swidth;

        if (android.os.Build.VERSION.SDK_INT >= 13) {
            Display display = getWindowManager().getDefaultDisplay();
            Point size = new Point();
            display.getSize(size);
            swidth = size.x;
        } else {
            Display display = getWindowManager().getDefaultDisplay();
            swidth = display.getWidth();
        }

        int new_height = 0;
        new_height = swidth * bHeight / bWidth;
        params.width = swidth;
        params.height = new_height;
        saveW = swidth;
        saveH = new_height;
        fullImageView.setLayoutParams(params);
    }