Images overlapping in gridview in android

Question

I am creating gridview to show images. Even I am setting vertical and horizontal spacing, still images overlap each other. Why this happen? And how to solve this issue? You can see this in image.

My code:

public class Images extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.images);

        GridView gridView = (GridView) findViewById(R.id.grid_view);
        gridView.setAdapter(new ImageAdapter(this));
        gridView.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) { 
                Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
                i.putExtra("id", position);
                startActivity(i);
            }
        });
    }

    public class ImageAdapter extends BaseAdapter {

        private Context mContext; 
        int width, height;

        public Integer[] mThumbIds = {
                R.drawable.radhe, R.drawable.radhe,
                R.drawable.radhe, R.drawable.radhe,
                R.drawable.radhe, R.drawable.radhe,
                R.drawable.radhe, R.drawable.radhe,
                R.drawable.radhe
        };

        // Constructor
        public ImageAdapter(Context c){
            mContext = c;
        }

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

        @Override
        public Object getItem(int position) {
            return mThumbIds[position];
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = new ImageView(mContext);
            DisplayMetrics displaymetrics = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
            width = displaymetrics.widthPixels;
            height = displaymetrics.heightPixels;
            imageView.setLayoutParams(new GridView.LayoutParams(width/3, height/3));
            imageView.setScaleType(ScaleType.FIT_XY);
            imageView.setImageResource(mThumbIds[position]);
            return imageView;
        }
    }
}

Xml:

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/grid_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="3"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="5dp"
    android:gravity="center"
    android:stretchMode="columnWidth" >  

</GridView>

Here's output I am getting.

enter image description here

Don't hard code the `ImageView` with and height. You are hardcoding here `new GridView.LayoutParams(width/3, height/3)` — Gopal Gopi, Mar 15 '14 at 10:19
use `new GridView.LayoutParams(GridView.LayoutParams.WRAP_CONTENT,GridView.LayoutParams.WRAP_CONTENT)` and use `android:columnWidth="90dp"` as Aashish-Systematix suggested — Gopal Gopi, Mar 15 '14 at 10:24
i dont want to use column width. Because using this not proper display on some screen sizes. — John R, Mar 15 '14 at 10:33
then use width of the `GridView`, not screen width. You need to consider horizontal spacing when calculating width. and don't hardcode the height. make it as `WRAP_CONTENT`... — Gopal Gopi, Mar 15 '14 at 10:40
determine the width of `ImageView` like this... `GridView gridView = (GridView)parent; int width = gridView.getWidth() - 2 * gridView.getHorizontalSpacing(); width /= 3;` — Gopal Gopi, Mar 15 '14 at 11:27

score 0 · Answer 1 · answered Mar 15 '14 at 10:20

Used below code of snippet instead which you was used:

<GridView 
    android:id="@+id/gv_Grid" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:columnWidth="90dp"
    android:numColumns="3" 
    android:verticalSpacing="60dip"
    android:horizontalSpacing="10dip"
    android:stretchMode="columnWidth"
    android:gravity="center" 
    android:layout_below="@+id/rr_grid_titleBar" />

Thanks

score 0 · Answer 2 · answered Mar 15 '14 at 10:27

0

Please use imageView.setPadding(20, 20, 20, 20); in in getView method(Grid Adapter ). Padding with provide some space to Grid Item (Image view) and they look seperated.

answered Mar 15 '14 at 10:27

Amarjit

4,327
2
34
51

Images overlapping in gridview in android

2 Answers2