Changing the position of radio button

Question

Can I change the radio button position from left to right. I mean the green selected button will be on the right and the text on its left. Is it possible? (by default button left, text right)

Answer 1

It should be possible to use getCompoundDrawables() and setCompoundDrawables() to rearrange the drawables around the text.

To go one step further, perhaps you could perhaps implement your own CheckBoxRight widget based on CheckBox which did that in the onDraw() method after calling super.onDraw().

A final alternative would be to build your own widget directly from TextView and just setCompoundDrawables() appropriately after maintaining an internal state from an onClick() event handler.

Answer 2

RadioButtons are not as flexible as you (or nearly anyone) wants. You can build your own custom widget, which can be daunting if you are unfamiliar with doing so. Or you can do my favorite work-around.

Handle RadioButtons as if they were regular buttons--do not use the RadioGroup functionality. Now you have to control the check manually. By eliminating the RadioGroup, you are free to create your layouts anyway you want.

Here is a sample xml layout which uses RadioButtons in a TableLayout that has text to the left and an image to the right of each button:

<?xml version="1.0" encoding="utf-8"?>

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

    <TableRow
        android:id="@+id/row_1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:clickable="true" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button 1" />

        <RadioButton
            android:id="@+id/rb_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="false" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pretty_pic_1" />
    </TableRow>

    <TableRow
        android:id="@+id/row_2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:clickable="true" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button 2" />

        <RadioButton
            android:id="@+id/rb_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="false" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pretty_pic_3" />
    </TableRow>

    <TableRow
        android:id="@+id/row_3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:clickable="true" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button 3" />

        <RadioButton
            android:id="@+id/rb_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="false" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pretty_pic_3" />
    </TableRow>

</TableLayout>

But you're not done yet. You must now handle your radio buttons manually. Here is how I like to do it:

class FooActivity extends Activity {
RadioButton m_rb1, m_rb2;
TableRow m_row1, m_row2;

@Override
protected void onCreate(Bundle savedInstanceState) {
    m_rb1 = (RadioButton) findViewById(R.id.rb1);
    m_rb2 = (RadioButton) findViewById(R.id.rb2);

    m_row1 = (TableRow) findViewById(R.id.row_1);
    m_row1.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
            m_rb1.setChecked(true);
            m_rb2.setChecked(false);            
        }
    });

    m_row2 = (TableRow) findViewById(R.id.row_2);
    m_row2.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
            m_rb1.setChecked(false);            
            m_rb2.setChecked(true);
        }
    });

}

}

Note that I want the user to select the RadioButton by choosing the text, the picture, or the button itself. So I made the entire TableRows the clickable object.

Hope this helps!