blank space when scaling imageview in gridview

Question

I am looking to implement a UI similar to Google Play's Cards.

I have created a GridView and the background of the card as an xml file. Now, I am looking to fit images on the card so that the bottom shadow is visible but the width of the image is the same as the card's width. The problem is that there is white space around the image even though I set the GridView.LayoutParams proportional to the image size. I tried different scaleType but none worked. In addition, once I get the image's width to fit the card's width, how do I make sure that the bottom shadow is still visible?

My image adapter class

package me.zamaaan.wallpaper;

import android.content.Context;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter{
    private Context mContext;

    // Keep all Images in array
    public Integer[] mThumbIds = {
            R.drawable.background1, R.drawable.background2,
            R.drawable.background3, R.drawable.background4,
            R.drawable.background1, R.drawable.background2,
            R.drawable.background1, R.drawable.background2,
            R.drawable.background3, R.drawable.background4,
            R.drawable.background1, R.drawable.background2,
            R.drawable.background3
    };


    // Constructor
    public ImageAdapter(Context c){
        mContext = c;
    }
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return mThumbIds.length;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return mThumbIds[position];
    }

    @Override
    public long getItemId(int arg0) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(mThumbIds[position]);
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        int width_dp = 109;
        double height_dp = width_dp/0.5625;
        int width_px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, width_dp, mContext.getResources().getDisplayMetrics());

        int height_px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (int)height_dp, mContext.getResources().getDisplayMetrics());

        imageView.setLayoutParams(new GridView.LayoutParams(width_px, height_px));
        imageView.setBackgroundResource(R.drawable.bg_card);

        return imageView;
    }

}

bg_card.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"
               android:dither="true">

            <corners android:radius="2dp"/>

            <solid android:color="#ccc" />

        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle"
               android:dither="true">

            <corners android:radius="2dp" />

            <solid android:color="@android:color/white" />

            <padding android:bottom="8dp"
                     android:left="8dp"
                     android:right="8dp"
                     android:top="8dp" />
        </shape>
    </item>
</layer-list>

gridview.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/landscape"
  android:orientation="horizontal"
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content"
  android:layout_gravity="center_horizontal"
  android:background="#eeeeee"
  android:gravity="center">

<GridView  
    android:id="@+id/grid_view"
    android:layout_marginTop="16.50dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="3"
    android:paddingBottom="8dp"
    android:horizontalSpacing="11dp"
    android:verticalSpacing="7dp"
    android:gravity="center"
    android:stretchMode="columnWidth"
    >

</GridView>

</RelativeLayout>

The actual size of the images are

720x1280px

Answer 1

Your images do not fill the card because in your card background you have a padding of 8dp on either side

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <item android:bottom="2dp">
        <shape android:shape="rectangle"
               android:dither="true">
            <corners android:radius="2dp" />
            <solid android:color="@android:color/white" />
            <padding android:bottom="8dp"
                     android:left="8dp"
                     android:right="8dp"
                     android:top="8dp" />
        </shape>
    </item>
</layer-list>

Remove the padding to make it fill the width.

If you want to keep the shadow as well it would be better to create a 9-patch for your background so you can define where the content sits, something like:

The black lines on the very left and top sides represent the scalable areas and the lines on the very bottom and right sides represent the areas where the content sits (notice the content area on the very right side does not cover the shadow area).