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:
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:
It looks like I can achieve an outline by including <stroke ... />
in shape.
To add a border to Android TextView we need to create an XML containing shape as a rectangle file under the drawable's folder and set it as background to the TextView. <stroke> tag is used to set the border width and color.
Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. In the above code we have taken one text view with background as border so we need to create a file in drawable as boarder.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With