Search code examples
androidandroid-layoutandroid-drawablexml-drawable

Android issue in Background Drawable with layer-list with API v16

I am trying to achieve something like this:

enter image description here

The code I have created is working fine with API v21 and above but it is not working as desired. Here are snippet of codes for your reference.

Drawable used as background for the EditText widget id (drawable_edittext_username.xml):

file: drawable_edittext_username.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" 
                  android:paddingLeft="44dp" android:paddingStart="44dp">
    <item android:drawable="@drawable/drawable_rounded_box"/>
    <item android:gravity="center_vertical|left">
        <selector >
            <item android:drawable="@drawable/vector_icon_user_focused" 
                  android:state_focused="true"/>
            <item android:drawable="@drawable/vector_icon_user"/>
        </selector>
    </item>
</layer-list>

file: drawable_rounded_box.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" 
                android:paddingLeft="44dp" 
                android:paddingStart="44dp">
    <item android:drawable="@drawable/drawable_rounded_box_focused" 
          android:state_focused="true" />
    <item android:drawable="@drawable/drawable_rounded_box_normal" />
</selector>

file: drawable_rounded_box_focused.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
             android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="@color/colorPrimaryDark" />
    <corners android:radius="5dp" />
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
    <solid android:color="@android:color/transparent"/>
</shape>

file: drawable_rounded_box_normal.xml*
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
             android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#3f000000" />
    <corners android:radius="5dp" />
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
    <solid android:color="@android:color/transparent"/>
</shape>

All icons are vector icons available in drawable and drawable-v21 folders.

In the output on v16, there is not padding and the icons are spread with no color. Here is the code for the icons:

file: vector_icon_user.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="#3f000000"
        android:pathData="M12 14.016q2.531 0 5.273 1.102t2.742
        2.883v2.016h-16.031v-2.016q0-1.781 2.742-2.883t5.273-1.102zM12
        12q-1.641 0-2.813-1.172t-1.172-2.813 1.172-2.836 2.813-1.195
        2.813 1.195 1.172 2.836-1.172 2.813-2.813 1.172z" />
</vector>

file: vector_icon_user_focused.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="@color/colorAccent"
        android:pathData="M12 14.016q2.531 0 5.273 1.102t2.742
        2.883v2.016h-16.031v-2.016q0-1.781 2.742-2.883t5.273-1.102zM12
        12q-1.641 0-2.813-1.172t-1.172-2.813 1.172-2.836 2.813-1.195
        2.813 1.195 1.172 2.836-1.172 2.813-2.813 1.172z" />
</vector>

finally here the the output on API v16:

enter image description here

Please help me understand, what I am doing wrong and what is the right approach to achieve the same.

Solution

  • Here is what I did to resolve (fallback approach) as the way I was trying to achieve is not supported by APIs below v23 (above is only possible in API v23 as of now)

    file: vector_icon_user_focused.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="#ACFDE9"
        android:pathData="M12 14.016q2.531 0 5.273 1.102t2.742
        2.883v2.016h-16.031v-2.016q0-1.781 2.742-2.883t5.273-1.102zM12
        12q-1.641 0-2.813-1.172t-1.172-2.813 1.172-2.836 2.813-1.195
        2.813 1.195 1.172 2.836-1.172 2.813-2.813 1.172z" />
</vector>

    here fill color is hard coded.

    The file drawable_edittext_username.xml has been removed and file drawable_rounded_box.xml is used in place of that for the EditText background drawable.

    The file vector_icon_user.xml is renamed as vector_icon_user_normal.xml and new file with name vector_icon_user.xml isa created containing the selector for vector_icon_user_normal.xml and vector_icon_user_focused.xml like this:

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="false" 
          android:drawable="@drawable/vector_icon_user_focused" />
    <item android:drawable="@drawable/vector_icon_user_normal" />
</selector>

    now this new drawable is used as the android:drawableLeft="@drawable/vector_icon_user" with android:drawablePadding="10dp".

    After the above code it is unified across all the devices. now i don't have any v21 specific code left for drawables and layout.

    Please let me know in case you have any questions.