Android View Custom Border

Android View Custom Border

In our one android app we need to create a view with bottom border. I want to share how to achieve the same scenario for your app.
 

Below is the final output which we are going to achieve in this article.

 

 


For the demonstration we are using six linear layout. We are going to define different border for each layout. We are going add Top, Bottom, Left, Right, Top Bottom, and Left Right for each layout.

Below is our code to add six layout in our main activity lacyout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.vlemonn.blog.customborder.MainActivity"
    android:orientation="vertical"
    android:weightSum="6"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1"
        android:background="@drawable/bottom_border_layout"
        android:layout_margin="5dp"
        >

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1"
        android:background="@drawable/left_border_layout"
        android:layout_margin="5dp"
        >

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1"
        android:background="@drawable/left_right_border_layout"
        android:layout_margin="5dp">

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1"
        android:background="@drawable/right_border_layout"
        android:layout_margin="5dp">

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1"
        android:background="@drawable/top_border_layout"
        android:layout_margin="5dp">

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1"
        android:background="@drawable/top_bottom_border_layout"
        android:layout_margin="5dp">

    </LinearLayout>



</LinearLayout>



Now it's time to create six different layout draw-able files. Below is the code for six drawable files

top_border_layout.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>

    <item  android:top="5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

</layer-list>



bottom_border_layout.xml
 

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>

    <item  android:bottom="5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

</layer-list>


left_border_layout.xml
 

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>

    <item  android:left="5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

</layer-list>


right_border_layout.xml
 

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>

    <item  android:right="5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

</layer-list>


top_bottom_border_layout.xml
 

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>

    <item  android:bottom="5dp" android:top="5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

</layer-list>


left_right_border_layout.xml
 

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>

    <item  android:right="5dp" android:left="5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

</layer-list>


If read my other article How to add borders then you can ask me why not we used stroke here? For the time being i am not going to answer this question. Feel free to answer the same using comment section.

Last thing our drawable files are ready now we need to apply the same to our layouts.Below is the modified code for our layout_mainactivity.xml file we added background attribute for the six layouts which we created previously.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.vlemonn.blog.customborder.MainActivity"
    android:orientation="vertical"
    android:weightSum="6"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1"
        android:background="@drawable/bottom_border_layout"
        android:layout_margin="5dp"
        >

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1"
        android:background="@drawable/left_border_layout"
        android:layout_margin="5dp"
        >

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1"
        android:background="@drawable/left_right_border_layout"
        android:layout_margin="5dp">

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1"
        android:background="@drawable/right_border_layout"
        android:layout_margin="5dp">

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1"
        android:background="@drawable/top_border_layout"
        android:layout_margin="5dp">

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp" android:layout_weight="1"
        android:background="@drawable/top_bottom_border_layout"
        android:layout_margin="5dp">

    </LinearLayout>



</LinearLayout>


Finally it's time to run our application and below is the output for the same.
 

 

 


Exercise:
You can try to play with different value for different top,bottom,right and left attributes for different border behaviours. For example if you want thick border at bottom and thin border at top change its values.

0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share