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.

Socialistic

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

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

@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?? – Socialistic

Answer 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.

Salpingectomy

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.. – Socialistic

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

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

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

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! – Socialistic

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. – Salpingectomy

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. – Salpingectomy

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

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

Answer 2

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

Urogenital

Answer 3

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.

Olathe

Answer 4

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.

Expedient

Answer 5

I had a similar problem, though in my case there was a quite large padding area at the bottom of my GridView (it was filled with the background color).
I haven't seen the solution to my issue here, so I'll post it here in case it's helpful.

Besides setting:

android:listSelector="@null"

in my GridView, I also had to set:

android:fadingEdgeLength="0px"

Or, in Java:

GridView.setFadingEdgeLength(0);

Urethrectomy

Answer 6

Try to give padding in pixels like this

  android:paddingLeft="5px"

Antineutrino