How to restructure the layout to make it better?

Question

In my app, I have a form where a user enters his/her name and address details. I have created the layout file as shown in the Image. It looks pretty ok but I want it to look better and moreover when the values in the fields city, state, postcode and country get overlapped with each other if the values are long enough.

I have been trying to make the layout better, but now I need some assistance as I do not have much experience in Android programming/ designing. I have attached images to understand better

How it looks without values Explanation of Layouts involved The values being overlapped in city and state

Here is the XML file for the layout:

<?xml version="1.0" encoding="utf-8"?>

<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_alignLeft="@+id/edt_rec_name"
        android:layout_alignRight="@+id/edt_rec_name" android:layout_below="@+id/edt_rec_name"
        android:layout_marginTop="15dp" 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_above="@+id/addr_layout" android:layout_alignLeft="@+id/edt_rec_addr1"
        android:layout_alignRight="@+id/edt_rec_addr1"
        android:layout_marginBottom="17dp" 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" />



    <RelativeLayout android:id="@+id/addr_layout"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/edt_rec_addr2"
        android:layout_alignParentBottom="true" android:layout_alignRight="@+id/edt_rec_addr2"
        android:layout_marginBottom="16dp" android:background="@drawable/border_email">

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

        <EditText android:id="@+id/edt_rec_state"
            android:layout_width="125dp" android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/edt_rec_city" android:ems="10"
            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="125dp" android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/edt_rec_state" android:ems="10"
            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="125dp" android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true" android:ems="10"
            android:focusable="false" android:hint="@string/country_hint"
            android:inputType="text" android:padding="6dp" android:textColor="#FFFFFF"
            android:textColorHint="#FFFFFF" />


    </RelativeLayout>


</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>

I just made some changes which doesn't make the text in each Editext overlap, but I have had to assign fixed width for Editexts in addr_layout. I'm not sure if it's good to do that. Also how can I space the 4 edittexts equally within the relativelayout?

Hamid Shatu · Answer 1 · 2014-02-11T04:57:20.570

Replace the RelativeLayout which id is android:id="@+id/addr_layout" with LinearLayout and set the orientation of that LinearLayout as horizontal

android:orientation="horizontal"

Update:

Replace the following xml portion into your original xml...

<RelativeLayout
    android:id="@+id/addr_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/edt_rec_addr2"
    android:layout_alignParentBottom="true"
    android:layout_alignRight="@+id/edt_rec_addr2"
    android:layout_marginBottom="16dp"
    android:background="@drawable/border_email" >

    <EditText
        android:id="@+id/edt_rec_city"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/edt_rec_city"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="86dp"
        android:ems="10"
        android:hint="@string/state_hint"
        android:inputType="text"
        android:padding="6dp"
        android:textColor="#FFFFFF"
        android:textColorHint="#FFFFFF" />

    <EditText
        android:id="@+id/edt_rec_ctry"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/edt_rec_state"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:ems="10"
        android:focusable="false"
        android:hint="@string/country_hint"
        android:inputType="text"
        android:padding="6dp"
        android:textColor="#FFFFFF"
        android:textColorHint="#FFFFFF" />

    <EditText
        android:id="@+id/edt_rec_postcode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/edt_rec_ctry"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="92dp"
        android:ems="10"
        android:hint="@string/postcode_hint"
        android:inputType="number"
        android:padding="6dp"
        android:textColor="#FFFFFF"
        android:textColorHint="#FFFFFF" />
</RelativeLayout>

How do I fit the EditTexts for city, state, pocode, and country to sit beside one another. When I use linearlayout I have to assign fixed width for them. But still country is lying outside and is not visible in the graphical layout of Eclipse — user2688158, Feb 11 '14 at 03:52
Forget about the **LinearLayout**. Since you are using **RelativeLayout** then you can use **android:layout_toRightOf** attribute, so that the fields don't overlap each other. — Hamid Shatu, Feb 11 '14 at 04:05
I made the changes, now they don't overlap with each other. But I have had to assign a fixed width to each one of them. I'm not sure if it is good and will be consistent on various devices. Also how to space the 4 editexts equally? — user2688158, Feb 11 '14 at 04:17
In **LinearLayout**, it is easier to space the 4 editexts equally. So first of all, I have to know in which way you solve the previous problem. — Hamid Shatu, Feb 11 '14 at 04:27
From your update what I understand is that your are nor clear what I'm saying...so please see my updated answer. — Hamid Shatu, Feb 11 '14 at 04:55

score 1 · Answer 2 · answered Feb 11 '14 at 04:15

// try this way
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:background="@drawable/top_bar">

            <ImageButton android:id="@id/btn_cancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/content"
                android:src="@drawable/icon_cancel_iphone" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="right|center_vertical"
                android:layout_marginLeft="5dp"
                android:layout_weight="1">
                <TextView android:id="@+id/txt_recipient"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_recipient"
                    android:textColor="#FFFFFF"
                    android:textSize="16sp" />

                <Button android:id="@+id/btn_contacts"
                    style="?android:attr/buttonStyleSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:text="@string/addr_book" />
            </LinearLayout>
            <ImageButton android:id="@id/btn_save"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:contentDescription="@string/content"
                android:src="@drawable/icon_save_iphone" />

        </LinearLayout>

        <EditText android:id="@+id/edt_rec_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            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_marginTop="10dp"
            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_marginTop="10dp"
            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:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp">
            <EditText android:id="@+id/edt_rec_city"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                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_weight="1"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="@string/state_hint"
                android:inputType="text"
                android:layout_marginRight="5dp"
                android:gravity="center"
                android:padding="6dp"
                android:textColor="#FFFFFF"
                android:textColorHint="#FFFFFF" />


            <EditText android:id="@+id/edt_rec_ctry"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:ems="10"
                android:focusable="false"
                android:layout_marginRight="5dp"
                android:gravity="center"
                android:hint="@string/country_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_weight="1"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="@string/postcode_hint"
                android:inputType="number"
                android:layout_marginRight="5dp"
                android:gravity="center"
                android:padding="6dp"
                android:textColor="#FFFFFF"
                android:textColorHint="#FFFFFF" />
        </LinearLayout>
    </LinearLayout>
</ScrollView>

Isn't using many linearlayouts more expensive than RelativeLayout? Also why is ScrollView required? — user2688158, Feb 11 '14 at 04:49
Nop!!! LinearLayout easly handle your requirement and i put as ScrollView as parent becz if any smaller device your layout working as properly .... — Haresh Chhelana, Feb 11 '14 at 06:22

Kaushik · Answer 3 · 2014-02-11T04:57:54.033

instead of lower Relative Layout u can use Linear Layout(Horizontal) with android:weight attribute for each EditText if u give same weight for each child those child will occupy same space from parent layout

code sample

<LinearLayout 
        android:id="@+id/addr_layout"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/edt_rec_addr2"
        android:layout_alignParentBottom="true"                 
        android:orientation="horizontal"
        android:layout_alignRight="@+id/edt_rec_addr2"
        android:layout_marginBottom="16dp" 
        android:background="@drawable/border_email">

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

        <EditText android:id="@+id/edt_rec_state"
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"
            android:ems="10"
            android:weight="1"
            android:hint="@string/state_hint" 
            android:inputType="text"
            android:padding="6dp" 
            android:textColor="#FFFFFF"
            android:textColorHint="#FFFFFF"
            android:layout_marginLeft="10dp" />

        <EditText android:id="@+id/edt_rec_postcode"
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"
            android:weight="1" 
            android:ems="10"
            android:hint="@string/postcode_hint" 
            android:inputType="number"
            android:padding="6dp" 
            android:textColor="#FFFFFF"
            android:textColorHint="#FFFFFF"
            android:layout_marginLeft="10dp" />


        <EditText android:id="@+id/edt_rec_ctry"
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:weight="1" 
            android:ems="10"
            android:focusable="false" 
            android:hint="@string/country_hint"
            android:inputType="text" 
            android:padding="6dp" 
            android:textColor="#FFFFFF"
            android:textColorHint="#FFFFFF" />


</LinearLayout>

How to restructure the layout to make it better?

3 Answers3