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.

Answer 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:height="68dp"
    android:left="-20dp"
    android:bottom="-20dp"
    android:width="68dp">
    <bitmap
        android:gravity="bottom|left"
        android:src="@drawable/peas" />
</item>

Answer 2

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

The system picks image resources based on screen resolution.