35

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.

alt text

A.J.
  • 1,550
  • 2
  • 14
  • 18

4 Answers4

67

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.

A.J.
  • 1,550
  • 2
  • 14
  • 18
  • 10
    +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"` – mvds May 20 '11 at 18:31
  • @mvds 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. – Janusz Jul 29 '11 at 08:09
  • 30
    @Janusz correct, on some devices `@android:id/empty` leads to a crash. `@android:color/transparent` seems to be the right choice. – mvds Jul 29 '11 at 09:28
  • 13
    Alternatively, omit a list selector altogether using `@null`. – Paul Lammertsma May 08 '12 at 17:44
  • Thank you very much, you saved my app from my uninstalls due to ugly grid view. – Sunil Parmar Mar 14 '13 at 06:20
  • 1
    @android:color/transparent is a great fix for me. – MattD Apr 20 '13 at 17:29
  • OMG I Love everybody here! The timesavers club! – Sergey Metlov May 23 '13 at 21:02
  • @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. – Manoj Aug 02 '13 at 15:56
  • 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! – Steve Sep 07 '13 at 08:41
0

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

duggu
  • 37,851
  • 12
  • 116
  • 113
oren zvi
  • 114
  • 1
  • 4
0

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

Cheryl Simon
  • 46,552
  • 15
  • 93
  • 82
  • 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. – A.J. Oct 27 '10 at 21:36
  • 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. http://developer.android.com/reference/android/widget/ImageView.ScaleType.html Also, look at your layout in heirarchy viewer to see who owns that space. – Cheryl Simon Oct 27 '10 at 22:01
  • 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). – A.J. Oct 28 '10 at 20:41
  • Sorry, not sure what else to change.. It feels like some combination of padding, margin, spacing, etc., has to do the trick.. – Cheryl Simon Oct 28 '10 at 20:51
0

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.

AndrewKS
  • 3,603
  • 2
  • 24
  • 33
  • 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. – A.J. Oct 27 '10 at 21:52
  • MATCH_PARENT = FILL_PARENT, I don't know why they changed it. – Cheryl Simon Oct 27 '10 at 21:59
  • 4
    We changed it because `FILL_PARENT` implied "fill *leftover* space," which in the vast majority of cases is not the actual behavior. :) – adamp Oct 27 '10 at 23:55