How to center image and text in a RadioButton?

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>

I think it would be easier to picture what you are doing if you post your xml. — 0gravity, Aug 03 '12 at 17:27
Ok let me see if I understand: Your radio_button image has already a text, and you want to put the textview and the image view to the right of the radio_button image? — 0gravity, Aug 03 '12 at 17:48
@0gravity The code I posted is my attempt at making a button functionality using a RelativeLayout. There is no RadioButton with a text or an image. The textview and the imageview are the image and the text, and the RelativeLayout is made to look like a button by setting its background in @drawable/radio_button. — Kalina, Aug 03 '12 at 18:36
@TheBeatlemaniac. I was having a problem with the same thing. This did it for me http://stackoverflow.com/questions/3337371/androiddrawableleft-problem — Andy, Aug 05 '12 at 20:52
I'm having a a similar issue. http://stackoverflow.com/questions/36433050/making-custom-radiobutton-with-image-on-center — wviana, Apr 05 '16 at 17:23

score 0 · Accepted Answer · answered Aug 15 '12 at 14:38

0

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

answered Aug 15 '12 at 14:38

Kalina

5,504
16
64
101

How to center image and text in a RadioButton?

1 Answers1