Android: black screen to load image

Question

I am trying to implement in my app Universal Image Loader with TouchImageView (ViewPager with zoom in images). But I just get a black image on my screen when trying to load it.

ImagePagerActivity

ExtendedViewPager pager;
TouchImageView imageView;

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");

    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);

        info.setText("Image");

        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) {

                Modulo.toast(ImagePagerActivity.this, 
                        ImagePagerActivity.this, 
                        "Error al cargar la imagen", 
                        perfil.getColor(), 
                        R.drawable.iconoerrores, 
                        Toast.LENGTH_SHORT);

                spinner.setVisibility(View.GONE);
            }

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

        view.addView(imageLayout, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        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;
    }
}

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>

imagenfullscreen.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>

But if I comment imageLoader.displayImage... and I put

`int[] images2 = { R.drawable.bus_fondo };
imageView.setImageResource(images2[0]);`

It works fine.

Have you read http://stackoverflow.com/questions/15894242/black-background-on-image-loaded-with-univerisal-image-loader ? — shkschneider, Apr 29 '14 at 08:19
hay..... have u find out any solution...? regarding this issue — Alpan, Mar 04 '15 at 12:49

score 1 · Answer 1 · answered Jul 12 '18 at 13:15

Although it is not related to the question but if someone is looking for issue while loading image into TouchImageView using Glide which would show a black screen. I found a fix which works like this. Pass width and height in Glide override method and after setting bitmap call setzoom of TouchImageView with value 1.

Here is the complete code:

Glide.with('context')
                    .asBitmap()
                    .load('url')
                    .apply(new RequestOptions().override(1600, 1600)) //This is important 
                    .into(new BitmapImageViewTarget('imageview') {
                        @Override
                        public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
                            super.onResourceReady(resource, transition);
                            'imageview'.setImageBitmap(resource);
                            'imageview'.setZoom(1); //This is important
                        }
                    });

score 0 · Answer 2 · answered Apr 29 '14 at 08:31

0

Try this lib for loading pictures http://square.github.io/picasso/

answered Apr 29 '14 at 08:31

user1730007

211
1
3
13

I want to use TouchImageView – user3580822 Apr 29 '14 at 08:40

Serg Burlaka · Answer 3 · 2016-11-26T15:56:54.103

Because you create your loading picture from gallery in main UI thread! Just make it asynchronous. For example i had also black screen, when loaded picture, and my solving was to make asyn task:

     public static void onSelectFromGalleryResult(Intent data, Model model, IAddItemView mIVew) {
        mIVew.showProgressDialog();
        new AsynOperation(data,model, mIVew).execute();
    }


    private static class AsynOperation extends AsyncTask<Void, Void, Bitmap> {
        Intent data;
        Model model;
        IAddItemView mIVew;

        AsynOperation (Intent data, Model model,IAddItemView  mIVew){
            this.data = data;
            this.model = model;
            this.mIVew = mIVew;
        }

        @Override
        protected Bitmap doInBackground(Void...params) {

            String picturePath = "";
            Bitmap bitmap;
            if (data != null) {
                Uri selectedImage = data.getData();
                String[] filePathColumn = { MediaStore.Images.Media.DATA };
                Cursor cursor = model.getApplication().getContentResolver().query(selectedImage,filePathColumn, null, null, null);
                cursor.moveToFirst();
                int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
                picturePath = cursor.getString(columnIndex);
                cursor.close();
            }
            bitmap = BitmapFactory.decodeFile(picturePath);         
            ImgBase64.encodeTobase64(bitmap, model);
            return  bitmap ;

        }

        @Override
        protected void onPostExecute(Bitmap result) {
           mIVew.setImageBitmap(result);
           mIVew.dismissProgressDialog();
        }



        @Override
        protected void onPreExecute() {}

        @Override
        protected void onProgressUpdate(Void... values) {}
    }

}

Hope, helped to someone!

Android: black screen to load image

3 Answers3