Custom drawable for RadioButton breaks for API 21/22 and below

I have created custom drawable for AppCompatButton and it is working perfectly fine for API level 23 and above.

Here is custom drawable.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_shortAnimTime">
    <item android:drawable="@drawable/background_radio_checked" android:state_checked="true" />
    <item android:drawable="@drawable/background_radio_unchecked" android:state_checked="false" />
</selector>

background_radio_checked -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:left="-8dp"
        android:right="-8dp"
        android:top="-8dp">
        <shape>
            <solid android:color="#FFF1EEFF" />
            <stroke
                android:width="1dp"
                android:color="@color/color_ask_question" />
        </shape>
    </item>

    <item
        android:bottom="@dimen/screen_margin_half"
        android:drawable="@drawable/ic_add_filled_24dp"
        android:gravity="start|center_vertical"
        android:left="@dimen/screen_margin_half_plus_four"
        android:right="@dimen/screen_margin_half"
        android:top="@dimen/screen_margin_half" />
</layer-list>

background_radio_unchecked -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="@color/color_employer_divider" />
            <solid android:color="#F2F2F2" />
            <corners android:topLeftRadius="@dimen/screen_margin_half_half_half" />
        </shape>
    </item>
    <item
        android:bottom="@dimen/screen_margin_half"
        android:drawable="@drawable/ic_add_empty_24dp"
        android:gravity="start|center_vertical"
        android:left="@dimen/screen_margin_half_plus_four"
        android:right="@dimen/screen_margin_half"
        android:top="@dimen/screen_margin_half" />
</layer-list>

The drawables used are SVGs and have height width of 24dp.

How it looks on API 23+

But the same thing looks horrible on API level 21.

The image used in drawable stretches out to full width.

Tried removing animation but still the same results.

Not sure what wrong I'm doing or missing out. Seems I'm using some property which is not available only from API 23 and above but not sure which one.

I'll answer by self, hopefully It'll help someone.

I was setting this drawable as background to my radiobutton and passing "@null" in button property.

        <android.support.v7.widget.AppCompatRadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/custom_radio_button_backgorund"
            android:button="@null"
            android:checked="true" />

This wasn't working, so I created two separate custom drawables for button and background.

For custom drawable for background I just used shape with border, background color, radius etc but NO ICON. And for custom drawable for Button, I used icon. Assigning these two custom drawables in background and button makes things work in both, lollipop devices and above.

            <android.support.v7.widget.AppCompatButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/custom_radio_background"
                android:button="@drawable/custom_radio_button"
                android:checked="true" />

-----------Custom drawable for background-----------

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_shortAnimTime">
    <item android:drawable="@drawable/background_radio_checked_background" android:state_checked="true" />
    <item android:drawable="@drawable/background_radio_unchecked_background" android:state_checked="false" />
</selector>

background_radio_checked_background -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:left="-8dp"
        android:right="-8dp"
        android:top="-8dp">
        <shape>
            <solid android:color="#EBFFF7" />
            <stroke
                android:width="1dp"
                android:color="#118F5D" />
        </shape>
    </item>
</layer-list>

background_radio_unchecked_background -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="@color/color_employer_divider" />
            <solid android:color="#F2F2F2" />
            <corners android:topRightRadius="@dimen/screen_margin_half_half_half" />
        </shape>
    </item>
</layer-list>

-----------Custom drawable for button-----------

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_shortAnimTime">
    <item android:drawable="@drawable/background_radio_checked_button" android:state_checked="true" />
    <item android:drawable="@drawable/background_radio_unchecked_button" android:state_checked="false" />
</selector>

background_radio_checked_button -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="@dimen/screen_margin_half"
        android:drawable="@drawable/ic_poll_filled_24dp"
        android:gravity="start|center_vertical"
        android:left="@dimen/screen_margin_half_plus_four"
        android:right="@dimen/screen_margin_half"
        android:top="@dimen/screen_margin_half" />
</layer-list>

background_radio_unchecked_button -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="@dimen/screen_margin_half"
        android:drawable="@drawable/ic_poll_empty_24dp"
        android:gravity="start|center_vertical"
        android:left="@dimen/screen_margin_half_plus_four"
        android:right="@dimen/screen_margin_half"
        android:top="@dimen/screen_margin_half" />
</layer-list>

I'm still not sure why creating a single drawable which has both icon and border/background color, does not work with lollipop devices.

Suggestions, corrections on this solution are welcome.

Custom drawable for RadioButton breaks for API 21/22 and below

1 Answers