How to size Android components according to image size using XML

Question

I have created a custom icon bar in Android using the XML layout creator, using a RadioGroup within a LinearLayout (XML included below). Each RadioButton within the RadioGroup has a custom drawable (with checked and unchecked states) as its android:button attribute.

The Linear layout is itself within a RelativeLayout so that it can appear at an arbitrary position on the screen (as a side bar, in this instance).

The drawables are 55 pixels wide, and the android:layout\_width attribute of all these views is wrap\_content.

When I make this component visible, aligned to the bottom-left of the screen, only about three-quarters of the RadioButton image widths are visible. Setting the layout\_width of the RelativeLayout to fill\_parent rectifies this and causes the full button to appear.

However this means that the button group consumes click events across the entire width of the screen.

How can I make the entire button appear, and have only the area of the button respond to clicks? Hard-coding the width of the drawable is not a particularly desirable solution.

<RelativeLayout android:id="@+id/RelativeLayout01" android:layout_width="wrap_content" android:layout_height="wrap_content">
    <LinearLayout android:id="@+id/LinearLayout02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_below="@+id/LinearLayout01" android:visibility="invisible">
        <RadioGroup android:id="@+id/RadioGroup01" android:layout_height="wrap_content" android:checkedButton="@+id/RB01" android:layout_width="fill_parent">
            <RadioButton android:id="@+id/RB01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:button="@drawable/DR01"/>
            <RadioButton android:id="@+id/RB02" android:layout_width="fill_parent" android:layout_height="wrap_content" android:button="@drawable/DR02"/>
            <RadioButton android:id="@+id/RB03" android:layout_width="fill_parent" android:layout_height="wrap_content" android:button="@drawable/DR03"/>
            <RadioButton android:id="@+id/RB04" android:layout_width="fill_parent" android:layout_height="wrap_content" android:button="@drawable/DR04"/>
        </RadioGroup>
    </LinearLayout>
    </RelativeLayout>

Answer 1

Setting the width of the LinearLayout, RadioGroup, or RadioButton in dp's (density indpendent pixels) might work for you. Based on what youve said above I think it would have to be the Layout's width. The dimensions are "hardcoded" but they'll scale with the size of your screen.

So the xml could look like:

android:layout_width="55dp"

The official documentation for dps is here

Answer 2

I can't imagine why the other answer has 6 upvotes, it is entirely wrong

The dimensions are "hardcoded" but they'll scale with the size of your screen.

No they will scale based on the density of your screen. I dearly wish we could use percentages from XML, rather than having to code them.