Home » Android » How to add border around Android Textview ?

How to add border around Android Textview ?

One of our android app shows lot of user information in text views one after another, to make sure this information looks good, we added a top card layout and inside that the information in text views with bottom border, so it looks good.

This post shows how you can add a border to textview, or rather any view in Android.

Create a xml file in drawable as below,

$ vim app/src/main/res/drawable/border_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item>
      <shape android:shape="rectangle">
         <solid android:color="@color/colorGray"/>
      </shape>
   </item>
   <item
      android:bottom="1dp"
      >
      <!-- adjust borders width here -->
      <shape android:shape="rectangle">
         <solid android:color="#FFFFFF" />
         <!-- background color -->
         <padding android:top="5dp" android:bottom="5dp" />
      </shape>
   </item>
</layer-list>

In the above xml, we are setting border with size 1dp, color gray and with padding of 5dp on top and bottom. As you can see from below code,

 <item
      android:bottom="1dp"
      >

We are just setting border to bottom. If you want to add border to other sides like top, left and right ( like box ) just modify this code as,

<item
      android:bottom="1dp" android:top="1dp" android:left="1dp" android:right="1dp"
      >

Now modify the layout xml to add border to views as have shown in below example of border to text view.

<TextView
    android:background="@drawable/border_bottom"
/>

You can add this border to even LinearLayout as,

<LinearLayout
    android:background="@drawable/border_bottom">

... some code here ...

</LinearLayout>

Flutter dotted border / dashed bord...
Flutter dotted border / dashed border around container

Leave a Comment