Align Images next to RadioButtons in a RadioGroup

Question

I have the following relative layout code in my Android app:

<RadioGroup
    android:id="@+id/selectSound"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/micLevelLabel"
    android:checkedButton="@+id/radiohighpitched"
    android:layout_marginTop="71dp" >

    <RadioButton
        android:id="@+id/radiohighpitched"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="High Pitched" 
        android:textColor="@color/android:white"
        />

    <RadioButton
        android:id="@+id/radiofoghorn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fog Horn"
        android:textColor="@color/android:white"
         />

    <RadioButton
        android:id="@+id/radioalarm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Alert Tone"
        android:textColor="@color/android:white" />
</RadioGroup>



<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageButton1"
    android:layout_below="@+id/imageButton1"
    android:onClick="playTone2"
    android:src="@drawable/play_med" />

<ImageButton
    android:id="@+id/imageButton3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageButton2"
    android:layout_below="@+id/imageButton2"
    android:onClick="playTone3"
    android:src="@drawable/play_med" />

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/selectSound"
    android:layout_toRightOf="@+id/micLevelLabel"
    android:onClick="playTone1"
    android:src="@drawable/play_med" />

It produces a layout that looks like this:

It just so happens to line up correctly because of the image size of the ImageButtons. I've recently redesigned the app and the ImageButtons on the right hand side no longer line up with the RadioButtons.

Is there a more robust way to construct this layout such that the ImageButtons always align with the corresponding RadioButtons?

Answer 1

If its not mandatory, to use ImageButton, you can go with this approach.

What I did was:

Simply used a drawableight for all RadioButton as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RadioGroup
        android:id="@+id/rgroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <RadioButton
            android:id="@+id/rd1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableRight="@drawable/ic_launcher"
            android:text="@string/high" />

        <RadioButton
            android:id="@+id/rd2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableRight="@drawable/ic_launcher"
            android:text="@string/med" />

        <RadioButton
            android:id="@+id/rd3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableRight="@drawable/ic_launcher"
            android:text="@string/low" />
    </RadioGroup>

</LinearLayout>

Output:

And for their click event, you can get a hint from this question

Hope this helps.