How to make the layout consistent in different devices

Question

I'm having a problem in the appearance of the layout in 2 different devices. I have included drawables of different sizes, but the layout looks strange in 1 device.

I have attached images to understand how the layout varies.

For HTC Sensation XE, OS 4.0.3, 4.3 inch QHD resolution the layout appears to be ok.

For Galaxy S4, OS 4.3, the last 4 EditTexts seem to be blank.

Here is the XML code for the layout:

<?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" >

<ImageView
    android:id="@id/top_bar_view"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="@drawable/top_bar"
    android:contentDescription="@string/content" />

<TextView
    android:id="@+id/txt_recipient"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="18dp"
    android:padding="8dp"
    android:text="@string/text_recipient"
    android:textColor="#FFFFFF"
    android:textSize="16sp" />

<RelativeLayout
    android:id="@+id/Rlayout_recipient"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/top_bar_view"
    android:background="@drawable/bg" >

    <EditText
        android:id="@+id/edt_rec_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="22dp"
        android:background="@drawable/border_email"
        android:ems="10"
        android:hint="@string/name_hint"
        android:inputType="text"
        android:padding="6dp"
        android:textColor="#FFFFFF"
        android:textColorHint="#FFFFFF" />

    <EditText
        android:id="@+id/edt_rec_addr1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/edt_rec_name"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/border_email"
        android:ems="10"
        android:hint="@string/addr1_hint"
        android:inputType="text"
        android:padding="6dp"
        android:textColor="#FFFFFF"
        android:textColorHint="#FFFFFF" />

    <EditText
        android:id="@+id/edt_rec_addr2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/edt_rec_addr1"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/border_email"
        android:ems="10"
        android:hint="@string/addr2_hint"
        android:inputType="text"
        android:padding="6dp"
        android:textColor="#FFFFFF"
        android:textColorHint="#FFFFFF" />

    <LinearLayout
        android:id="@+id/addr_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/edt_rec_addr2"
        android:layout_alignRight="@+id/edt_rec_addr2"
        android:layout_below="@+id/edt_rec_addr2"
        android:layout_marginTop="20dp"
        android:background="@drawable/border_email" >

        <EditText
            android:id="@+id/edt_rec_city"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:hint="@string/city_hint"
            android:inputType="text"
            android:padding="6dp"
            android:textColor="#FFFFFF"
            android:textColorHint="#FFFFFF" />

        <EditText
            android:id="@+id/edt_rec_state"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:ems="10"
            android:gravity="center"
            android:hint="@string/state_hint"
            android:inputType="text"
            android:padding="6dp"
            android:textColor="#FFFFFF"
            android:textColorHint="#FFFFFF" />

        <EditText
            android:id="@+id/edt_rec_postcode"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:ems="10"
            android:gravity="center"
            android:hint="@string/postcode_hint"
            android:inputType="number"
            android:padding="6dp"
            android:textColor="#FFFFFF"
            android:textColorHint="#FFFFFF" />

        <EditText
            android:id="@+id/edt_rec_ctry"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:ems="10"
            android:focusable="false"
            android:gravity="center"
            android:hint="@string/country_hint"
            android:inputType="text"
            android:padding="6dp"
            android:textColor="#FFFFFF"
            android:textColorHint="#FFFFFF" />
    </LinearLayout>
</RelativeLayout>

<ImageButton
    android:id="@id/btn_save"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_marginRight="14dp"
    android:contentDescription="@string/content"
    android:src="@drawable/icon_save_iphone" />

<ImageButton
    android:id="@id/btn_cancel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="16dp"
    android:contentDescription="@string/content"
    android:src="@drawable/icon_cancel_iphone" />

<Button
    android:id="@+id/btn_contacts"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/txt_recipient"
    android:layout_marginRight="23dp"
    android:layout_toLeftOf="@id/btn_save"
    android:text="@string/addr_book" />

</RelativeLayout>

Can someone please guide as I am a beginner in Android programming.

Answer 1

If you do not specify a background for the EditTexts, they will use a default from the theme. If you aren't using a Holo theme, then the device's default theme can be unpredictable, because all the device manufacturers like to reskin the default themes in various ways.

If you want them to have invisible backgrounds on all devices, set android:background="@null" or android:background="#00000000" on them.

Notice in your top pic the bottom edit texts are showing a thin underline from that device's default theme. Explicitly setting a null or invisible background will ensure that it is the same regardless of the theme. Or you can set your theme to Holo or some descendent of Holo, since it is the only theme that is guaranteed to be the same on all devices (no manufacturer reskins).

If you want to support devices older than Honeycomb, and therefore cannot use Holo on older devices, you need to specify a theme and enforce text colors and backgrounds as necessary. An easy way to do this would be to use this site to generate a theme for you, and then edit that as necessary. That will ensure all bases are covered.