Incorrect items sizing in layer-list on pre-lollipop

Question

I have a layer-list

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

<item android:right="2dp" android:left="2dp" android:bottom="2dp" android:top="2dp">
    <bitmap
        android:gravity="center"
        android:src="@drawable/ic_menu_alert"/>
</item>

<item android:height="10dp" android:width="10dp" android:gravity="right|top">
    <shape android:shape="oval">
        <size android:height="10dp" android:width="10dp"/>
        <solid android:color="@color/navigation_drawer_notification_red_color"/>
    </shape>
</item>

</layer-list>

which shows this image

On lollipop and above everything is fine but on pre-lollipop red circle lose all sizing and padding attributes and image looks like this

I was looking for solution about 3 days and found nothing. I was trying to make my own toolbar layout and set to this imagebuuton scaleType="centerInside" but it didn't help. Could anyone help with this issue?

Thanks in advance!

Strange.....please check http://stackoverflow.com/questions/26561812/android-xml-layer-list-not-displayed-correctly-on-some-devices — avinash, Jan 10 '17 at 06:30
I'm curious about the 2dp padding on the menu icon, can you provide the desired size of the entire drawable and the dp size of `ic_menu_alert.png`? I would assume that's 24dp — kris larson, Jan 13 '17 at 18:22

Govind · Accepted Answer · 2017-01-17T19:02:53.480

Its best not to mention the height and width attributes in layer-list. When you use this as drawable in let's say an ImageView (the width and height of the ImageView will override the one's mentioned in item/shape).

You can use top, bottom, left, right to align your items in layer-list.

Note: height and width attributes of item is supported only from API 23.

Here is a working example (Tested in Android 7.0 and Android 4.4):

sample.xml

<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/menu"
        android:left="16dp"
        android:right="16dp"
        android:gravity="center">
        <bitmap
            android:src="@drawable/menu_icon" />
    </item>

    <item
        android:top="8dp"
        android:left="56dp"
        android:right="24dp"
        android:bottom="42dp">
        <shape android:shape="oval">
            <solid android:color="@android:color/holo_red_dark"/>
        </shape>
    </item>

</layer-list>

main.xml

<ImageView
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:src="@drawable/sample"
        android:scaleType="fitCenter"/>

You can also use wrap_content for height & width in ImageView.

for all, don't forget about `scaleType` it's important for this trick. — Yuri Misyac, Oct 23 '18 at 14:08

score 2 · Answer 2 · answered Jan 16 '17 at 00:09

So i came up with a workable solution. I have a layer-list drawable in /drawable and /drawable-v21. The layer-list drawable in /drawable-v21 contains a vector drawable. The layer-list drawable in /drawable contains a .png . It kind of defeats the purpose of using vector drawables but I had to do this to make it work in this one off case.

Incorrect items sizing in layer-list on pre-lollipop

2 Answers2