How to resize the DrawableLeft of an AppCompatRadioButton in Android Kitkat?

Question

In a Xamarin Android application, I have an AppCompatRadioButton with the drawableLeft attribute set to the @drawable/person_resized:

<RadioGroup
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <android.support.v7.widget.AppCompatRadioButton
    android:id="@+id/MyRadioButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Selection 1"
    android:textSize="24dp"
    android:drawableLeft="@drawable/person_resized"
    android:drawablePadding="5dp" />
</RadioGroup>

drawable/person_resized.xml is a layer-list drawable that I used to downsize the drawable/person.png image:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:drawable="@drawable/person"
    android:width="22dp"
    android:height="22dp" />
</layer-list>

When this view is displayed on an Android N emulator, it behaves properly. But in my Android Kitkat(4.4.4) device the image is not properly sized.

Here is what I get in Android N:

And here is what I get in Android Kitkat:

What is going on here?

I have tried the following methods to downsize the drawableLeft in Android Kitkat and none of them worked:

Using a ScaleDrawable to scale down the drawable while making sure to SetLevel, this actually allows to resize the drawable but without control; the resized image is always the same smaller size no matter what scaling factor I supply
- Getting the bitmap from the drawable, resize it and create a new Bitmap drawable, but this makes the image disappear
- Using an inset drawable, same as using a layer-list makes the image appear in its original size

https://stackoverflow.com/a/36868555/6334207 – Mortada Sep 29 '17 at 23:14 — Mortada, Sep 29 '17 at 23:14

score 0 · Answer 1 · answered Sep 30 '17 at 14:56

According to this answer pointed out by Mahmoud Mortda, some dysfunction in Android Kitkat is causing layer-list resizes to be ignored.

So basically you have to do it yourself and the following is what I did:

I created two files layout-v21/radio_group.xml and layout/radio_group.xml, the former will be used with Android devices running at least Lollipop (SDK 21) and the latter will be used for the rest including KitKat.

layout-v21/radio_group.xml contains the RadioGroup using the resized images via layer-list:

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup
  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <android.support.v7.widget.AppCompatRadioButton
        android:id="@+id/MyRadioButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Selection 1"
        android:textSize="24dp"
        android:drawableLeft="@drawable/person_resized"
        android:drawablePadding="5dp" />
</RadioGroup>

layout/radio_group.xml contains a RadioGroup with "hand made" labels made out of ImageView and TextView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:id="@+id/RadGroup">
        <android.support.v7.widget.AppCompatRadioButton
            android:id="@+id/MyRadioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="24dp" />
</RadioGroup>
<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_toRightOf="@+id/RadGroup"
        android:layout_centerVertical="true">
        <RelativeLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/icon"
                android:layout_width="22dp"
                android:layout_height="22dp"
                android:src="@drawable/person"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true" />
            <TextView
                android:id="@+id/label1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_toRightOf="@+id/icon"
                android:layout_centerVertical="true"
                android:textSize="24dp"
                android:textColor="@color/black"
                android:text="Selection 1"
                />
        </RelativeLayout>
</RelativeLayout>

Here using an ImageView allowed me to effectively resize the image.

Finally, in the xml layout containing the RadioGroup just include the @layout/radio_group and the SDK will load the proper layout with respect to the Android version:

<include layout="@layout/radio_group"/>

How to resize the DrawableLeft of an AppCompatRadioButton in Android Kitkat?

1 Answers1