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!

Strum

Hi, do you find a solution? – Hyperkeratosis

Hi, any solution? I'm also facing this issue. – Whiffle

@Whiffle unfortunately no ( – Strum

Ok. I'm now using a FrameLayout instead of Drawable. – Whiffle

Strange.....please check #26562312 – Richburg

did you get any solution? – Background

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 – Smart

Answer 1

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.

Confiscatory

Thank you for your answer:) – Strum

for all, don't forget about scaleType it's important for this trick. – Itinerary

Answer 2

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.

Overarch