Android 4.2 RadioButton android:drawableLeft bug?

Question

Android 4.2 do not display RadioButton correctly when android:drawableLeft is used. drawableRight is OK.

The drawable on the left side overlaps the Radio button graphic. And at least Android 2.2-4.1 seem to be OK with drawableLeft.

Do you know about workaround for this? Setting drawableLeft programatically did not work to solve this issue.

4.2 Android issue

4.1 Android renders this correctly (also at least Android 2.2-4.0 render this correctly too)

The Android XML layout Code for this:

<RadioButton
    android:id="@+id/radio_cloud_dropbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:drawableLeft="@drawable/dropbox_logo"
    android:checked="true"
    android:text="@string/lbl_cloud_dropbox" />

Ibby

I'm facing a similar problem but in my case I see a wrong alignment with a text drawn using canvas.drawText()!! – Mahan

This is my question: #13941770 – Mahan

Answer 1

My temporary solution to this bug was to replace parent RadioGroup layout by TableLayout with TableRow(s) containing RadioButton and TextView. Even though there are other solutions as well.

<TableLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TableRow android:onClick="onDropboxClick" >
        <RadioButton
            android:id="@+id/radio_cloud_dropbox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:onClick="onDropboxClick" />

        <TextView
            android:drawableLeft="@drawable/cloud_logo_dropbox"
            android:gravity="center_vertical"
            android:text="Dropbox" />
    </TableRow>

    <TableRow android:onClick="onGoogleDriveClick" >
        <RadioButton
            android:id="@+id/radio_cloud_google_drive"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:onClick="onGoogleDriveClick" />

        <TextView
            android:drawableLeft="@drawable/cloud_logo_google_drive"
            android:gravity="center_vertical"
            android:text="Google Drive" />
    </TableRow>

</TableLayout>

However as RadioGroup could not be used with nested layouts, selecting/deselecting of checked state has to be done manually in the associated activity in event handler methods:

public void onDropboxClick(View view) {
    checkRadio(R.id.radio_cloud_dropbox);
}

public void onGoogleDriveClick(View view) {
    checkRadio(R.id.radio_cloud_google_drive);
}

private void checkRadio(int radioId) {
    if (radioId == R.id.radio_cloud_dropbox) {
        dropboxRadio.setChecked(true);
        googleDriveRadio.setChecked(false);
    } else if (radioId == R.id.radio_cloud_google_drive) {
        dropboxRadio.setChecked(false);
        googleDriveRadio.setChecked(true);
    }
}

Ibby

Answer 2

you can use at radio button :

set the button @null and the drawable left set that your button:

   <RadioGroup
        android:id="@+id/hn_radio_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <RadioButton
            android:id="@+id/rb_Select_by_proposal"
            style="@style/RadioButtonText"
            android:checked="true"
            android:tag="1"
            android:text="@string/select_by_proposal" />

        <RadioButton
            android:id="@+id/rb_Select_by_first_letter"
            style="@style/RadioButtonText"
            android:tag="2"
            android:text="@string/select_by_first_letter" />
    </RadioGroup>    

and this the style:

<style name="RadioButtonText">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:button">@null</item>
    <item name="android:drawableLeft">@drawable/radio_selector</item>
    <item name="android:drawablePadding">10dp</item>
</style>   

for space between the button and the text use at:

  <item name="android:drawablePadding">10dp</item>

Syncarpous

This actually does not fix the problem. Where is drawn the custom logo (Dropbox)? The point of the question was to draw both, the radio selector and also custom image (Dropbox). – Ibby

Answer 3

It is likely a product of the new layout direction support that was added to the platform in Android 4.2 (i.e. to support layout in either left-to-right or right-to-left). This affects how they place the left vs. right drawable content as well. What is your android:targetSdkVersion manifest attribute set to? Technically, I believe, if it is set to 16 or below these layout changes should be disabled by default, even if your locale would otherwise enable them.

I would recommend filing a bug at http://b.android.com, because in RTL mode I would expect the button drawable to be on the other side as well. In the mean time, you might try forcing the layout direction by adding a layoutDirection attribute to your TextView and forcing it to be LTR so it looks as you expect. You can also call this from Java code with setLayoutDirection()

Singletree

Thanks for your answer. Setting android:targetSdkVersion from 16 to 17 did not help. Also using explicit android:layoutDirection="ltr" in RadioButton or RadioGroup did not change anything. Note that android:drawableLeft is broken but android:drawableRight works correctly. This wrong behavior can be observed in the Eclipse "Graphical Layout" as well when API 17 is selected in the combobox. – Ibby

I've submitted the bug also to Google code.google.com/p/android/issues/detail?id=40451 – Ibby

Answer 4

This appears to be fixed in Android 4.2.2.

Effloresce