Search code examples
androidandroid-layoutandroid-relativelayout

How to draw vertical separation line between two text line android?


I am using two horizontal view line(id is view2 and view 3) between top and bottom of relative layout. How to place view line vertical in between two text. Here is code and screenshot of expected output.

<?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/delivery_address"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/address_layout"
    android:layout_margin="10dp"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/delivery_phone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/delivery_country"
        android:layout_marginLeft="7dp"
        bold=""
        android:paddingLeft="6dp"
        android:paddingTop="5dp"
        android:text="Phone: 12345678
        android:textStyle=" />
</RelativeLayout>

<View
    android:id="@+id/view2"
    android:layout_width="wrap_content"
    android:layout_height="1dp"
    android:layout_below="@+id/delivery_address"
    android:layout_centerVertical="true"
    android:background="#cfcfcf" />

<RelativeLayout
    android:id="@+id/delivery_edit_delete_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/view2"
    android:layout_margin="8dp"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/delivery_edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="7dp"
        android:drawableLeft="@drawable/delivery_edit"
        android:drawablePadding="5dp"
        android:paddingLeft="20dp"
        android:text="Edit"
        android:textColor="#555555" />

    <TextView
        android:id="@+id/delivery_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="7dp"
        android:layout_toLeftOf="@+id/delivery_edit"
        android:drawableLeft="@drawable/delivery_delete"
        android:drawablePadding="5dp"
        android:paddingRight="20dp"
        android:text="Delete"
        android:textColor="#555555" />
</RelativeLayout>

<View
    android:id="@+id/view3"
    android:layout_width="wrap_content"
    android:layout_height="1dp"
    android:layout_below="@+id/delivery_edit_delete_layout"
    android:layout_centerVertical="true"
    android:background="#cfcfcf" />

Expected output:

enter image description here

My output is:

enter image description here


Solution

  • What I would do:

    <?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/delivery_address"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/address_layout"
        android:layout_margin="10dp"
         android:orientation="horizontal" >
    
            <TextView
            android:id="@+id/delivery_phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/delivery_country"
            android:layout_marginLeft="7dp"
            android:paddingLeft="6dp"
            android:paddingTop="5dp"
            android:text="Phone: 12345678
            android:textStyle="bold" />
        </RelativeLayout>
    
        <View
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_below="@+id/delivery_address"
        android:layout_centerVertical="true"
        android:background="#cfcfcf" />
    
        <RelativeLayout
        android:id="@+id/delivery_edit_delete_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/view2"
        android:orientation="horizontal" >
    
            <LinearLayout
            android:id="container_for_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >
    
                <TextView
                android:id="@+id/delivery_edit"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="center" (Or try android:gravity)
                android:layout_marginLeft="7dp"
                android:drawableLeft="@drawable/delivery_edit"
                android:drawablePadding="5dp"
                android:paddingLeft="20dp"
                android:text="Edit"
                android:textColor="#555555" />
    
                <View
                android:id="@+id/innerLine"
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#cfcfcf" />
    
                <TextView
                android:id="@+id/delivery_delete"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="center" (Or try android:gravity)
                android:layout_marginRight="7dp"
                android:layout_toLeftOf="@+id/delivery_edit"
                android:drawableLeft="@drawable/delivery_delete"
                android:drawablePadding="5dp"
                android:paddingRight="20dp"
                android:text="Delete"
                android:textColor="#555555" />
    
            </LinearLayout>
        </RelativeLayout>
    
        <View
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_below="@+id/delivery_edit_delete_layout"
        android:layout_centerVertical="true"
        android:background="#cfcfcf" />
    </RelativeLayout>
    

    Try using a LinearLayout because that will put it right in the middle of the two. Hope this piece of code will help! I haven't tried it yet myself so you have to test it for me!

    Edit : Updated to make them center (If both layout_gravity/gravity fails, try to use android:gravity in the LinearLayout).