Image overlay over relative layouts

Question

I have two relative layouts with rounded rectangular borders without any space between them . I want an image to be overlaid on the common line thus generated by the borders how can this be achieved?

Layout code :

//COde for the layout.
  <RelativeLayout
                android:id="@+id/Layout1"
                android:layout_width="300dp"
                android:layout_height="60dp"
                android:layout_below="@id/selectText"
                android:layout_marginLeft="10dp"
                android:background="@layout/rounded_border_1" >

                <TextView
                    android:id="@+id/Text1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_centerInParent="true"
                    android:layout_marginLeft="10dp"
                    android:text="@string/string1"
                    android:textColor="@color/text_color"
                    android:textSize="14sp" />

                <TextView
                    android:id="@+id/Name1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignBaseline="@id/Text1"
                    android:layout_alignParentRight="true"
                    android:layout_marginRight="20dp"
                    android:hint="@string/hint"
                    android:textColor="@color/hint_color"
                    android:textSize="14sp" />
            </RelativeLayout>

//code for the image
            <ImageButton
                android:id="@+id/image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="30dp"
                android:src="@drawable/swap"/>

//code for the layout
            <RelativeLayout
                android:id="@+id/Layout2"
                android:layout_width="300dp"
                android:layout_height="60dp"
                android:layout_below="@id/Layout1"
                android:layout_marginLeft="10dp"
                android:background="@layout/rounded_border_2" >

                <TextView
                    android:id="@+id/Text2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_centerInParent="true"
                    android:layout_marginLeft="10dp"
                    android:text="@string/string2"
                    android:textColor="@color/text_color"
                    android:textSize="14sp" />

                <TextView
                    android:id="@+id/Name2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignBaseline="@id/Text2"
                    android:layout_alignParentRight="true"
                    android:layout_marginRight="20dp"
                    android:hint="@string/hint"
                    android:textColor="@color/hint_color"
                    android:textSize="14sp" />
            </RelativeLayout>
    //Code for the border1

rounded_border_1.xml

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >

        <gradient
            android:angle="270"
            android:endColor="@color/gradient_end"
            android:startColor="@color/gradient_start" />

        <stroke
            android:width="1dp"
            android:color="@color/canvas_border" />

        <corners
            android:bottomLeftRadius="0dp"
            android:bottomRightRadius="0dp"
            android:topLeftRadius="5dp"
            android:topRightRadius="5dp" />

    </shape>

rounded_border_2.xml

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >

        <gradient
            android:angle="270"
            android:endColor="@color/gradient_end"
            android:startColor="@color/gradient_start" />

        <stroke
            android:width="1dp"
            android:color="@color/canvas_border" />

        <corners
            android:bottomLeftRadius="5dp"
            android:bottomRightRadius="5dp"
            android:topLeftRadius="0dp"
            android:topRightRadius="0dp" />

    </shape>

Answer 1

You need to embed your layout in a RelativeLayout too. I will only add the important attributes to make them easier visible:

<!-- surrounding RelativeLayout not visible -->
<RelativeLayout
    android:layout_height="120dp"
    android:layout_below="@id/selectText">
    <RelativeLayout
        android:id="@+id/Layout1"
        android:layout_width="300dp"
        android:layout_height="60dp" >
        <TextView />
        <TextView />
    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/Layout2"
        android:layout_width="300dp"
        android:layout_height="60dp"
        android:layout_below="@id/Layout1" >
        <TextView />
        <TextView />
    </RelativeLayout>
    <ImageButton
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/swap" />
</RelativeLayout>