Using layer-list to display some drawable images

Question

Android studio 2.0 Preview 3b

Hello,

I have created the following layout that I want to use for a background for my app. I am using the layer-list and I want to display a bowl of peas in 2 locations. Everything looks ok in the preview, but when I run on genymotion or some cheap Chinese devices the image stretches across the screen. However, on the Android AVD, everything looks fine and on my Nexus 5 (real device) everything works ok.

This is what I want and this is how it's displayed in the AVD and Nexus 5. As you can see there is no problem.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:centerX="0.5"
                android:centerY="0.3"
                android:endColor="#08e25b"
                android:gradientRadius="300dp"
                android:startColor="#b7e9c9"
                android:type="radial" />
        </shape>
    </item>

    <item
        android:width="48dp"
        android:height="48dp"
        android:left="350dp"
        android:top="400dp">
        <bitmap android:src="@drawable/peas" />
    </item>

    <item
        android:width="68dp"
        android:height="68dp"
        android:drawable="@drawable/peas"
        android:left="-20dp"
        android:top="480dp" />
</layer-list>

I have placed peas.png file in drawable-nodpi and just add the width and height in the layer-list

And when I run on the genymotion and some cheap smart devices I get the following:

Just quick summary.

Nexus 5 real device and AVD devices works ok
Genymotion and cheap smart devices doesn't display correctly

I am just confused in what I should believe. I have tried to use the bitmap as well to see if that would make any difference.

Many thanks for any suggestions.

Hi, did you try to use 'px' instead of 'dp' (android:width="68px")? — Volodymyr Kulyk, Dec 26 '15 at 10:56

score 55 · Accepted Answer · edited Apr 18 '22 at 12:33

55

Update your layer-list as follows

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

    <item>
        <shape>
            <gradient
                android:centerX="0.5"
                android:centerY="0.1"
                android:endColor="#08e25b"
                android:gradientRadius="300dp"
                android:startColor="#b7e9c9"
                android:type="radial" />
        </shape>
    </item>
    <item
        android:width="48dp"
        android:height="48dp"
        android:bottom="68dp"
        android:right="-20dp">
        <bitmap
            android:gravity="bottom|right"
            android:src="@drawable/peas" />
    </item>
    <item
        android:width="68dp"
        android:height="68dp"
        android:bottom="-20dp"
        android:left="-20dp">
        <bitmap
            android:gravity="bottom|left"
            android:src="@drawable/peas" />
    </item>
</layer-list>

edited Apr 18 '22 at 12:33

Shailendra Madda

20,649
15
100
138

answered Dec 19 '15 at 18:03

SachinS

2,223
1
15
25

Thanks that actually worked now now that do display on the genymotion and my other cheap devices. However, now that I am using xml bitmaps I cannot change the size of the peas.png image. Is there anyway I can change the size of the images? Thanks. – ant2009 Dec 20 '15 at 14:08
3

to change the size of the image,you have to put different bitmap drawables for different screen densities(ldpi (low), mdpi (medium), hdpi (high), xhdpi extra-high), xxhdpi (extra-extra-high), and xxxhdpi) – SachinS Dec 21 '15 at 05:30
Yes, I have done that and everything works fine with the different drawable folders ldpi, mdpi, etc. Just a quick question. I have noticed if you remove the gravity attribute from the bitmap the scaling goes completely wrong again. It seems that you can't use the bitmap without using the gravity. Try removing your gravity from you answer and you will see what I mean. Why does it behave like this? – ant2009 Dec 21 '15 at 16:49
2

"android:gravity" in indicates where to position the drawable in its container if the bitmap is smaller than the container. – SachinS Dec 23 '15 at 05:46
1

Simply,gravity in is used to avoid scaling. – SachinS Dec 23 '15 at 05:55
3

Disclaimer: width and height are API 23+ – ozmank Sep 26 '18 at 07:25
any idea how to use with app:srcCompat ? – Ilia Grabko Aug 01 '19 at 10:08

score 12 · Answer 2 · edited Aug 22 '17 at 05:54

12

Place your images in all density folders (xxhdpi, xhdpi, hdpi).

The system picks image resources based on screen resolution.

edited Aug 22 '17 at 05:54

Brijesh Masrani

1,439
3
16
27

answered Dec 21 '15 at 05:35

Akhil Jayakumar

2,262
14
25

Using layer-list to display some drawable images

2 Answers2

Linked