Why are there extra pixels around my Android GridView?

Question

I have a GridView in my Android application that has a number of ImageViews in it. The space on my screen is limited and I want the images to take up as much of the available space as they can. Unfortunately, the GridView always leaves 5 pixels of empty screen space around the outside edge of the ImageViews (the space between ImageViews is set with horizontal/vertical spacing and behaves correctly). The empty space acts kind of like a margin around the ImageViews, but I can't get rid of it. Does anyone know what's causing this "border" and how I can get rid of it (or at least make it smaller)? Thanks.

Update: I'm creating the ImageViews by inflating an .xml file in the getView() method of my Adapter class. Here's the xml I'm inflating:

<ImageView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:background="#FF00FF" />

I defined the GridView in my layout xml file like this:

<GridView
   android:id="@+id/mygrid"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_above="@+id/abutton"
   android:layout_marginBottom="8dp"
   android:numColumns="5" android:background="#FF0000"/>

Here's a screen shot of the problem. The red area in my GridView. The purple areas are my ImageViews. The image being displayed is a simple blue rectangle with a transparent center. The image is 45x45 pixels (but is only 30x30 pixels in my app - I'll worry about that later). The red border around the purple is what I am trying to eliminate.

Carbonaceous

Answer 1

Thanks for the advice everyone, but it turns out the answer was somewhere that we didn't expect. The extra pixels were caused by the selector that was assigned to my GridView. I guess the default selector is a 9-patch image that has a 5 pixel border around it. When I created and assigned a 9-patch that had smaller borders (or no borders at all - just a normal .png file) the extra space in my GridView went away.

Carbonaceous

+1, you saved me at least 4 hours of trial&error. It appears that a clean way to specify "no image" in this situation is android:listSelector="@android:id/empty" – Lys

@Lys android:listSelector="@android:id/empty" caused an exception. It seems that the GridView can not handle this listSelector. I set the selector to a transparent color instead. – Primula

@Primula correct, on some devices @android:id/empty leads to a crash. @android:color/transparent seems to be the right choice. – Lys

Alternatively, omit a list selector altogether using @null. – Linville

Thank you very much, you saved my app from my uninstalls due to ugly grid view. – Inapposite

@android:color/transparent is a great fix for me. – Superfecundation

OMG I Love everybody here! The timesavers club! – Eulogia

@Daedylus android:color/transparent not working for me! On samsung s3 its looking proper but on nexsus its messed up!. I have grid items of about 120X120. – Ethelethelbert

Really useful info. I was having trouble with the appearance of horizontal padding as well as the 5 pixel border thing and setting listSelector to @null sorted it all out. Thanks! – Pyroligneous

Answer 2

Did you try setting the padding on the ImageView and the horizontalSpacing and verticalSpacing on the GridView to 0?

Ambroid

Thanks. I've tried that. Doesn't seem to be helping. I updated my original post to include the code for my GridView and ImageViews. – Carbonaceous

What size are the images you are putting in the grid view? Are they all the same? You might need to adjust how they scale to take up the whole space. developer.android.com/reference/android/widget/… Also, look at your layout in heirarchy viewer to see who owns that space. – Ambroid

I managed to set the background color of my controls, so that I can see who owns the screen space (see my edited question). The GridView is the owner, but changing padding doesn't reduce the owned area (although it can expand it). – Carbonaceous

Sorry, not sure what else to change.. It feels like some combination of padding, margin, spacing, etc., has to do the trick.. – Ambroid

Answer 3

Try setting the layout_height and layout_width of the image view to fill_parent.

iv.setLayoutParams(ViewGroup.LayoutParams(ViewGroup.MATCH_PARENT, ViewGroup.MATCH_PARENT));

will do it dynamically, I believe.

Churrigueresque

I have to do this for Android 2.1, MATCH_PARENT didn't exist back then. I tried FILL_PARENT and it still didn't work. – Carbonaceous

MATCH_PARENT = FILL_PARENT, I don't know why they changed it. – Ambroid

We changed it because FILL_PARENT implied "fill leftover space," which in the vast majority of cases is not the actual behavior. :) – Pernickety

Answer 4

For me nothing helped except setting the android:columnWidth attribute in the xml (for example android:columnWidth="50dp" )

Cathern