RadioButtons have a different style when added to a RadioGroup programmatically in Android

Question

I'm building a form in an Android app.

The form has several fields where two components are RadioGroups. The first group inclusive its buttons is completely defined in the layout file for the activity. For the second group only the RadioGroup element is defined in the layout file where as the RadioButtons get added to the group during run time.

As you can see in the image below I got some styling issues. The radio buttons in the second group look different than the buttons in the first group. The button image and the text color for the second group are different. Beside the orientation for the buttons both RadioGroups are configured with the same attributes. When I add the buttons of the second group directly in the layout file then their look as equal to the first group.

Layout file.

<RadioGroup
    android:id="@+id/radio_gender"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="4dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="4dp"
    android:orientation="horizontal">
    <RadioButton
        android:id="@+id/radio_male"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="@string/checkout_gender_male" />
    <RadioButton
        android:id="@+id/radio_female"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/checkout_gender_female" />
</RadioGroup>

...            

<RadioGroup
    android:id="@+id/radio_payment"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="4dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="4dp" >
</RadioGroup>

Code to add radio buttons.

RadioGroup paymentGroup = (RadioGroup) findViewById(R.id.radio_payment);
RadioGroup.LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);        

for (String paymentType: checkoutData.getPaymentTypes()) {
    RadioButton radioButton = new RadioButton(getBaseContext());
    radioButton.setText(paymentType);
    paymentGroup.addView(radioButton, params);
}

How do I archive the same look and feel for the buttons in group 2 by code?

UPDATE 1

I did some more testing.

I've tested in the following configurations.

• Emulator - Google Android 4.1.1: Same behavior
• Emulator - Google Android 2.3.4: Same behavior but the graphics all RadioButtons are equal,but the text color still differs. I guess that in this version of Android there is only one graphic for the button.
• Device - Nexus One - Android Cyanogenmod 7 (Android 2.3.7): Same behavior as on the emulator with Android 2.3.4

When I mix the second group up by adding one button in the layout file and two programmatically, the result is still the same. The first button (defined in the layout) looks like expected, the both other buttons use a different button graphic and have a different text color.

Answer 1

Ok I found the solution to my problem.

I used the wrong context to create the RadioButton.

Instead of

RadioButton radioButton = new RadioButton(getBaseContext());

I have to use

RadioButton radioButton = new RadioButton(getContext);

or

RadioButton radioButton = new RadioButton(this); // this is the Activity

I don't know why I used the base context here as I never used it before. If I remember correctly then a Context object can contain information about the style an layout of an Activity. I guess when I used the base context, this information was missing and therefore the radio buttons looked differently.