2

I want to enclose the pair of checkboxes and the radio buttons here:

enter image description here

...in a rectangle or "bounding box" so that it look something like this:

enter image description here

...but less ugly, of course. How can I do that with the following XML as a starting point:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="hhs.app.SettingsActivity">

    <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" />

    <Space
        android:layout_width="match_parent"
        android:layout_height="5dp" />

    . . .

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/radbtnBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/using_labels_black" />

        <RadioButton
            android:id="@+id/radbtnPlain"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="@string/using_plain_labels" />
    </RadioGroup>

    <Space
        android:layout_width="match_parent"
        android:layout_height="2dp" />

    . . .
    </LinearLayout>

</LinearLayout>

?

UPDATE

I tried to apply Der Golem's suggestion, like so:

<LinearLayout 
    android:orientation="vertical"
    android:layout_width="wrap_content">
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        android:layout_width="wrap_content">
        <stroke
            android:width="4dp"
            android:color="#f000"
            android:layout_width="wrap_content" />
        <TextView
            android:text="@string/after_fetching_palabra"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            />
    </shape>
</LinearLayout>

...but that does nothing (good); the TextView is just in there as a test, starting with one simple widget to begin with.

NOTE: This is a LinearLayout within a LinearLayout. When I remove this, it's fine, but with it, the Layout won't even render.

UPATE 2

So I take it that I put the shape in a \res\drawable folder. But in Droidio, it gives me four, count 'em, four, drawable folders, namely:

drawable-hdpi
drawable-mdpi
drawable-xhdpi
drawable-xxhdpi

Do I need to put the xml in each of those folders, or can I create a "generic/default" plain old "drawable" folder and put it there?

6

1 Answer 1

3

Use a vertical LinearLayout to enclose your CheckBoxes and another one to enclose your RadioButtons and assign them an xml drawable as the background (you could alternatively use a 9 patch, if you feel more comfortable with):

The two extra LinearLayouts are children of the outer container.

/res/drawable/box.xml (self contained xml drawable):

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <stroke
        android:width="4dp"
        android:color="#f000"
    />
</shape>

For reference: http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

[EDIT]

Apply the xml drawable as a normal background:

This is just one of the two layous: the "CheckBox" one:

...

<LinearLayout 
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/box"
    >
     <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>

...

[EDIT 2]

Now a little digression.
You asked for a simple square box and nothing else, so that's what I provided.
BUT. In the link I provided is shown in details how you can (for instance) not only make the corners round, but also give your shape a different background color or even a color gradient.
Just to name some interesting properties of the Shape Drawable.

2
  • 1
    Check out my edited answer: an xml drawable is like any other drawable. The two extra LinearLayouts are children of the outer container. The shape is itself a self contained drawable in its own xml file. Commented May 21, 2014 at 16:45
  • Thanks; now I've got an Update 2 Commented May 21, 2014 at 17:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.