RemoteImageView has extra space to the right

[zmillman]

I have a RemoteImageView that I'm using inside a LinearLayout as the thumbnail for each item in a list view.

The urls for the image files are set after the list adapter initializes, then loadImage is called to start loading the image. For some reason, the images are being rendered with an extra 80dp to the right.

Here's a screenshot of the problem: http://i.imgur.com/JWmSD.png

The relevant layout template:

     <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:background="#ffffffff"
        android:baselineAligned="false"
        android:orientation="horizontal" >

        <com.github.ignition.core.widgets.RemoteImageView
            android:id="@+id/thumbnail"
            android:layout_width="80dp"
            android:layout_height="60dp"
            android:layout_weight="0"
            ignition:autoLoad="false"
            android:background="#fff6f6f6"
            ignition:errorDrawable="@android:color/transparent"
            android:indeterminateDrawable="@android:color/transparent"
            android:scaleType="fitXY" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:orientation="vertical"
            android:paddingLeft="8dp"
            android:paddingRight="8dp" >
           ...
        </LinearLayout>
    </LinearLayout>

and excerpt from the list adapter

viewHolder.thumbnail.setImageUrl(lesson.video_thumbnail_hdpi_url);
viewHolder.thumbnail.loadImage();

Any ideas on what might be causing this?

[Berglund]

Replacing the outer LinearLayout with a RelativeLayout will solve the problem. The cause of this problem is that the RemoteImageView has a ProgressBar showing when the image loads. When using a horizontal LinearLayout the ImageView and the ProgressBar each take up their own space horizontally - instead of being on top of each other.

The problem lies in this method in RemoteImageView:

private void showProgressView(boolean show) {
    if (show) {
        state = STATE_LOADING;
        progressViewContainer.setVisibility(View.VISIBLE);
        setVisibility(View.INVISIBLE);
    } else {
        state = STATE_DEFAULT;
        progressViewContainer.setVisibility(View.INVISIBLE);
        setVisibility(View.VISIBLE);
    }
}

Instead of setting the visiblity on progressViewContainer to View.GONE, it's here set to View.INVISIBLE which causes it to still take up space in the layout, and therefore you see that empty space.

[zmillman]

I had patched this in my application by wrapping the RemoteImageView in another LinearLayout which clips out the invisible progress bar.

<!-- Hacky bugfix: wrap the thumbnail in a wrapper to hide the progress view from measuring calculations -->

<LinearLayout
    android:id="@+id/thumbnail_wrapper"
    android:layout_width="80dp"
    android:layout_height="fill_parent"
    android:layout_weight="0"
    android:orientation="vertical" >

    <com.github.ignition.core.widgets.RemoteImageView
        android:id="@+id/thumbnail"
        android:layout_width="80dp"
        android:layout_height="60dp"
        android:layout_weight="0"
        ignition:autoLoad="false"
        android:background="#fff6f6f6"
        ignition:errorDrawable="@android:color/transparent"
        android:indeterminateDrawable="@android:color/transparent"
        android:scaleType="fitXY" />
</LinearLayout>

This seems like something that should be idiot-proof in the Ignition library code, though. If I can figure out how to get it to work without the dimensions changing when the image loads, I'll submit a pull request.