15

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.

Community
  • 1
  • 1
Anand Sainath
  • 1,807
  • 3
  • 22
  • 48

6 Answers6

38

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.

Shawn Lauzon
  • 6,234
  • 4
  • 35
  • 46
  • 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.. – Anand Sainath Jul 30 '11 at 06:40
  • If you added the code that you use to add the buttons, it might help. – Shawn Lauzon Jul 30 '11 at 15:58
  • Also, see another suggestion for setStretchMode, which I did when I had the same problem. – Shawn Lauzon Jul 30 '11 at 16:01
  • 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 Aug 01 '11 at 04:02
  • 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! – Anand Sainath Aug 01 '11 at 04:16
  • 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 Aug 01 '11 at 20:36
  • 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. – Shawn Lauzon Aug 01 '11 at 20:37
  • That remaining part of that XML is a relative layout with a header on top.. Let me try out your last suggestion! – Anand Sainath Aug 02 '11 at 16:32
  • @Shawn Lauzon - This was so frustrating. Thx for this. – Mark Lapasa Apr 05 '12 at 23:01
2

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

Community
  • 1
  • 1
Fenix Voltres
  • 3,448
  • 1
  • 29
  • 36
1

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.

mnel
  • 113,303
  • 27
  • 265
  • 254
Miguel Pereira
  • 1,781
  • 16
  • 14
1

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.

Balaji Dubey
  • 446
  • 5
  • 10
0

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);
rbarriuso
  • 787
  • 8
  • 30
0

Try to give padding in pixels like this

  android:paddingLeft="5px"
Syed Hasan
  • 161
  • 1
  • 5