Radio Button Text over Button

Question

I'm trying to create a view in android that looks like:

Text

• Radio Button 1
• ...
• ...

I thought it was simple enough but at least in the layout preview and emulator I'm seeing the text for the RadioButton appear on top of the actual radio button (the circle), see the attached screen shot. I'm guessing this is something very trivial but I'm messed around with gravity and every other setting I can think of and nothing. Android 3.1 if that matters.

Here's my layout:

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

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:background="@color/white"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<TextView android:id="@+id/question_text"
    android:textColor="@color/primary_gray"
    android:layout_width="match_parent"
    android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
        android:layout_height="wrap_content"/>

<RadioGroup android:id="@+id/multiple_choice_one_answer_group"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

   <RadioButton
      android:background="@color/primary_gray"
      android:textColor="@color/black"
      android:textSize="10sp"
      android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
</RadioGroup>

</LinearLayout>

Screenshot:

Denazify

This only happens on API level < 17. On 17+ it is fixed. – Moua

See possible duplicate: #13902289 – Moua

Answer 1

The problem is setting the background. If you remove the background from the RadioButton and keep it on the RadioGroup, it has the effect you're looking for. In general, setting the background of a Button to everything removes the button look; try it on a regular Button and you'll see. This is because the background for a Button is already set to something, and you're replacing it with a flat color.

Try this instead:

<RadioGroup android:id="@+id/multiple_choice_one_answer_group"
    android:background="@color/primary_gray"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RadioButton
        android:textColor="@color/black"
        android:textSize="10sp"
        android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
</RadioGroup>

Iago

Setting the background in the java code instead of the layout solves this as well. – Moua

Answer 2

Setting the background in the java code instead of the layout solves this as well.

Moua