Question

So I wanted to have a TextView with a cool border around it. I couldn't find any standard way of doing it, so I came up with this:

@drawable/custom_bg_1: A blue rounded shape

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#439CC8"/>
    <corners android:radius="3dp" />
    <padding android:left="10dp" android:top="10dp"
        android:right="10dp" android:bottom="10dp" />
</shape>

@drawable/custom_bg_2: A white rounded shape

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="3dp" />
    <padding android:left="10dp" android:top="10dp"
        android:right="10dp" android:bottom="10dp" />
</shape>

myactivity.xml: the xml for the activity

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  android:padding="15dp" >

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="2dp"
    android:background="@drawable/custom_bg_1" >

      <TextView android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        android:text="@string/curr_loc"
        android:textSize="15sp"
        android:background="@drawable/custom_bg_2" />

  </LinearLayout>
</Linearlayout>

The outcome:

picture of blue border

What I am doing here is overlapping a white shape background inside a blue shape background to give the effect of a blue border. I can't imagine this is the best way to get this effect. I have seen other posts that attempt to solve this problem such as this and this, but I feel like they are just as much of a work around as my implementation.

Is there a better way or more standard way of simply putting a border around certain views such as a TextView or should I just stick with the way I am doing it?

EDIT

I changed custom_bg_2.xml to look like this:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="2dp" android:color="#000000"/>
    <corners android:radius="3dp" />
    <padding android:left="10dp" android:top="10dp"
        android:right="10dp" android:bottom="10dp" />
</shape>

And now I get this result:

blue and black border

It looks like I can achieve an outline by including <stroke ... /> in shape.

Ted Hopp · Accepted Answer · 2011-03-10 02:02:30Z

You can probably get by with just custom_bg_2 if you add a <stroke> section:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="3dp" />
    <padding android:left="10dp" android:top="10dp"
        android:right="10dp" android:bottom="10dp" />
    <stroke android:color="#439CC8" android:width="2dp" />
</shape>

Oh, nice! That seems to be exactly what I was looking for. It should be noted that when only putting <stroke/> and not <solid/>, the stroke will fill the shape, but when both are used, you get the desired result.

스마트폰앱

simpler/better way to put a border/outline around my TextView?

2 Answers