CODEWITHSUNDEEP
androidlistandroid-layoutsizedrawable
Deimos
Deimos

Reputation: 1091

How to set drawable size in layer-list

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>

Upvotes: 38

Views: 34481

Answers (5)

ConcernedHobbit
ConcernedHobbit

Reputation: 874

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>

enter image description here

Upvotes: 1

rayworks
rayworks

Reputation: 796

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>

Upvotes: 5

MrOnyszko
MrOnyszko

Reputation: 887

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>

screen shot

Upvotes: 8

Andrii Senkiv
Andrii Senkiv

Reputation: 105

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.

Upvotes: 7

Akhilesh Kumar
Akhilesh Kumar

Reputation: 796

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.

Upvotes: 0

Related Questions