Android widget Relative Layout

Question

I spent the last couple of days trying to make a layout.

They layout looks great on my phone with 480x800 screen, but is messed up on my phone with 540x960 screen.

I used dp expecting it would scale by density.

What is going wrong?

Here is my code for the layout xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"

  android:layout_margin="15dip"
  android:background="@drawable/gshock5">



    <TextView
        android:id="@+id/widgetday"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_marginRight="50dip"
        android:layout_marginTop="95sp"
        android:layout_centerInParent="true"
        android:text="DAY" 
        android:textColor="#003300"
        android:textAppearance="?android:attr/textAppearanceSmall" 
        android:textStyle="bold"/>


    <TextView
        android:id="@+id/widget1label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/widgetday"
        android:layout_centerHorizontal="true"
        android:clickable="true"

        android:textColor="#003300"
        android:text="Error"
        android:textAppearance="?android:attr/textAppearanceMedium" 
        android:textStyle="bold"/>

     <RelativeLayout 
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"

         android:layout_centerHorizontal="true"
         android:layout_marginTop="210dip">

         <Button android:text="Click Me!" 
        android:id="@+id/button" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"


        />


     </RelativeLayout>


</RelativeLayout>

Answer 1

Try using a linear layout. Cause when the device is changed, sure it is scaled. But, when using a relative layout, they are arranged relatively, and then scaled, which probably messed things up.

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="15dip"
    android:background="@drawable/gshock5"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/widgetday"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginRight="50dip"
        android:layout_marginTop="95dip"
        android:text="DAY"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#003300"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/widget1label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/widgetday"
        android:layout_centerHorizontal="true"
        android:clickable="true"
        android:text="Error"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#003300"
        android:textStyle="bold" />

    <Button
        android:id="@+id/button"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/widget1label"
        android:text="Click Me!" />

</RelativeLayout>

This may solve your problem. Try to use minimal layout for the UI.