How do I put a border around an Android textview?
You can set a shape drawable (a rectangle) as background for the view.
<TextView android:text="Some text" android:background="@drawable/back"/>
And rectangle drawable back.xml (put into res/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>
You can use @android:color/transparent
for the solid color to have a transparent background.You can also use padding to separate the text from the border.for more information see: http://developer.android.com/guide/topics/resources/drawable-resource.html
Let me summarize a few different (non-programmatic) methods.
Using a shape drawable
Save the following as an XML file in your drawable folder (for example, my_border.xml):
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <!-- View background color --> <solid android:color="@color/background_color" > </solid> <!-- View border color and width --> <stroke android:width="1dp" android:color="@color/border_color" > </stroke> <!-- The radius makes the corners rounded --> <corners android:radius="2dp" > </corners></shape>
Then just set it as the background to your TextView:
<TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/my_border" />
More help:
Using a 9-patch
A 9-patch is a stretchable background image. If you make an image with a border then it will give your TextView a border. All you need to do is make the image and then set it to the background in your TextView.
<TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/my_ninepatch_image" />
Here are some links that will show how to make a 9-patch image:
- Draw 9-patch
- Simple Nine-patch Generator
- A simple guide to 9-patch for Android UI
- Creating & Using 9-patch images in Android
What if I just want the top border?
Using a layer-list
You can use a layer list to stack two rectangles on top of each other. By making the second rectangle just a little smaller than the first rectangle, you can make a border effect. The first (lower) rectangle is the border color and the second rectangle is the background color.
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Lower rectangle (border color) --> <item> <shape android:shape="rectangle"> <solid android:color="@color/border_color" /> </shape> </item> <!-- Upper rectangle (background color) --> <item android:top="2dp"> <shape android:shape="rectangle"> <solid android:color="@color/background_color" /> </shape> </item></layer-list>
Setting android:top="2dp"
offsets the top (makes it smaller) by 2dp. This allows the first (lower) rectangle to show through, giving a border effect. You can apply this to the TextView background the same way that the shape
drawable was done above.
Here are some more links about layer lists:
- Understanding Android's <layer-list>
- How to make bottom border in drawable shape XML selector?
- Create borders on a android view in drawable xml, on 3 sides?
Using a 9-patch
You can just make a 9-patch image with a single border. Everything else is the same as discussed above.
Using a View
This is kind of a trick but it works well if you need to add a seperator between two views or a border to a single TextView.
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/textview1" android:layout_width="match_parent" android:layout_height="wrap_content" /> <!-- This adds a border between the TextViews --> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="@android:color/black" /> <TextView android:id="@+id/textview2" android:layout_width="match_parent" android:layout_height="wrap_content" /></LinearLayout>
Here are some more links:
The simple way is to add a view for your TextView. Example for the bottom border line:
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:text="@string/title" android:id="@+id/title_label" android:gravity="center_vertical"/> <View android:layout_width="fill_parent" android:layout_height="0.2dp" android:id="@+id/separator" android:visibility="visible" android:background="@android:color/darker_gray"/></LinearLayout>
For the other direction borders, please adjust the location of the separator view.