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?

Pamplona

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.

Crossbar

Sorry, I should have said that I tried dip, but then the buttons didn't show. I'll add that to the OP. I'll also add the fact that I'm using drawables instead of the standard buttons. – Pamplona

If your buttons are actual images then create 3 different versions and place them in the res/drawable-ldpi, res/drawable-mdpi, res/drawable-hdpi folders. Why are you specifying a pixel size at all? – Crossbar

I am making this for all versions of android and at the moment the drawables are only in the "drawable" folder. I am running it on the 1.5 emulator also. I am only specifying the pixel size because it is the only way the buttons actually show up. With the table they show, but don't unselect, and any other way they just don't show up at all. Just a big black space where they should be. – Pamplona

I'm unsure then what the solution may be at this point. I can't test this right now. The buttons do need to be in a RadioGroup, however, to operate properly. It may be that you need to use a StateListDrawable. developer.android.com/reference/android/graphics/drawable/… Here is an example of someone doing something similar, but slightly different: heliodorj.blogspot.com/2009/04/… – Crossbar

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.

Recede