How to size Android components according to image size using XML

Question

Hi

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

Good info

Tayfun Demirbilek