Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 776
jbranchaud Avatar asked Mar 10 '11 01:03

jbranchaud


People also ask

How do you add a border in TextView?

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.

How do you put a border color on android?

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.


1 Answers

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> 
like image 69
Ted Hopp Avatar answered Oct 10 '22 14:10

Ted Hopp