Space between images in GridView Android

Question

I am using GridView to show the images(Only tablet) but getting too much space between the images searched about this but still didnt get the solution, find below xml file,java code and screenshot where am going wrong. My XML file

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


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.naveenbannikoppa.grid.AndroidGridViewDisplayImages" >

<GridView
    android:id="@+id/gridview_android_example"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:adjustViewBounds="true"
    android:layout_weight="100"
    android:horizontalSpacing="0dip"
    android:verticalSpacing="0dip"
    android:clipChildren="true"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:numColumns="3" >
</GridView>


</RelativeLayout>

Java File

public class AndroidGridViewDisplayImages extends AppCompatActivity {

    GridView androidGridView;

    Integer[] imageIDs = {
            R.drawable.mobile_app_41, R.drawable.mobile_app_41, R.drawable.mobile_app_42,
            R.drawable.mobile_app_43, R.drawable.mobile_app_46, R.drawable.mobile_app_46,
            R.drawable.mobile_app_46, R.drawable.mobile_app_41, R.drawable.mobile_app_42,

    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.gridview_android_example_with_image);

        androidGridView = (GridView) findViewById(R.id.gridview_android_example);
        androidGridView.setAdapter(new ImageAdapterGridView(this));

        androidGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent,
                                    View v, int position, long id) {
                Toast.makeText(getBaseContext(), "Grid Item " + (position + 1) + " Selected", Toast.LENGTH_LONG).show();
            }
        });

    }

    public class ImageAdapterGridView extends BaseAdapter {
        private Context mContext;

        public ImageAdapterGridView(Context c) {
            mContext = c;
        }

        public int getCount() {
            return imageIDs.length;
        }

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

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

        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView mImageView;

            if (convertView == null) {
                mImageView = new ImageView(mContext);
                mImageView.setLayoutParams(new GridView.LayoutParams(150, 150));
                mImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                mImageView.setAdjustViewBounds(true);

                mImageView.setPadding(8, 8, 8, 8);
            } else {
                mImageView = (ImageView) convertView;
            }
            mImageView.setImageResource(imageIDs[position]);
            return mImageView;
        }
    }
}

Screen Shot

I want Like this

you always want 3 columns in 1 row right? it's ok if more than 3 columns in 1 row — Linh, May 23 '16 at 07:40

score 1 · Answer 1 · answered May 23 '16 at 07:40

Try this,

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/gridview"
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent"
   android:columnWidth="100dp"
   android:numColumns="auto_fit"
   android:verticalSpacing="0dp"
   android:horizontalSpacing="0dp"
   android:stretchMode="columnWidth"
   android:gravity="center"
/>

score 0 · Answer 2 · answered May 23 '16 at 07:58

0

use this code, increase vertical spacing...

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent" 
android:layout_height="fill_parent"
android:columnWidth="100dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>

answered May 23 '16 at 07:58

Sikander Bhutto

226
1
11

Not Working, android:numColumns should be 3 instead autofit. @SikanderBhutto – May 23 '16 at 08:26

Linh · Accepted Answer · 2016-05-23T10:25:33.480

0

If you always want to have 3 columns in one row, you should calculate height of each item depends on the screen height (it will be equals screenheight-gap/numberofitem)

if (convertView == null) {
    int screenHeight = getResources().getDisplayMetrics().heightPixels;
    int screenWidth = getResources().getDisplayMetrics().widthPixels; 

    int height = MIN(screenHeight,screenWidth);
    int numberOfCollumns = 3;
    int verticalSpace = 10;
    int itemHeight = (height - (numberOfCollumns + 1) * horizontalSpace) / numberOfCollumns;

    mImageView = new ImageView(mContext);
    //mImageView.setLayoutParams(new GridView.LayoutParams(150, 150));
    mImageView.setLayoutParams(new GridView.LayoutParams(itemHeight, itemHeight));

    ...
}

and in you xml, change GridView android:layout_width="fill_parent" to android:layout_width="wrap_content"

<GridView
    android:id="@+id/gridview_android_example"
    android:layout_width="wrap_content"
    ...
/>

edited May 23 '16 at 10:25

answered May 23 '16 at 08:26

Linh

57,942
23
262
279

Images become big, i am unable to show 3*3 matrix view want to show all the 9 images without scrolling @PhanVanLinh – May 23 '16 at 08:35
@Naveen you can increase the `horizontalSpace` value as you want – Linh May 23 '16 at 08:37
Still not working, if I increase horizontalSpace to show again am getting same which I posted screenshot above @PhanVanLinh – May 23 '16 at 08:49
@Naveen can you use the photoshop or paint to draw the screen that you want to achieve, then I will easy to understand what you want – Linh May 23 '16 at 08:50
Yes best idea wait for 5 min @PhanVanLinh – May 23 '16 at 08:51
I added screenshot in the question, can u please give and better view like that @PhanVanLinh – May 23 '16 at 09:04
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112661/discussion-between-naveen-and-phan-vn-linh). – May 23 '16 at 09:28

score 0 · Answer 4 · answered May 24 '16 at 05:32

0

Actually there is no problem in your layout. The problem is size of images you are used. try after changing size of images.

answered May 24 '16 at 05:32

What should be the size of the image? @NikhilSuwalka – May 24 '16 at 06:09
developer console for size of images for different layouts. and also check this [link](http://www.tutorialspoint.com/android/android_grid_view.htm) – May 24 '16 at 06:28

Space between images in GridView Android

4 Answers4