Click here to Skip to main content
Click here to Skip to main content

How to Add Borders to Android Widgets

, 30 May 2014
Rate this:
Please Sign up or sign in to vote.
Add borders to Android widgets, such as EditTexts, to "set them off/apart"

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).

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

B. Clay Shannon
Publisher "Found in the Translation"
United States United States
I am the entire team at "Found in the Translation," which produces multilingual books (paperback and Kindle versions) such as "Don Quixote: In Spanish and English, Paragraph-by-Paragraph" among many others (English paired with not only Spanish, but also French and even Finnish). You can see all those books here: http://jsfiddle.net/clayshannon/pRgQL/75/
 
Personal web sites that I have created can be seen at http://usamaporama.azurewebsites.net and http://bigsurgarrapata.azurewebsites.net/ and http://www.awardwinnersonly.com
 
Peripatetic and picaresque, I have lived in eight states; specifically, besides my native California (where I was born and where I now again reside) in chronological order: New York, Montana, Alaska, Oklahoma, Wisconsin, Idaho, and Missouri.
 
I am also a writer of both fiction (for which I use a nom de plume, "Blackbird Crow Raven", as a nod to my Native American heritage - I am "½ Cowboy, ½ Indian") and nonfiction: http://www.lulu.com/spotlight/blackbirdcraven
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web01 | 2.8.140827.1 | Last Updated 31 May 2014
Article Copyright 2014 by B. Clay Shannon
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid