2

I am trying to create an layout as shown in the figure. img

In that image shipped to is attached to the border of the layout. how to overlap like that.

Here is the XML I am using to create that

 <RelativeLayout
            android:id="@+id/shipped_to_header"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/address_blue_border" >

            <TextView
                android:id="@+id/tv_shipped_to"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@color/homebackground"
                android:text="Shipped To"
                android:textColor="@android:color/white" />

            <TextView
                android:id="@+id/tv_door_no"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tv_shipped_to"
                android:text="22"
                android:textColor="@android:color/black" />

            <TextView
                android:id="@+id/tv_address_line1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tv_door_no"
                android:text="Delhi, India"
                android:textColor="@android:color/black" />

            <TextView
                android:id="@+id/tv_address_line2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tv_address_line1"
                android:text="Swindon Senegal BS32 8FE"
                android:textColor="@android:color/black" />
        </RelativeLayout>
sachi
  • 2,122
  • 7
  • 30
  • 46

4 Answers4

3

Try this

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



        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="8dp"
            android:background="@android:color/holo_blue_bright"
            android:orientation="vertical"
            android:padding="10dp" >

            <TextView
                android:id="@+id/tv_door_no"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="22" />

            <TextView
                android:id="@+id/tv_address_line1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Delhi" />

            <TextView
                android:id="@+id/tv_address_line2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Some more dara" />
        </LinearLayout>

          <TextView
            android:id="@+id/tv_shipped_to"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:text="Ship To"
            android:background="@android:color/holo_blue_dark"
            android:layout_marginLeft="15dp"
             />
    </RelativeLayout>
Arun C
  • 9,035
  • 2
  • 28
  • 42
1

Your image is a bit toooo small. Anyway, for that, use RelativeLayout. 

<?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:padding="0dp" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_margin="20dp"
        android:background="#ccff00"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <!-- Your other TextViews -->
        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </LinearLayout>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/linearLayout1"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:background="#ccffff"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>
meborda
  • 391
  • 3
  • 9
  • I used but I can't able to get it like that – sachi Aug 05 '13 at 07:17
  • updated my answer. you can make something like that. For the border, you create a separate drawable for that. Using Shapes with and tags. – meborda Aug 05 '13 at 07:23
  • Ok. let me try that. Thanks. – sachi Aug 05 '13 at 07:24
  • PS: place that inside a Relative Layout and you may also replace the Linear Layout with any layout you want then put your contents there.. :) --Already updated it with the relative layout container – meborda Aug 05 '13 at 07:29
1
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:background="@android:color/white">

    <!--  This is the main content -->
    <RelativeLayout
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:layout_margin="15dp" android:background="@drawable/frame"
        android:orientation="vertical" android:padding="20dp">

        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="Main Content" android:layout_centerInParent="true" />

    </RelativeLayout>

    <!--  This is the title label -->
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:background="@android:color/white" android:padding="5dp"
        android:text="Testing"
        android:layout_marginLeft="30dp" android:textColor="@android:color/black" />

</RelativeLayout>

You can have your answer at here and here

Community
  • 1
  • 1
Sieryuu
  • 1,510
  • 2
  • 16
  • 41
1

To obtain a layout similar to the one it's in the image you have to use command android:layout_margin with negative values.

Here is an example:

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

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="fill_parent"
        android:layout_height="70dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="TextView" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:text="TextView" />

    </RelativeLayout>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/relativeLayout1"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="-10dp"
        android:text="TextView" />

</RelativeLayout>
Roberto Lombardini
  • 616
  • 8
  • 21