Android: not displayed ImageView with UIL and TouchImageView

Question

I'm trying to implement load images from a URL with Universal Image Loader and zoom with TouchImageView Mike Ortiz. But when trying to view the image, black screen is displayed. I have checked that the URLs are correct. I if I see a TextView there...

What am I doing wrong?

ImagePagerActivity.java

public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    this.requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_fullscreen_view);

    Bundle bundle = getIntent().getExtras();
    assert bundle != null;

    String[] imageUrls = bundle.getStringArray("urls");
    int pagerPosition = bundle.getInt("pos", 0);
    tipo = bundle.getString("tipo");
    monumento = bundle.getString("monumento");
    num = bundle.getInt("num");

    for(int i = 0; i < imageUrls.length; i++) {
        // URLS with data
        Toast.makeText(this, "URL = " + imageUrls[i], 0).show();
    }

    if (savedInstanceState != null) {
        pagerPosition = savedInstanceState.getInt(STATE_POSITION);
    }

    options = new DisplayImageOptions.Builder()
        .showImageForEmptyUri(R.drawable.imagen)
        .showImageOnFail(R.drawable.imagen)
        .resetViewBeforeLoading(true)
        .cacheOnDisc(true)
        .imageScaleType(ImageScaleType.EXACTLY)
        .bitmapConfig(Bitmap.Config.RGB_565)
        .considerExifParams(true)
        .displayer(new FadeInBitmapDisplayer(300))
        .build();

    pager = (ExtendedViewPager) findViewById(R.id.pager);
    pager.setAdapter(new ImagePagerAdapter(imageUrls));
    pager.setCurrentItem(pagerPosition);
}

@Override
public void onSaveInstanceState(Bundle outState) {
    outState.putInt(STATE_POSITION, pager.getCurrentItem());
}

private class ImagePagerAdapter extends PagerAdapter {

    private String[] images;
    private LayoutInflater inflater;

    ImagePagerAdapter(String[] images) {

        this.images = images;
        inflater = getLayoutInflater();
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }

    @Override
    public int getCount() {
        return images.length;
    }

    @Override
    public Object instantiateItem(ViewGroup view, int position) {

        final View imageLayout = inflater.inflate(R.layout.ampliar_imagen, view, false);
        assert imageLayout != null;

        imageView = (TouchImageView) imageLayout.findViewById(R.id.imagenFullScreen);

        infoImagen = (LinearLayout)imageLayout.findViewById(R.id.textoInfoImagen);
        info = (TextView) imageLayout.findViewById(R.id.textoInfoImagenDesc);

        cargarInfo(position, images);

        android.graphics.PorterDuff.Mode.MULTIPLY);

        imageView.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                LinearLayout infoImagen = (LinearLayout)imageLayout.findViewById(R.id.textoInfoImagen);

                if(infoImagen.getVisibility() == View.GONE) {
                    infoImagen.setVisibility(View.VISIBLE);
                } else {
                    infoImagen.setVisibility(View.GONE);
                }
            }
        });

        imageLoader.displayImage(images[position], imageView, options, new SimpleImageLoadingListener() {

            @Override
            public void onLoadingStarted(String imageUri, View view) {
                spinner.setVisibility(View.VISIBLE);
            }

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

                spinner.setVisibility(View.GONE);
            }

            @Override
            public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                spinner.setVisibility(View.GONE);
            }
        });

        view.addView(imageLayout, 0);
        return imageLayout;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view.equals(object);
    }

    @Override
    public void restoreState(Parcelable state, ClassLoader loader) {
    }

    @Override
    public Parcelable saveState() {
        return null;
    }
}

private void cargarInfo(int position, String[] images) {

    if(tipo.equals("fotos")) {

        info.setText((position + 1) + " de " + images.length +
                "\n" + InfoImagenes.devolverInfoFotos(monumento, position, num, ImagePagerActivity.this));
    }

    else if(tipo.equals("planos")) {

        info.setText((position + 1) + " de " + images.length +
                "\n" + InfoImagenes.devolverInfoPlanos(position, num, ImagePagerActivity.this));
    }
}

activity_full_screen.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

 <imagenes.ExtendedViewPager 
    android:id="@+id/pager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

</LinearLayout>

ampliar_imagen.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/negro" >

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

    <imagenes.TouchImageView
        android:id="@+id/imagenFullScreen"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:adjustViewBounds="true" />

    <ProgressBar
        android:id="@+id/cargandoFoto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="gone" />
</FrameLayout>

<LinearLayout
    android:id="@+id/textoInfoImagen"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@color/grisTransparente"
    android:orientation="horizontal"
    android:visibility="visible" >

    <TextView
        android:id="@+id/textoInfoImagenDesc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:paddingBottom="3dp"
        android:paddingTop="3dp"
        android:textColor="@color/blanco"
        android:textSize="13sp" />
</LinearLayout>

</RelativeLayout>

EDIT

If I change TouchImageView by ImageView it display the image

Answer 1

Same problem I was facing. I have solved the problem by setting zoom 0.99f as follows:- imageView.setZoom(0.99f);

where imageView is reference of TouchImageView. I was facing this problem in ImageLoader, so I just put the above line in onLoadingComplete method. You can also put the same line before loading the image url to glide or ImageLoader but better to put it after loading complete. Enjoy :)

Answer 2

I've had the same issue. I've temporary solved the problem by resetting the zoom.

touchImage.setZoom(1);

inside onLoadComplete()

Of course touchImage is your TouchImageView object.

Answer 3

I also met this problem, I found it is related with ProgressBar's visibility, and the following code can be used to solve it.

• In onLoadingStarted(), add view.setVisibility(View.GONE)
• In onLoadingComplete(), add view.setVisibility(View.VISIBLE)

code:

imageLoader.displayImage(imageUri.toString(), 
                     mPictureView,
                     options,
                     new SimpleImageLoadingListener()
{
@Override
public void onLoadingStarted(String imageUri, View view) 
{
    spinner.setVisibility(View.VISIBLE);
    view.setVisibility(View.GONE);
}

@Override
public void onLoadingFailed(String imageUri, View view, FailReason failReason) 
{
    spinner.setVisibility(View.GONE);
}

@Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage)
{
    spinner.setVisibility(View.GONE);
    view.setVisibility(View.VISIBLE);
}
});

Answer 4

if set imageView bitmap async , i found matrix is {0,0,0}{0,0,0}{0,0,1} ,so image cannot be showed.. when imageView that have a null drawable finished measure at first time, TouchImageView.viewWidthand TouchImageView.viewHeight is 0 .but when you setImageBitmap using a !null bitmap,the imageView cannot be measured again.TouchImageView.viewWidth is 0 at this time.see following code.

    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    Drawable drawable = getDrawable();
    if (drawable == null || drawable.getIntrinsicWidth() == 0 || drawable.getIntrinsicHeight() == 0)      {
        setMeasuredDimension(0, 0);
        return;
    }

    int drawableWidth = drawable.getIntrinsicWidth();
    int drawableHeight = drawable.getIntrinsicHeight();
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    viewWidth = setViewSize(widthMode, widthSize, drawableWidth);
    viewHeight = setViewSize(heightMode, heightSize, drawableHeight);

    //
    // Set view dimensions
    //
    setMeasuredDimension(viewWidth, viewHeight);

    //
    // Fit content within view
    //
    fitImageToView();
}

if you load image from url or load image from local but use async mode by thread,you can change TouchImageView.OnMeasure as follows..

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    Drawable drawable = getDrawable();
//        if (drawable == null || drawable.getIntrinsicWidth() == 0 || drawable.getIntrinsicHeight()    == 0) {
////            setMeasuredDimension(0, 0);
//          
//          super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//          return;
//        }

    int drawableWidth = drawable == null ? 0 : drawable.getIntrinsicWidth();
    int drawableHeight =  drawable == null ? 0 : drawable.getIntrinsicHeight();
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    viewWidth = setViewSize(widthMode, widthSize, drawableWidth);
    viewHeight = setViewSize(heightMode, heightSize, drawableHeight);

    //
    // Set view dimensions
    //
    setMeasuredDimension(viewWidth, viewHeight);

    //
    // Fit content within view
    //
    fitImageToView();
}