I have a TextView that I want to add black borders along its top and bottom borders. I try to put android:drawableTop and android:drawableBottom into textview, but this will only cause the whole view to turn black.

<TextView
    android:background="@android:color/green"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:drawableTop="@android:color/black"
    android:drawableBottom="@android:color/black"
    android:text="la la la" />

Is there a way to easily add top and bottom borders to views (especially TextView) in Android?

#1 building

You can also use 9 paths to complete your work. Create it so that color pixels do not multiply at height, but only at transparent pixels.

#2 building

I used a trick to make the border appear outside the container. When using this technique, only one line is drawn, so the background of the base view is displayed.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle" >
            <stroke
                android:width="1dp"
                android:color="#FF000000" />

            <solid android:color="#00FFFFFF" />

            <padding android:left="10dp"
                android:right="10dp"
                android:top="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

</layer-list>

#3 building

Option 1: sketchable shapes

This is the simplest option if you want to use a border around a layout or view where you can set the background. Create an XML file in the drawable folder as follows:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#8fff93" />

    <stroke
        android:width="1px"
        android:color="#000" />

</shape>

If you don't want to fill in, you can delete solid. Set the background on your layout / view to be "@ drawable / your shape" drawable ".

Option 2: background view

This is a trick I use in RelativeLayout. Basically, the view that you want to provide a border has a black square under it, and then you fill that view (not margins!) , so that the black square appears at the edge.

Obviously, this works only if the view does not have a transparent area. If you can, I recommend that you write a custom BorderView that draws only borders - it should be just a few dozen lines of code.

<View
    android:id="@+id/border"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/image"
    android:layout_alignLeft="@+id/image"
    android:layout_alignRight="@+id/image"
    android:layout_alignTop="@+id/main_image"
    android:background="#000" />

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_...
    android:padding="1px"
    android:src="@drawable/..." />

If you want to know, it does work with adjustViewBounds=true. However, if you want to use a background throughout RelativeLayout, you cannot use it because there is an error that prevents you from using View to fill RelativeLayout. In this case, I recommend using Shape drawable.

Option 3: 9 pieces

The last option is to use patch 9 to draw objects as follows:

You can use it on any view where you can set android:background="@drawable /...". Yes, it does have to be 6x6 - I tried 5x5, but it didn't work.

The disadvantage of this method is that you cannot easily change the color, but if you want a nice border (for example, only the top and bottom borders, as described in this problem), you may not be able to use Shape to change it. drawable, not very powerful.

Option 4: additional comments

If you only need the borders above and below the View, I'll forget to mention this very simple option. You can place the View in a vertical LinearLayout, if not already placed, and then add empty views above and below it, as follows:

<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>

#4 building

My answer is based on the @ Emile version, but I use transparent colors instead of solid colors.
This example draws the bottom border of 2dp.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <stroke  android:width="2dp"
                     android:color="#50C0E9" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item  android:bottom="2dp" >
        <shape android:shape="rectangle" >
            <stroke  android:width="2dp"
                     android:color="@color/bgcolor" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

@color / bgcolor is the color of the background when drawing a view with a border.

If you want to change the position of the border, use one of the following to change the offset:

android:bottom="2dp"
android:top="2dp"
android:right="2dp"
android:left="2dp"

Or merge them to have 2 or more boundaries:

android:bottom="2dp" android:top="2dp"

#5 building

<TextView
    android:id="@+id/textView3"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#72cdf4"
    android:text=" aa" />

Just add this TextView below the text you want to add a border to