How to Enclose Multiple Android Widgets in a Rectangle





5.00/5 (1 vote)
In which the user is shown how to enclose multiple 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:
- In Droidio, right-click your project's "res" folder and, if you have no "drawable" directory, select New > Directory and create it.
- Right-click the "drawable" directory and select New > Drawable Resource File
- 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.
- Paste XML like the following over the default XML provided:
<?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 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:
- Finally, add the following code to your Layout file:
<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.
- 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:<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 twoCheckBox
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.