Click here to Skip to main content
Click here to Skip to main content
Go to top

How to Enclose Multiple Android Widgets in a Rectangle

, 21 May 2014
Rate this:
Please Sign up or sign in to 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:

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

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

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

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/
 
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
Web02 | 2.8.140916.1 | Last Updated 22 May 2014
Article Copyright 2014 by B. Clay Shannon
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid