GridView item looks fine in Eclipse but is warped on devices and emulators

Question

I've created a GridView item that consists of an ImageView with some metadata. The defined layout looks great when I preview it (Graphical Layout) in Eclipse but there is some wacky behavior when I test it on a device and my emulators.

game_photos_grid_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/game_list_item"
    android:layout_width="95dp"
    android:orientation="vertical"
    android:layout_height="105dp" >

        <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:padding="2dp"
        android:src="@drawable/ic_contact_picture" />

    <ImageView
        android:id="@+id/photos_grid_item_image"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:padding="2dp"
        android:visibility="gone"
        android:src="@drawable/ic_contact_picture" />

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="right"
        android:padding="2dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp" >

        <ImageView
            android:id="@+id/item_marker"
            android:layout_width="25dp"
            android:layout_height="60dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:src="@drawable/x_pointer" />

        <TextView
            android:id="@+id/total_rating"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:layout_alignParentBottom="true"
            android:alpha="1.0"
            android:background="#80000000"
            android:gravity="right"
            android:text="1346"
            android:textColor="#FFFFFF"
            android:textSize="25sp"
            android:textStyle="bold" />
    </RelativeLayout>
</RelativeLayout>

GridView parent

    <GridView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#00698C"
    android:gravity="center"
    android:columnWidth="95dp"
    android:horizontalSpacing="3dp"
    android:numColumns="auto_fit"
    android:stretchMode="columnWidth"
    android:verticalSpacing="3dp"
    android:visibility="visible" />

How it looks in Eclipse.

How it looks on devices / AVDs.

What's causing the view to break / warp?

Answer 1

Using specific values for width and height of Views is not a good practice, instead try to limit yourself with match_parent and wrap_content, they are just enough for almost every need. Using these constants will make sure that your layout looks as expected on every device. Hope this helps.