Question

I’m creating an App Widget, and I’m having a strange issue. In the Eclipse graphical layout editor, my widget’s layout looks like this:

However, when I install it on an emulator/my phone, it looks like this:

And here is the layout code in question:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:layout_gravity="center_horizontal" android:gravity="center_horizontal">
    <RelativeLayout android:background="@drawable/blackbg"
        android:layout_width="290dp" android:layout_height="145dp">
        <ImageView android:layout_width="wrap_content" android:src="@drawable/clock_colon"
            android:layout_height="107dp" android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp" android:layout_marginTop="5dp"
            android:layout_centerInParent="true" android:id="@+id/colon" />
        <ImageView android:layout_width="wrap_content" android:src="@drawable/num_0"
            android:layout_height="107dp" android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp" android:id="@+id/hour2"
            android:layout_toLeftOf="@id/colon" android:layout_centerVertical="true" />
        <ImageView android:layout_width="wrap_content" android:src="@drawable/num_1"
            android:layout_height="107dp" android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp" android:id="@+id/hour1"
            android:layout_marginTop="5dp" android:layout_toLeftOf="@id/hour2"
            android:layout_centerVertical="true" />
        <ImageView android:layout_width="wrap_content" android:src="@drawable/num_3"
            android:layout_height="107dp" android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp" android:id="@+id/minute1"
            android:layout_marginTop="5dp" android:layout_toRightOf="@id/colon"
            android:layout_centerVertical="true" />
        <ImageView android:layout_width="wrap_content" android:src="@drawable/num_2"
            android:layout_height="107dp" android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp" android:id="@+id/minute2"
            android:layout_marginTop="5dp" android:layout_toRightOf="@id/minute1"
            android:layout_centerVertical="true" />
        <ImageView android:layout_width="wrap_content" android:src="@drawable/clock_pm"
            android:layout_height="wrap_content" android:id="@+id/clock_ampm"
            android:layout_below="@id/minute2" android:layout_alignParentRight="true"
            android:layout_marginRight="15dp" android:layout_marginBottom="5dp" />
    </RelativeLayout>
</LinearLayout>

So what do you think? How come the numbers are getting cut off and spaced strangely like this. Thanks!

Answer 1

You are setting manually the height of your RelativeLayout and the height of your ImageViews to 107dp and your images may not fit properly inside your ImageView. So you should consider the following:

• Supporting Multiple Screens Resources
• Setting the scale of your ImageView to android:scaleType:centerInside
• You should also consider using wrap_content for your layout height and width instead of manually setting the dimensions in dp
• You can also try the attribute android:adjustViewBounds="true" for your ImageViews if they still don’t get displayed correctly