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