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?

Answer 1

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.

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.

Answer 3

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