How to put a border around textview in android
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:
How to put a border around textview in android
Reviewed by Anonymous
on
February 13, 2016
Rating:
No comments: