Question

After two years of Android development I’m still not 100% sure about what resources I need to provide to make my GridView work on different size and resolution devices.

I’m still learning, for example I recently discovered that you don’t have to supply every drawable in all screen sizes – if you put something in xhdpi then Android is clever enough to resize that on the fly most of the time – but there are a few few quirks. For example if I try using drawables which are only defined in the drawable-xhdpi bin on a mdpi device in a GridView, the drawable will visually resize correctly but the whitespace around it won’t – that will still be the original size. Originally I got around this by forcably defining dimensions for all aspects of the GridView and the associated adapter view, but this had a load of code smell around it, so I resized the drawables manually, put them in their respective bins (drawable-mdpi, drawable-hdpi and drawable-xhdpi) and removed all the forcing of image sizes etc.

So I currently have:

    <GridView
        android:id="@id/home_image_grid"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:columnWidth="100dp"
        android:gravity="center"
        android:listSelector="#00000000"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
    >
    </GridView>

and the layout for each item is:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_margin="0dip"
          android:gravity="center"
          android:orientation="vertical"
          android:padding="0dip">

    <ImageView
            android:id="@id/home_button_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
        />

        <TextView
            android:id="@id/home_button_text"
            android:layout_width="wrap_content"     
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="@color/default_text_colour"
            android:textSize="@dimen/home_button_text"
             />

    </LinearLayout>

So far so good…

The app I’m currently working on I’ve almost finished and have been doing some testing on different devices – it looks good on normal screen size xhdpi, hdpi & mdpi devices. Then I extending my testing to other devices – I’m testing on an HTC Flyer which is large screen size, mdpi – and the gridview now looks rubbish – it’s correctly picking up the mdpi images, which are tiny.

Doing some reading around I found the GridView tutorial GridView tutorial, which says to put all your drawables in the ‘drawable’ bin, so I followed this advice and again everything looked rubbish – on closer inspection (and having actually read through the example code) it seems that they are manually setting the size of each image in the GridView – which I’d been doing to start off with, and which means that I’m going to have to manually set the image sizes for every permutation of devices.

So..I’m left wondering if I’ve missed a trick here – should I take my first approach of sticking the images in my drawable folder and manually forcing the sizes for every purmutation? Should I draw a new set of images for all permutations of screen size and resolution?

How can I guarantee that whatever I do, it’s going to look good on a device I’ve not tested it on?

Either way it feels like I’m doing something wrong – but I can’t work out how to do this properly without loads of hassle. Can anyone help?

Answer 1

I’m not sure what you mean by “forcing the sizes for every permutation” but you could put the proper sized drawables in the following folders:

• drawable-mdpi
• drawable-large-mdpi

Each device would pick the right drawables from the corresponding folder and you could separate normal and large images for mdpi devices.

Wouldn’t that fix your problem?

P.S: The drawable folder is meant for XML drawables only or photos which do not depend on the device’s density, not images for the UI. Those will scale properly for each resolution and density.