How to Add Borders to Android Widgets

From Plain to Fancy

Out of the gate, certain Android Widgets, such as the EditText, are plainer than Plain Jane ever dreamed of being. Don't believe me? Check this out:

In case you can't see it, it's that light-grey smudge that looks like an elongated staple (remember staples?); it's better camouflaged than Ted Nugent in the woods of Escanaba!

Let the Beaudaciousness Commence Apace

Without further ado or adon't, here are the steps necessary to apply some beaudacious styling to your widgets:

Locate the following folder (create if necessary) in your Android IDE (recommendably Droidio):

[appName]\app\src\main\res\drawable

Select that ("drawable") folder, right-click, and select "New > Drawable Resource File" to create an .xml file that will serve as a background.

Name the file "box" (or "Bachs" or whatever).

Replace the default placeholder XML with the following:

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

Do the same thing, but this time name it "greyframe" (or "grayframe" or whatever) and give it this content:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <stroke
        android:width="2dp"
        android:color="#5C5858" />
</shape>

Finally, same thing, but with the name "orangeframe" (or "orangutanframe" or whatever) and this content:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <stroke
        android:width="2dp"
        android:color="#EE9A00"
        />
</shape>

Add as many other background drawables you might want; for various color values, you can reference this site.

Doubtless you can come up with some derivations that will make for even better looking frames, such as rounded corners, or gradient colors, or such. If you do, please share!

Incorporate Those Drawables

When you were in the third grade, you probably never imagined you would ever incorporate drawables (or want to), but here's how to do that:

In your layout files (in [appName]\app\src\main\res\layout), assign the following property to a widget:

android:background="@drawable/orangeframe"

In context, for an EditText widget:

<EditText
    android:id="@+id/editTextQty"
    android:layout_width="0dip"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@drawable/orangeframe" />

...and voila! It will look like this:

I'm Struttin' My Stuff, Y'All!

With widgets this wonderful, you can hold your head high, swing your hips, and commence movin' to the groovin' (some people are easily amused).