Using ImageView to make a 2D Map of Icons

Question

So I'm struggling a bit here trying to create a 2D map of icons, where each icon is 48x48 pixels and the map is a 9x9 grid (thus, 432x432 pixels in size). I tried, unsuccessfully, starting with a GridView and have since decided to try using an AbsoluteView inside of a LinearView. Here's the beginning of the XML file (I've not added all 81 icons for now just to keep it somewhat brief for this question):

<AbsoluteLayout
     xmlns:android="http://schemas.android.com/apk/res/android" 
      android:orientation="vertical" 
      android:layout_width="442px" 
      android:layout_height="442px"
      android:padding="5px"
      android:layout_gravity="center_horizontal"
      android:background="#008000"
>
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="0px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="48px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="96px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="144px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="192px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="240px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="288px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="336px"
        android:layout_y="0px"
        />
    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="384px"
        android:layout_y="0px"
        />



    <ImageView
        android:background="@drawable/water2"
        android:layout_width="48px"
        android:layout_height="48px"
        android:layout_x="0px"
        android:layout_y="48px"
        />              

</AbsoluteLayout>

When I try this in Eclipse, it looks utterly perfect. When I load this onto my Samsung Captivate, it is just wrong. Its as if the icons are being stretched even though I've specified exact dimensions in pixels.

I'm sure I'm probably making some noob mistake, but no matter what I try, I cannot seem to make the icons/drawables display at their exact dimensions. If someone can point out what I'm doing wrong, I would greatly appreciate it.

Thanks.

So I changed the XML file to try and use the TableLayout as follows:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    >

    <TableRow>
            <LinearLayout
              xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
                android:paddingTop="0px">

            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <ImageView
                android:src="@drawable/water2"
                android:scaleType="fitXY"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            </LinearLayout>
    </TableRow>
</TableLayout>

Even if I specified the exact dimensions of the ImageViews, they still got stretched such that only about 5 or so icons were displayed.

Answer 1

Im not sure if im right, but 2 ideas came to my head when i read your question.

You probably tried the first one.. If the icons already have the dimension you want, dont add the layout_width and height to the XML (Anyway, it doesnt really make sense, because the icons fits perfectly in your ImageView's).

The second one, is about the pixel's unit. I've read recently that using px as unit of measure is not a recommended practice on Android. Instead of px, use dp (Density pixel i think) for sizes and sp (Scale pixels) for font size. Maybe the pixels sizes dont work properly on your phone :P

Hope this can help you :D

Answer 2

AbsoluteLayout is depricated. There are many better ways of accomplishing this with the use of an AbsoluteLayout.

A GridView will work well if you don't care about how many items are in each row. This is an easy way to deal with multiple screen sizes.

If you need exactly 9 in each row, you can use a TableLayout. See TableLayout tutorial for a good introduction.

Basically I would create a TableLayout with 9 rows. Each row would contain horizontal LinearLayout with 9 ImageViews.

To prevent the image from stretching, make sure you set the scaleType to fitXY and the layout_width and layout_height of the ImageViews and LinearLayouts to WRAP_CONTENT.

You also need to keep in mind the many different screen densities available on phones. A 48x48 pixel image might work ok on one density, but probably won't look good on a high density phone with a large screen size. See supporting multiple screen sizes for a good overview. Basically, you'll want to have different image resources for different screen densities.