CODEWITHSUNDEEP
androidgridview
ashur
ashur

Reputation: 4337

Images in gridview overlap

I'm taking a course on android and I have sample application that shows TabLayout. Application has two tabs, first with images of flowers, second with images of dogs. They're both made of grid view. Each time I change tab it changes fragment_container to adequate fragment which is filled with photos in code.

However when I run app images overlap with each other. I don't know what is wrong with that - I was trying to change some attributes, such as stretchMode etc. but it didn't help.


This is how it looks, according to lecturer it should display up to 3 images per row on such device.

main.xml

<?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:layout_gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>

grid_fragment.xml

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

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnWidth="90dp"
        android:gravity="center"
        android:horizontalSpacing="10dp"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="XXXXX" >
    </TextView>

</LinearLayout>

Update. Adapter

public class ImageAdapter extends BaseAdapter {
    private static final int PADDING = 8;
    private static final int WIDTH = 250;
    private static final int HEIGHT = 250;
    private Context mContext;
    private List<Integer> mThumbIds;

    public ImageAdapter(Context c, List<Integer> ids) {
        mContext = c;
        this.mThumbIds = ids;
    }

    @Override
    public int getCount() {
        return mThumbIds.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    // Will get called to provide the ID that
    // is passed to OnItemClickListener.onItemClick()
    @Override
    public long getItemId(int position) {
        return mThumbIds.get(position);
    }

    // create a new ImageView for each item referenced by the Adapter
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = (ImageView) convertView;

        // if convertView's not recycled, initialize some attributes
        if (imageView == null) {
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(WIDTH, HEIGHT));
            imageView.setPadding(PADDING, PADDING, PADDING, PADDING);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);            
        }

        imageView.setImageResource(mThumbIds.get(position));
        return imageView;
    }
}

Upvotes: 0

Views: 2830

Answers (1)

Ben Pearson
Ben Pearson

Reputation: 7762

Try updating your getView method in the Adapter so the image size isn't hard coded to 250.

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView = (ImageView) convertView;

    // if convertView's not recycled, initialize some attributes
    if (imageView == null) {
        imageView = new ImageView(mContext);
        imageView.setLayoutParams(new GridView.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        imageView.setPadding(PADDING, PADDING, PADDING, PADDING);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);            
    }

    imageView.setImageResource(mThumbIds.get(position));
    return imageView;
}

Upvotes: 3

Related Questions