Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Mobile / Android

How to Enclose Multiple Android Widgets in a Rectangle

5.00/5 (1 vote)
21 May 2014CPOL2 min read 10.4K  
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:

Image 1

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

Image 2

Wrangle That Rectangle

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

  1. In Droidio, right-click your project's "res" folder and, if you have no "drawable" directory, select New > Directory and create it.
  2. Right-click the "drawable" directory and select New > Drawable Resource File
  3. 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.
  4. 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:

    Image 3
  5. 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.

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

License

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