How to Enclose Multiple Android Widgets in a Rectangle

Don't Be a Square

Under the heading of giving credit where credit is due (but isn't it usually a debt that is due, not credit?), I got this tip from a cat here and over here, too (actually, he's probably not literally a (feline) cat, but who knows for sure?!?).

This is how my Layout looked prior to incorporating his expertise:

...and here's what it looks like now:

Wrangle That Rectangle

Here's what you need to do in order to wrap widgets in a box, or frame:

0. In Droidio, right-click your project's "res" folder and, if you have no "drawable" directory, select New > Directory and create it.
1. Right-click the "drawable" directory and select New > Drawable Resource File
2. Give it a name, such as "Rumpelstiltskin", "Tiglath-Pileser", or "Tigger: T-i-doubleGuh-Er" OR, if you are an old fuddy-duddy like me, just give it a boring old descriptive name such as "box" or "orangeframe" or whatever seems sensible.
3. Paste XML like the following over the default XML provided:
   XML

   <?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>

   This will create a black box that can be used.

   Alternatively, you could create an orange frame without padding that will thus wrap tightly around whatever widgets you want it to decorate, such as this:

   XML

   <?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>

   An Activity that uses the orange frame around EditTexts looks like so:

   
4. Finally, add the following code to your Layout file:
   XML

   <LinearLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:background="@drawable/box"
           android:orientation="horizontal">
   </LinearLayout>

   Note: Depending on the particular effect you need, you may have to change the orientation from horizontal to vertical.

5. Between the right angle bracket and the closing LinearLayout element, cut-and-paste the widgets you want to be enclosed. In context, here is an example that uses the black box:
   XML

   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@drawable/box"
       android:orientation="vertical">
   
       <TextView
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:padding="5dip"
           android:text="@string/select_your_printer"
           android:textAppearance="?android:attr/textAppearanceMedium" />
   
       <CheckBox
           android:id="@+id/ckbxNoPrinter"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:text="@string/no_printer" />
   
       <CheckBox
           android:id="@+id/ckbxZebraQL220"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:checked="true"
           android:text="@string/zebra_ql220" />
   </LinearLayout>
   

   As you can tell, this encloses a TextView widget and two CheckBox widgets in the black box; the visual effect of this is seen in the first screen shot above.

Waterloo and More Mild Monkeys

By changing the padding values (or removing them entirely, as is the case with orangeframe) and the color value, you can have all kinds of fun (possibly even more than a barrel of monkeys), win friends, influence people, and all your wildest and mildest dreams will come true to boot (Vote for Pedro!).

This just scratches the surface of the havoc you can wreak ... I mean, the wonderful things you can accomplish ... with drawables in Droidio.