How can I set the width of radio buttons to change with regards to screen size? (android)

Question

I have these radio buttons and they need android:width="X" and android:height"X" however, I do not know how to set these properties so that they adapt to a different screen size.

Here is the code I'm using for my buttons:

    <RadioGroup android:layout_width="fill_parent"
        android:layout_height="50px" android:orientation="horizontal"
        android:checkedButton="@+id/first" android:id="@+id/states">

                <RadioButton android:id="@+id/first"
                    android:background="@drawable/button_radio" android:width="50px"
                    android:height="50px" />

                <RadioButton android:id="@+id/second"
                    android:background="@drawable/button_radio" android:width="50px"
                    android:height="50px" />

                <RadioButton android:id="@+id/third"
                    android:background="@drawable/button_radio" android:width="50px"
                    android:height="50px" />

                <RadioButton android:id="@+id/fourth"
                    android:background="@drawable/button_radio" android:width="50px"
                    android:height="50px" />

                <RadioButton android:id="@+id/fifth"
                    android:background="@drawable/button_radio" android:width="50px"
                    android:height="50px" />

    </RadioGroup>

I have tried putting the Radio buttons in a table row, but then they don't operate properly. When I click one, it selected it, but didn't unselect it when I clicked another.

I have tried replacing the android:width with android:layout_width but then they don't show.

I have also tried using dip, but then the buttons didn't show up.

I should also add that I am using drawables instead of the stock radio buttons. I don't know if this would make a difference, but the drawables are all the same size (50px x 50px).

Does anyone know how I can set the height and width of these so they will adjust themselves to different screen sizes?

Answer 1

Set the height and width using dp instead of px. See the answer to this post for more information on the units. What is the difference between "px", "dp", "dip" and "sp" on Android?

I would also suggest you familiarize yourself with android's documentation on supporting multiple screens.

Okay, so I've taken a moment to whip up a quick example targeted at Android 1.5.

You can find the source here.

In short, you need to take the following steps:

Place your images in res/drawable. You should have at least 4 icons: Pressed & Unchecked, Pressed & Checked, Not Pressed & Unchecked, Not Pressed & Checked

Create a selector type layout in res/drawable. Here is mine:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:state_pressed="false"
     android:drawable="@drawable/radio_on"/>
  <item android:state_checked="false" android:state_pressed="false"
     android:drawable="@drawable/radio_off"/>
  <item android:state_checked="true" android:state_pressed="true"
     android:drawable="@drawable/radio_on_pressed"/>
  <item android:state_checked="false" android:state_pressed="true"
     android:drawable="@drawable/radio_off_pressed"/>
</selector>

Then set-up your RadioGroup like so:

<RadioGroup android:layout_width="fill_parent"
   android:layout_height="50dp"
   android:orientation="horizontal"
   android:checkedButton="@+id/first">
   <RadioButton android:id="@+id/first"
      android:width="50dp"
      android:height="50dp"
      android:button="@drawable/button_radio"/>
   <RadioButton android:id="@+id/second"
      android:width="50dp"
      android:height="50dp"
      android:button="@drawable/button_radio"/>
   <RadioButton android:id="@+id/third"
      android:width="50dp"
      android:height="50dp"
      android:button="@drawable/button_radio"/>
   <RadioButton android:id="@+id/fourth"
      android:width="50dp"
      android:height="50dp"
      android:button="@drawable/button_radio"/>
</RadioGroup>

I have specified dimension of 50dp as the dimension of my drawables are 50px x 50px. Also notice I am setting android:button and not android:background.

Here is a signed APK of the project above: Custom RadioButton (Note: it is targeted to SDK version 4 so it wouldn't request SD and Phone permissions)

This should give the following result:

Hope this helps.

Answer 2

I would suggest you to try the following with your radioGroup :

            <RadioButton android:id="@+id/first"
                android:background="@drawable/button_radio" 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:weight=1 />

            <RadioButton android:id="@+id/second"
                android:background="@drawable/button_radio"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:weight=1 />

            <RadioButton android:id="@+id/third"
                android:background="@drawable/button_radio" 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:weight=1 />

            <RadioButton android:id="@+id/fourth"
                android:background="@drawable/button_radio"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:weight=1 />

            <RadioButton android:id="@+id/fifth"
                android:background="@drawable/button_radio"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:weight=1 />

</RadioGroup>

This way all of your radio buttons will occupy equal space. Moreover, it will change as per the screen size.