Question

I have two custom RadioButtons side by side that fill the width of the screen. I want to have text and an image to the right of the text, centered in the button.

drawableRight draws the image way off to the right of the button, not near the text. I can’t use drawableEnd because I don’t have Android 4.0

I’ve tried using a Spannable, but the problem with that is that the image is bigger than the text. I don’t want it aligned with the bottom or baseline of the text; I want it to be centered in the button on its own.

The best solution I’ve found is making a clickable RelativeLayout with a TextView and ImageView centered in it. This makes the button look the way I want it to, but it seems like a lot of work to do that, and to program each RelativeLayout to act like a RadioButton in a RadioGroup.

Is there an easier way, or something that I’m missing? Or should I keep my RelativeLayout idea? Here’s my xml for this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <RelativeLayout
        android:id="@+id/first_relativelayout"
        android:clickable="true"
        android:background="@drawable/radio_button"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">
        <TextView
            android:id="@+id/first_textview"
            android:text="@string/first_radiobutton_label"
            android:textAppearance="?android:attr/textAppearanceButton"
            android:textColor="@android:color/white"
            android:layout_centerVertical="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></TextView>
        <ImageView
            android:contentDescription="@string/image_description"
            android:id="@+id/first_imageview"
            android:layout_centerVertical="true"
            android:src="@drawable/it"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/first_textview">
        </ImageView>
    </RelativeLayout>

     <RelativeLayout
        android:id="@+id/second_relativelayout"
        android:clickable="true"
        android:background="@drawable/radio_button"
        android:layout_weight="1"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">
        <TextView
            android:id="@+id/second_textview"
            android:text="@string/second_radiobutton_label"
            android:textAppearance="?android:attr/textAppearanceButton"
            android:textColor="@android:color/white"
            android:layout_centerVertical="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></TextView>
        <ImageView
            android:contentDescription="@string/image_description"
            android:id="@+id/second_imageview"
            android:layout_centerVertical="true"
            android:src="@drawable/it"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/second_textview">
        </ImageView>
</RelativeLayout>
</LinearLayout>

Answer 1

I kept going with the RelativeLayout solution. It takes more work than it seems should be worth it, but it works perfectly.