Relative layout in XML file

Question

I have the following code in my XML file:

        <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dip"
        android:layout_marginLeft="13dp"
        android:layout_marginRight="13dp"
        android:layout_marginTop="20dp"
        android:background="@color/white"
        android:orientation="vertical" >

        <RelativeLayout
            android:id="@+id/name_view"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/pic"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_marginLeft="6dp" />

            <EditText 
                android:id="@+id/name"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_alignRight="@id/pic" />          
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/phone_view"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/phone_pic"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_marginLeft="6dp"
                android:layout_weight="0.15" />

            <EditText 
                android:id="@+id/phone_number"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_alignRight="@id/phone_pic" />            
        </RelativeLayout>

    </LinearLayout> 

I want the ImageView and EditText field inside the RelativeLayout and the E EditText Field to the right of the ImageView . However, when i check the graphical layout, the EditText and ImageView are placed outside the RelativeLayout as well as the LinearLayout . What am I doing wrong and how to correct this?

Answer 1

Why don't you replace your RelativeLayout with horizontal LinearLayout

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="60dip"
    android:layout_marginLeft="13dp"
    android:layout_marginRight="13dp"
    android:layout_marginTop="20dp"
    android:background="@color/white"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/name_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/pic"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_marginLeft="6dp" />

        <EditText 
            android:id="@+id/name"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp" />          
    </LinearLayout>

    <LinearLayout
        android:id="@+id/phone_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/phone_pic"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_marginLeft="6dp"
            android:layout_weight="0.15" />

        <EditText 
            android:id="@+id/phone_number"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp" />            
    </LinearLayout>

</LinearLayout> 

Answer 2

This will help you........

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_launcher" />


    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
         android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/imageView1"
        android:ems="10" >

        <requestFocus />
    </EditText>

</RelativeLayout>

Answer 3

Try using the attribute android:layout_toRightOf

Positions the left edge of this view to the right of the given anchor view ID. Accommodates left margin of this view and right margin of anchor view.

So try this:

    <RelativeLayout
        android:id="@+id/name_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/pic"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_marginLeft="6dp" />

        <EditText 
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@+id/pic" />          
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/phone_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/phone_pic"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_marginLeft="6dp"
            android:layout_weight="0.15" />

        <EditText 
            android:id="@+id/phone_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@+id/phone_pic" />            
    </RelativeLayout>

</LinearLayout> 

---

If you want an example to understand better, here is one for you. And there is still a source code so you can test. http://www.mkyong.com/android/android-relativelayout-example/

Answer 4

You can try this piece of code

<?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="60dp"
android:layout_marginLeft="13dp"
android:layout_marginRight="13dp"
android:layout_marginTop="20dp"
android:orientation="vertical" >

<RelativeLayout
    android:id="@+id/name_view"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/pic"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_launcher" />

    <EditText
        android:id="@+id/name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_toRightOf="@id/pic" />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/phone_view"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/phone_pic"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_launcher" />

    <EditText
        android:id="@+id/phone_number"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_toRightOf="@id/phone_pic" />

</RelativeLayout>

Answer 5

As Mr. rogcg said try android:layout_toRightOf it will work. However you have to make certain changes in your Linear Layout attributes also. You have specified android:layout_height="60dip"

which is causing the consecutive relative layout to be hidden. Make it to fill parent and set layout_toRightOf. It will work.

Also for the image view assign a src as follows android:src="@drawable/someimage"

Thanks & Regards, Rajamanickem.S

Answer 6

change these line of code in your layout this is wrong

android:layout_alignRight="@id/phone_pic" 
android:layout_alignRight="@id/pic" 

write these below lines

android:layout_alignRight="@+id/phone_pic"
  android:layout_alignRight="@+id/pic"