Removing the extra padding in a GridView in android

Question

I want to remove the extra padding that appears in a grid view. I have images of the size 128*128 which will be occupying cells in the grid. But somehow there is an extra space that gets added to the contents of the grid.

After some research, I was able to determine that I have to override the listSelector property of the grid view. Now here's my question - I know I have to specify something like an xml drawable here, but what to specify in that?? I tried using a shape drawable with padding and stroke set to 0dp to no avail.

The question is asked and answered here, but they haven't given what the drawable must contain.

Can some one help me with this. Thanks!

EDIT: Ok - here's a copy of the UI that I have. And the XML layout for the same is as follows:

<GridView android:id="@+id/GV_A2ZMenu" android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:numColumns="4"
            android:layout_gravity="top" android:stretchMode="columnWidth"
    android:gravity="center" android:listSelector="@null" />

And I am using a BaseAdapter class to populate the gridView. Here's its code:

public class AtoZMenu extends BaseAdapter {

private static Context AppC;

private Integer[] MenuImg = { R.drawable.alphabet_a, R.drawable.alphabet_b,
        R.drawable.alphabet_c, R.drawable.alphabet_d,
        R.drawable.alphabet_e, R.drawable.alphabet_f,
        R.drawable.alphabet_g, R.drawable.alphabet_h,
        R.drawable.alphabet_i, R.drawable.alphabet_j,
        R.drawable.alphabet_k, R.drawable.alphabet_l,
        R.drawable.alphabet_m, R.drawable.alphabet_n,
        R.drawable.alphabet_o, R.drawable.alphabet_p,
        R.drawable.alphabet_q, R.drawable.alphabet_r,
        R.drawable.alphabet_s, R.drawable.alphabet_t,
        R.drawable.alphabet_u, R.drawable.alphabet_v,
        R.drawable.alphabet_w, R.drawable.alphabet_x,
        R.drawable.alphabet_y, R.drawable.alphabet_z };

public AtoZMenu(Context C) {
    AppC = C;
}

public int getCount() {
    return MenuImg.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 IV;
    float density = AppC.getResources().getDisplayMetrics().density;

    if (convertView == null) {
        IV = new ImageView(AppC);
        IV.setMaxHeight((int) (1));
    } else {
        IV = (ImageView) convertView;
    }
    IV.setImageResource(MenuImg[position]);
    return IV;
}
 }

Can you spot the mistake?

Note: In the end I ended up implementing a similar screen in a table layout which renders much better grids.

Solution 1

Yep, I've had the same problem. You want to set the listSelector to @null:

<!-- Setting the listSelector to null removes the 5px border -->
<GridView
    android:id="@+id/view"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:listSelector="@null" />

Also, try the following:

myGridView.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);

I see you can do this in the XML, but I didn't when I had this same problem; not sure why.

I also hard-coded the key height:

float density = getContext().getResources().getDisplayMetrics().density;
mKeyHeight = (int) (56 * density);
....
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ImageButton b = (ImageButton) convertView;
    if (b == null) {
        b = new ImageButton(getContext());
        b.setMinimumHeight(mKeyHeight);
        b.setBackgroundResource(R.drawable.btn_keyboard_key);
        b.setOnClickListener(this);
    }
}

Sorry about not giving a precise answer, so let me know if you still need help after that.

Solution 2

The correct answer is to set android:listSelector to @android:color/transparent, as user mvds said here.

Solution 3

Even I had the same problem. Try this:

image.setLayoutParams(new GridView.LayoutParams(imageWidth , imageHeight)); imageView.setScaleType(ImageView.ScaleType.FIT_XY);.

Add padding accordingly for the images.It worked for me.

Solution 4

I used a variation of Shawn's solution.. it looks nice on the Emulator.

1) Decide on the # of columns, I chose 4

2) Set the Column Width

float xdpi = this.getResources().getDisplayMetrics().xdpi;
int mKeyHeight = (int) ( xdpi/4 );

GridView gridView = (GridView) findViewById(R.id.gridview); 
gridView.setColumnWidth( mKeyHeight );// same Height & Width

3) Setup the image in your adapter's getView method

imageView = new ImageView( mContext );
// (xdpi-4) is for internal padding
imageView.setLayoutParams(new GridView.LayoutParams( (int) (xdpi-4)/2, (int) (xdpi-4)/2));
imageView.setScaleType( ImageView.ScaleType.CENTER_CROP );
imageView.setPadding(1, 1, 1, 1);

4) Layout

<?xml version="1.0" encoding="utf-8"?>
    <GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/gridview"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:numColumns="4"
    android:verticalSpacing="0dp"
    android:horizontalSpacing="0dp"
    android:gravity="center"
    android:listSelector="@null"
/>
<!-- 
    android:columnWidth="90dp"  Specified in code 
    android:stretchMode="columnWidth" no noticable change
-->

That's it.

View more solutions

Comments

[Vincent Mimoun-Prat]

A sreenshot would help to understand the problem, along with your layout XML file

[Anand Sainath]

Have edited the question, it contains a link to a similar question which has been answered already, but its implementation is missing!

[Anand Sainath]

@MarvinLabs: I have posted the UI and the xml layout code that I have used for that as well. Can you figure out the problem??

[Anand Sainath]

Ah! Nope. I tried specifying it as null. It doesn't help. Anyways, I have included a screenshot of my UI and the code that i have used as well. See if you can find a flaw out of this..

[Shawn Lauzon]

If you added the code that you use to add the buttons, it might help.

[Shawn Lauzon]

Also, see another suggestion for setStretchMode, which I did when I had the same problem.

[Anand Sainath]

So basically this is like hard coding both the width and the height?? Let me check out this solution and come back to you.

[Anand Sainath]

I have edited the code in the question. Can you tell me what I am doing wrong. And also, what does "56" signify? BTW - I tried setting a MinHeight and also MaxHeight. It doesn't seem to effect anything. As u can see, I have it set as 1, still doesn't make any difference!

[Shawn Lauzon]

Is that XML file the entire file? Is it possible your view is getting stretch somehow? I copied your code basically as is, and I do get a little padding at the top and bottom of each image but not padding to the left and right, but in any case not nearly as much as you're seeing.

[Shawn Lauzon]

You could instead use a 9-patch and do setBackgroundResource instead of setImageResource, which might do a better job of stretching to fill the extra space.

[Anand Sainath]

That remaining part of that XML is a relative layout with a header on top.. Let me try out your last suggestion!

[Mark Lapasa]

@Shawn Lauzon - This was so frustrating. Thx for this.