How to set drawable size in layer-list

Question

I'm having problem with setting size of drawable in layer-list. My XML looks like this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@drawable/menu_drawable1"/>
    <item android:drawable="@drawable/menu_drawable2"/>       
</layer-list>

Drawable1 is bigger than Drawable2, so Drawable2 gets resized. How to override this and set the original size of Drawable2? I don't want it to resize. I tried with setting width and height but that doesn't work. Also the drawables aren't actually bitmaps, they are selectos, so I can't use the bitmap trick.

---

It looks like I've got half of the solution by using "left" and "right", but still, this doesn't let me set the exact size of the image automatically. Now my xml looks like this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@drawable/menu_drawable1"/>
    <item android:drawable="@drawable/menu_drawable2" android:right="150dp"/>       
</layer-list>

Solution 1

You can use android:width and android:height parameters with desired values.

Below is the sample drawable layer-list and screen shot. I used the vector drawable from google material icons and own selector drawable.

Original circle.xml drawable shape have 100dp x 100dp size, but into drawable.xml I override this values to 24dp x 24dp by android:width and android:height parameters.

I hope this help!

drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/circle" android:height="24dp" android:width="24dp"/>
    <item android:drawable="@drawable/ic_accessibility_black_24dp"/>
    <item android:drawable="@drawable/ic_http_white_24dp" android:gravity="center" android:top="-3dp" android:height="5dp" android:width="5dp"/>
</layer-list>

circle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:innerRadius="20dp" android:shape="oval">
            <solid android:color="#CCC" />
            <size android:width="100dp" android:height="100dp"/>
        </shape>
    </item>
</selector>

Solution 2

You can use inset tag for this. For example

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/menu_drawable1"/>
   <item>
       <inset android:drawable="@drawable/menu_drawable2"
           android:insetRight="50dp"
           android:insetTop="50dp"
           android:insetLeft="50dp"
           android:insetBottom="50dp" />
   </item>

This will create paddings around you menu_drawable2 so it won`t be scaled. Just set the dimensions that you require.

Solution 3

I also came across the issue on Android 5.0 (API 21). It seems the gravity of item doesn't work for API less than 23. So the layout is required to be updated, I've made it compatible by applying calculated paddings for the second item node which is supposed to be a right-top aligned overlay.

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

    <item
        android:left="16dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="16dp"
        android:drawable="@drawable/ic_circle_dot_red"
    />
</layer-list>

Solution 4

For API levels below 23, you can specify <size> on <shape> objects like below:

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

    <item>
        <shape android:shape="oval" android:tint="@color/darkDeepBlue">
            <padding android:right="2dp" android:top="2dp" android:bottom="2dp" android:left="2dp"/>
        </shape>
    </item>

    <item>
        <shape android:shape="oval" android:tint="@color/sunnyYellow">
            <size android:width="8dp" android:height="8dp"/>
        </shape>
    </item>

</layer-list>

View more solutions

Comments

[JohnyTex]

If you use multiple insets however it seems to accumulate. Very disturbing indeed.

[OldSchool4664]

Disclaimer: width and height are API 23+

[WildStyle]

This worked just fine for me with a vector Drawable, when nothing else would actually.

[Syed Hamza Hassan]

what i will use for 23 below ?