'Using layer-list to display some drawable images

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.

Solution 1:^[1]

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>

Solution 2:^[2]

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

The system picks image resources based on screen resolution.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shailendra Madda
Solution 2	Brijesh Masrani

'Using layer-list to display some drawable images

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]