Making layout borders with title in the top border in Android

This is a example in android for making a border for a RelativeLayout, with a title text in the center on the top border line. Something like this:

Border Title

activity_border_title_demo.xml, this is the layout xml for an activity or fragment. It has two LinearLayout views inside a RelativeLayout. The first LinearLayout for the top border with title in the center, the second LinearLayout for the topless border. Note, the first LinearLayout is not the root tag which is also a LinearLayout.

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="20dp">
        <LinearLayout
            android:id="@+id/main"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:weightSum="2">
            <View
                android:layout_width="fill_parent"
                android:layout_height="2dp"
                android:layout_weight="1"
                android:background="#2ebadc"/>
            <TextView
                android:gravity="bottom"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:text="Hello World" />
            <View
                android:layout_width="wrap_content"
                android:layout_height="2dp"
                android:layout_marginRight="5dp"
                android:background="#2ebadc"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginTop="10dp"
            android:padding="10dp"
            android:background="@drawable/topless_border">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="This is a border with title"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="The top inset of the border is set to -3 to make it disappear and then it's covered with a line with text in the middle by using LinearLayout with two Views and one TextView"/>
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

topless_border.xml, this file should defined in the drawable folder. Set this to the background of a LinearLayout or RelativeLayout, you will get borders on the left, right, and bottom but no top.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-3dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke android:width="2dp" android:color="#2ebadc" />
            <corners android:radius="1dp" />
        </shape>
    </item>
</layer-list>

Complete example in Github

Search within Codexpedia

Custom Search

Search the entire web

Custom Search