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>

Answer 1

Hope this will help :-
You can use a nine patch drawable for menu_drawable2. You can make menu_drawable2 like having transparent region around it edges. Use this transparent region to specify stretchable region in nine patch.

Answer 2

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>

Answer 3

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.

Answer 4

i dont know its works or not but did you tried to seperate them from each other?

something like this:

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

or put something else betwen them like empty layout with height and width 0dp.