Getting black ImageView using Picasso and Glide

Question

The problem

I'm writing an Android app that's supposed to have a "Slideshow" feature on it. I've found this nice library, based on Picasso, that does exactly what I wanted, and it worked just fine most of the times.

Problem is, sometimes my images are not loaded into the slide ImageView... It only shows a "black canvas" as you can see on the screenshot below.

I am loading the image from a local resource from my drawables. Sometimes it happens on Portrait mode, sometimes on Landscape mode. It doesn't matter which image I use, sometimes that "blackness" happens.

EDIT:

• I'm using Android 5.0.2 and 4.4.2 - It doesn't seem to happen on 4.4.2. Only on 5.0.2.

• It happened on a Moto X 2014 with android 5.1.

• The images I'm trying to load have 45KB on disk with a resolution of 900x445.

• I've turned on the layout rects as suggested, and these were the results:

And it keep like that on scroll.

And sometimes, it gets white instead of black (Or white, then black).

Something else I tried: My drawables were located on the res/drawable folder, when I've changed the files from that folder to the res/drawable-xxxhdpi the slider worked on the 5.0.2 device. wtf???

What have I tried so far

I've tried different images, to load multiple images on the slide, and even this pull request that changes Picasso to Glide on the lib. Nothing seems to work and the error seems random.

Once I've tried to use URLs from the web instead of the actual drawables on the local storage, it worked. With the exact same images.

Here's how I'm loading the images:

Fragment.java

private SliderLayout slider;
private PagerIndicator indicator;

// ...

private void setupSlider() {

    HashMap<String,Integer> file_maps = new HashMap<>();

    file_maps.put("Blah",R.drawable.banner_1);
    file_maps.put("Bleh",R.drawable.banner_2);
    file_maps.put("Blih",R.drawable.banner_3);
    file_maps.put("Bloh",R.drawable.banner_4);

    for (String name : file_maps.keySet()) {

        DefaultSliderView dsv = new DefaultSliderView(getActivity());

        dsv.description(name)
                .image(file_maps.get(name))
                .error(R.drawable.banner_error)
                .empty(R.drawable.empty)
                .setScaleType(BaseSliderView.ScaleType.Fit)
                .setOnSliderClickListener(this);

        //add your extra information
        dsv.bundle(new Bundle());
        dsv.getBundle()
                .putString("extra",name);

        slider.addSlider(dsv);
    }

    slider.setPresetTransformer(SliderLayout.Transformer.Default);
    slider.setCustomIndicator(indicator);
    slider.setCustomAnimation(new DescriptionAnimation());
    slider.setDuration(4000);
    slider.addOnPageChangeListener(this);

}

fragment.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.fragments.Fragment"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/sv_main">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/rl_main">

            <com.daimajia.slider.library.SliderLayout
                android:id="@+id/slider"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                />
            <com.daimajia.slider.library.Indicators.PagerIndicator
                android:id="@+id/custom_indicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_below="@+id/slider"
                custom:shape="oval"
                custom:selected_color="#00BFA5"
                custom:unselected_color="#55333333"
                custom:selected_padding_left="@dimen/spacing_medium"
                custom:selected_padding_right="@dimen/spacing_medium"
                custom:selected_padding_top="3dp"
                custom:selected_padding_bottom="@dimen/spacing_small"
                custom:unselected_padding_left="@dimen/spacing_medium"
                custom:unselected_padding_right="@dimen/spacing_medium"
                custom:unselected_padding_top="@dimen/spacing_small"
                custom:unselected_padding_bottom="4dp"
                custom:selected_width="@dimen/spacing_medium"
                custom:selected_height="@dimen/spacing_medium"
                custom:unselected_width="6dp"
                custom:unselected_height="6dp"
                />

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/custom_indicator"
                android:id="@+id/ll_main_body">

            </LinearLayout>

        </RelativeLayout>

    </ScrollView>

    <!-- Other stuff -->

</RelativeLayout>

I'm following the tutorial from the libs wiki page. And no errors are being thrown on the LogCat, which is making this a lot harder to solve.

Any ideas?

Unbeatable

maybe you are getting an OutOfMemoryError. Have your turned on debugging for picasso or glide? How big is the drawable? – Hunnish

i'd try enabling displaying of layout rects in developer settings, then go and make sure there actually is a black imageview, because I'm guessing the view is width and/or height == 0... – Statant

I had the same problem when i was using exact same library, then I changed my testing device and it was working fine on other devices. Previously I tested on Moto G which didn't work then I tested on Nexus 5 and Note 3, it worked fine. Don't know the reason though :/ just try another device. – Tevere

One more thing, I was on Stock 5.1 when it was not working on Moto G after a while I flashed another ROM and didn't realize that it was working fine on another ROM. I just checked it and realized that it worked fine on another ROM. – Tevere

I've changed the Picasso lib with Fresco, and it seems to be working now. But why on Earth is that happening? The problem also happens with Glide... – Unbeatable

Is your background by default black? I know that picasso prefers weak references to images so perhaps this could be an issue. – Tabriz

The lib has a "placeholder" option, which is another image (it appears briefly, and then I got the black image). And the same thing happened with Glide (The black image), so it's not a Picasso exclusive problem I guess. – Unbeatable

Just outta curiosity, have you tried using power of two images? i.e., 512x512, 1024x1024, etc. – Life

I didn't try that. Weird thing is, the image that's going to be black is "random". – Unbeatable

pls post the image file – Broadway

See related issue in Glide: github.com/bumptech/glide/issues/738 there's a fix for a specific device but more can be added if there's enough info. – Cachexia

Is this happening consistently for all the images, or does it happen only happen for some images occasionally? – Vast

It can be any image at any time. It's kinda random. – Unbeatable

I've seen something similar when using alias drawables...Picasso and Glide don't seem to resolve references when they load from a resource. Replacing the id of the alias with the id of the drawable it represents makes it work. This isn't intermittent, though...using an alias never works (not just some of the time). – Vast

Answer 1

Create A Resource Folder Named drawable-nodpi in that folder put your images instead of different folders or drawable folder.

Ruel

That doesn't solve the problem. But it was a mistake to place the images in the drawable folder, yeah. Thanks :) – Unbeatable

Answer 2

Have you tried using a ViewPager with an ImageView and passing an array of image URIs to the adapter? I think you would be able to avoid/debug much better if you implement it yourself.

Quag

That was my first approach, but didn't get as good as the functions that I can have on this lib. – Unbeatable

Answer 3

This library works fine for me, the very first time I used it. It's a really nice library.

First

SliderLayout is not being referenced by anything. That's where the magic happens. Make a xml layout and refer to it by SliderLayout. After that don't forget to call startAutoScroll() and in onPause() stopAutoScroll().

https://github.com/daimajia/AndroidImageSlider/wiki/Start-Using

The link above is basically all you need.

Second

The problem could also be that it's inside a scrollView. The scroll callbacks may be misbehaving.

Make a simple layout, start with a simple slider and work your way up with customizations.

Good luck.

Lightless

Actually it's been referenced, I've just made the code short. And it worked, for most of the times. Dunno if the problem is with the ScrollView. If it was, why does this happen only on a few devices? – Unbeatable

Because nested scrolling is supported api 21+ only – Lightless

Anyway. I would suggest changing your layout to support earlier devices. – Lightless

Actually, it's not. As part of the support v4 it supports devices API level 4 or later. – Unbeatable

NestedScrollView yes... But you are using a SliderLayout with a scrolling mechanism INSIDE a ScrollView... – Lightless

Yeah. But the scrolling was never the problem, and either one of those scrollings worked just fine with the slider. And both of them presented the same problem with the image. – Unbeatable

Well it could be because this library may be defined to work on only some specific layouts. I didn't say it for no reason because I have experienced things like this before where you use a library and expect to work in every circumstance. That's why I said start with a simple layout. If that doesn't work still then you're doing smth wrong with implementation. If it works then you're getting black images probably because it's misbehaving with the layout... – Lightless