CODEWITHSUNDEEP
androidradio-button
petrsyn
petrsyn

Reputation: 5116

Android 4.2 RadioButton android:drawableLeft bug?

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.2 issue

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

4.1 is correct

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" />

Upvotes: 8

Views: 3766

Answers (4)

chaon
chaon

Reputation: 633

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>

Upvotes: 6

grahamparks
grahamparks

Reputation: 16296

This appears to be fixed in Android 4.2.2.

Upvotes: 0

petrsyn
petrsyn

Reputation: 5116

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);
    }
}

Upvotes: 0

devunwired
devunwired

Reputation: 63303

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()

Upvotes: 0

Related Questions