Vertical line with centered text

Question

I have following list_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/points_a"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="10dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/score_a"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/zero"
            android:textSize="20sp" />
    </LinearLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray"/>

    <LinearLayout
        android:id="@+id/points_b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:padding="10dp">

        <TextView
            android:id="@+id/score_b"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/zero"
            android:textSize="20sp" />
    </LinearLayout>

</LinearLayout>

Which results in this view:

But I want to have something like:

So just a text on top of the vertical border with some text in it.

I found a solution for a horizontal line, but I was not able to adopt it: Android : horizontal line with text in middle

You might have to make a nine-patch drawable that consists of the box and the vertical lines. — OneCricketeer, May 23 '17 at 17:33

rafsanahmad007 · Accepted Answer · 2017-05-23T18:03:29.457

use this code..without the Framelayout

use LinearLayout with weightsum attribute

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/border"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:weightSum="2">

    <LinearLayout
        android:id="@+id/points_a"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.9"
        android:orientation="horizontal"
        android:padding="10dp">

        <TextView
            android:id="@+id/score_a"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:text="0"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.2"
        android:orientation="vertical"
        android:paddingLeft="6dp"
        android:paddingRight="6dp"
        android:weightSum="1">

        <View
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_weight="0.20"
            android:background="@android:color/darker_gray" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.6"
            android:background="@drawable/border"
            android:gravity="center"
            android:text="0"
            android:textSize="20sp" />

        <View
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_weight="0.20"
            android:background="@android:color/darker_gray" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/points_b"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.9"
        android:orientation="horizontal"
        android:padding="10dp">

        <TextView
            android:id="@+id/score_b"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:text="0"
            android:textSize="20sp" />
    </LinearLayout>

</LinearLayout>

in res/drawable/border.xml:

    <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <stroke
        android:width="1dp"
        android:color="#000000" />
    <corners android:radius="0dp" />
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />
</shape>

OUTPUT

check the edited layout code.. i have decrease the `layout_weight` and add some padding `android:paddingLeft="6dp"` — rafsanahmad007, May 23 '17 at 18:04

score 0 · Answer 2 · answered May 23 '17 at 17:37

Modify your layout to something like that:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/points_a"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="10dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/score_a"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:text="0"
            android:textSize="20sp" />
    </LinearLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray"/>

    <LinearLayout
        android:id="@+id/points_b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:padding="10dp">

        <TextView
            android:id="@+id/score_b"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|center_horizontal"
            android:text="0"
            android:textSize="20sp" />
    </LinearLayout>

</LinearLayout>

    <TextView
        android:textSize="20sp"
        android:text="0"
        android:background="@android:drawable/btn_default"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</FrameLayout>

You can edit your Text in the middle using a shape drawable as background for the view.

<TextView android:text="Text" android:background="@drawable/border"/>

And drawable border.xml in your drawable folder:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
   <solid android:color="@android:color/white" />
   <stroke android:width="1dip" android:color="#4fa5d5"/>
</shape>

Vertical line with centered text

2 Answers2