ImageView does not fill parent as expected

Question

I have an imageview which I have set to fill_parent and I have set the scaleType to fitCenter - however it does not seem to fill to the edge of the screen as expected. I'm not sure why this is occuring - but it looks very strange.

Any input is greatly appreciated.

Screenshot:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <com.idg.omv.ui.widget.UrlImageView
        android:id="@+id/userVideoThumbImageView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/black"
        android:clickable="false"
        android:contentDescription="YouTube video thumbnail"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:gravity="center"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_launcher" />

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:visibility="invisible" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/userVideoTitleTextView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="5dip"
            android:text="Video Title Not Found"
            android:textColor="@android:color/black"
            android:textSize="20sp" />

        <Button
            android:id="@+id/fav_up_btn1"
            android:layout_width="27dp"
            android:layout_height="27dp"
            android:layout_alignParentRight="true"
            android:background="@drawable/fav_up_btn1"
            android:clickable="false"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:gravity="right"
            android:paddingRight="5dp"
            android:paddingTop="5dp" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/userVideouploaderTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="5dip"
            android:textColor="@color/textlightgrey"

            android:textSize="16sp" />

        <TextView
            android:id="@+id/userVideoviewsTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/userVideouploaderTextView"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </RelativeLayout>

JAVA:

public class UrlImageView extends LinearLayout {

    private Context mContext;
    private Drawable mDrawable;
    private ProgressBar mSpinner;
    private ImageView mImage;

    public UrlImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public UrlImageView(Context context) {
        super(context);
        init(context);
    }

    /**
     * First time loading of the LoaderImageView
     * Sets up the LayoutParams of the view, you can change these to
     * get the required effects you want
     */
    private void init(final Context context) {
        mContext = context;

        mImage = new ImageView(mContext);
        mImage.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        mImage.setVisibility(View.GONE);

        mSpinner = new ProgressBar(mContext);
        mSpinner.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

        mSpinner.setIndeterminate(true);

        addView(mSpinner);
        addView(mImage);
    }

    /**
     * Set's the view's drawable, this uses the internet to retrieve the image
     * don't forget to add the correct permissions to your manifest
     * 
     * @param imageUrl the url of the image you wish to load
     */
    public void setImageDrawable(final String imageUrl) {
        mDrawable = null;
        mSpinner.setVisibility(View.VISIBLE);
        mImage.setVisibility(View.GONE);

        new Thread() {
            public void run() {
                try {
                    mDrawable = getDrawableFromUrl(imageUrl);
                    imageLoadedHandler.sendEmptyMessage(RESULT_OK);
                } catch (MalformedURLException e) {
                    imageLoadedHandler.sendEmptyMessage(RESULT_CANCELED);
                } catch (IOException e) {
                    imageLoadedHandler.sendEmptyMessage(RESULT_CANCELED);
                }
            };
        }.start();
    }

    /**
     * Callback that is received once the image has been downloaded
     */
    private final Handler imageLoadedHandler = new Handler(new Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            switch (msg.what) {
            case RESULT_OK:
                mImage.setImageDrawable(mDrawable);
                mImage.setVisibility(View.VISIBLE);

                mSpinner.setVisibility(View.GONE);
                break;
            case RESULT_CANCELED:
            default:
                // Could change image here to a 'failed' image
                // otherwise will just keep on spinning
                break;
            }
            return true;
        }
    });

    /**
     * Pass in an image url to get a drawable object
     * 
     * @return a drawable object
     * @throws IOException
     * @throws MalformedURLException
     */
    private static Drawable getDrawableFromUrl(final String url) throws IOException, MalformedURLException {
        return Drawable.createFromStream(((java.io.InputStream) new java.net.URL(url).getContent()), "name");
    }

}

Answer 1

I would imagine that fitCenter will scale it so that the WHOLE image will FIT in the parent view. Since the height of the parent view is small, it is being scaled down to fit. Try using gravity to center it rather than the fitCenter scale type

Answer 2

You might want to use android:scaleType="centerCrop" instead.

Answer 3

Youtube return 2 thumb pic, hq and sh. Select HQ quality instead.

String thumbUrl = jsonObject.getJSONObject("thumbnail").getString("hqDefault");