CODEWITHSUNDEEP
androidgridview
user6250547
user6250547

Reputation:

Space between images in GridView Android

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

enter image description here

I want Like this

enter image description here

Upvotes: 2

Views: 1060

Answers (4)

user5383419
user5383419

Reputation:

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

Upvotes: 0

Linh
Linh

Reputation: 61019

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"
    ...
/>

Upvotes: 0

Sikander Bhutto
Sikander Bhutto

Reputation: 226

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"
/>

Upvotes: 0

Sathish Kumar J
Sathish Kumar J

Reputation: 4345

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"
/>

Upvotes: 1

Related Questions