CODEWITHSUNDEEP
androidandroid-layoutandroid-relativelayout
Star
Star

Reputation: 707

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

Upvotes: 3

Views: 7133

Answers (6)

Hanisha
Hanisha

Reputation: 887

Just put this code for line separator between text views.

<View
   android:layout_width="wrap_content"
   android:layout_height="1dp"
   android:background="#979797"/>

Upvotes: 1

M S Gadag
M S Gadag

Reputation: 2057

try this

enter image description here

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

        <TextView
            android:id="@+id/delivery_edit"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="7dp"
            android:layout_weight="1"
            android:background="@drawable/divider"
            android:drawableLeft="@drawable/delivery_edit"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:paddingLeft="20dp"
            android:text="Edit"
            android:textColor="#555555" />

        <TextView
            android:id="@+id/delivery_delete"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="7dp"
            android:layout_weight="1"
            android:drawableLeft="@drawable/delivery_delete"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:paddingRight="20dp"
            android:text="Delete"
            android:textColor="#555555" />
    </LinearLayout>

divider.xml in ur drawables

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item
    android:bottom="-2dp"
    android:left="-2dp"
    android:right="1dp"
    android:top="-2dp">
    <shape android:shape="rectangle" >
        <stroke
            android:width="1dp"
            android:color="#cfcfcf" />

        <solid android:color="@android:color/transparent" />

        <padding
            android:bottom="10dp"
            android:left="10dp"
            android:right="10dp"
            android:top="10dp" />
    </shape>
</item>
</layer-list>

hope it works for u...

Upvotes: 0

Jordi Sipkens
Jordi Sipkens

Reputation: 595

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).

Upvotes: 3

Zeba
Zeba

Reputation: 3051

Looking at what you wish to achieve it would be best to use weights along with linear layout.
This will ensure that your vertical separator line is placed exactly in the middle of your horizontal layout.
Here is a very good post explaining the usage of weights with linear layouts.

You can refer to this code to get an idea how you can use it for your requirements. 

     <LinearLayout
        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="0dp"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/delivery_edit"
            android:gravity="center"
            android:layout_weight="1"
            android:text="Edit"
            android:textColor="#555555" />

        <View
            android:id="@+id/verticalLine"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#cfcfcf" >
        </View>

        <TextView
            android:id="@+id/delivery_delete"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/delivery_delete"
            android:gravity="center"
            android:text="Delete"
            android:textColor="#555555" />
    </LinearLayout>

Upvotes: 1

Muhammed Refaat
Muhammed Refaat

Reputation: 9103

Your code doesn't even have a view in the middle of the RelativeLayout, so put the following view inside the relative layout delivery_edit_delete_layout after the view delivery_edit :

<View
android:id="@+id/view_separator"
android:layout_width="1dp"
android:layout_height="30dp"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:background="#cfcfcf" />

but remember that you have to provide a fixed height for that, here I specified 30dp, or at least provide a fixed height to the RelativeLayout and give this separator view a match_parent height.

Upvotes: 0

Chris
Chris

Reputation: 4593

You can draw a border around the textview. You do this by creating a border style in your drawables folder and then set the textview background to point to this sttyle:

//your textview
<TextView android:text="Hi there" android:background="@drawable/my_border/>

then your border as drawable/my_border:

//you can set the border colors, width, and which sides should have borders.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
  <solid android:color="#ffffff" />
  <stroke android:width="1dip" android:color="#e2e2e2"/>
</shape>

if you only want a border on one/specific sides you can do this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    //this is your textview main background
    <shape android:shape="rectangle">
        <solid android:color="#ffffff" />
    </shape>
</item>
//this will then draw only left border with specified colour and width
<item android:left="1dp">
    <shape android:shape="rectangle">
        <solid android:color="#e1e1e1" />
    </shape>
</item>

Upvotes: 0

Related Questions