Misaligned Radio button text

Question

I have radio buttons in my app, that I add dynamically through code.

Here is the layoutdefinition of the group I add the buttons to:

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/answer_radiogroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="left"
    android:paddingLeft="15dp"
    android:layout_margin="20dp"
    android:orientation="vertical" >

</RadioGroup>

Here is the code where I dynamically add the radio buttons:

for (String value : values) {
   RadioButton radioButton = (RadioButton) ViewGroup.inflate(context,
            R.layout.radio_button_layout, null);
   radioButton.setText(value);
   answersRadioGroup.addView(radioButton);
}

With radio_button_layout being:

<android.support.v7.widget.AppCompatRadioButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:paddingLeft="15dp"
    android:gravity="center_vertical"
    android:textColor="@color/font_color_gray"
    android:textSize="20sp"/>

My problem is that my text gets disaligned to the radio buttons like that (I am concerned with the vertical alignment):

I am certain this is not a common case, obviously, but can someone hint me into where should I look to try to identify my issue?

EDIT: Actually I realized it is better if I use AppCompatRadioButton as I am aiming at app compatibility. Now this is changed (also in question's sources), but it has no difference.

EDIT2 Here are the relevant styles, at least accordung to me:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    <item name="windowNoTitle">true</item>
    <!-- We will be using the toolbar so no need to show ActionBar -->
    <item name="windowActionBar">false</item>
    <item name="android:radioButtonStyle">@style/MyRadioButtonStyle</item>
</style>

<!-- Styling the font of the radio buttons -->
<style name="MyRadioButtonStyle" parent="@android:style/Widget.Holo.Light.CompoundButton.RadioButton">
    <item name="android:button">@drawable/apptheme_btn_radio_holo_light</item>
</style>

As one can see I use custom button icon now, but the problem was there even without using the custom icon.

EDIT3 Now it gets even more interesting. I am sure the misalignment is caused by the inflation.

I have tried modifying the RadioGroup layout as follows:

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/answer_radiogroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="left"
    android:paddingLeft="15dp"
    android:layout_margin="20dp"
    android:orientation="vertical" >
    <android.support.v7.widget.AppCompatRadioButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:paddingLeft="15dp"
        android:gravity="center_vertical"
        android:textColor="@color/font_color_gray"
        android:text="Alabala"
        android:textSize="20sp"/>
</RadioGroup>

And then appended the actual radio buttons with the code included above. The result is as follows:

As you can see the radio button in the layout is correctly aligned vertically, but the inflated buttons are not. Please, any ideas?

Answer 1

There're 2 different reasons which can be root cause for such sort of issues:

• AppCompatRadioButton has paddingBottom set in code behind/in layouts
• Invisible characters in text property (in the exact this question it was the reason behind the issue)