Understanding Android's

Question

I don't understand how the layer-lists work. I read the official documentation with some examples but it does not work for me like expected. I want four squares which should be padded with 1dp, but nothing is like expected. Here is a screenshot scaled by 500%:

My suares
^{(The wrong colors do not matter)}
As you can see the size is completely wrong and the paddings are missing. I tried to set real values like width/height and right/left/top/buttom to be sure that android get the point what I want.

Here is my xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="0dp" android:left="0dp" android:bottom="0dp" android:right="0dp">
        <shape android:shape="rectangle">
            <size android:width="9dp"
                android:height="9dp"/>
            <solid android:color="#f000"/>
        </shape>
    </item>

    <item android:top="1dp" android:left="1dp" android:bottom="5dp" android:right="5dp">
        <shape android:shape="rectangle">
            <size android:width="3dp"
                android:height="3dp"/>
            <solid android:color="#f00"/>
        </shape>
    </item>
    <item android:top="1dp" android:left="5dp" android:bottom="5dp" android:right="1dp">
        <shape android:shape="rectangle">
            <size android:width="3dp"
                android:height="3dp"/>
            <solid android:color="#0f0"/>
        </shape>
    </item>

    <item android:top="5dp" android:left="1dp" android:bottom="1dp" android:right="5dp">
        <shape android:shape="rectangle">
            <size android:width="3dp"
                android:height="3dp"/>
            <solid android:color="#0f0"/>
        </shape>
    </item>
    <item android:top="5dp" android:left="5dp" android:bottom="1dp" android:right="1dp">
        <shape android:shape="rectangle">
            <size android:width="3dp"
                android:height="3dp"/>
            <solid android:color="#f00"/>
        </shape>
    </item>
</layer-list>

How did you make the screenshot ? 'cause the image it gives me look absolutely correct... — OcuS, Jan 21 '13 at 12:19
@rekire The editor is buggy just so you know, it doesn't always display the proper shape. Always check on the device. — basickarl, Mar 13 '15 at 13:40

score 106 · Accepted Answer · answered Jun 04 '13 at 01:59

106

The values for left, top, right and bottom are measured from their respective edge.

So left=0dp, top=0dp, bottom=0dp & right=50dp will give you a rectangle that is (match_parent - 50dp) wide and not 50dp wide. Therefore larger values for "right" will actually give you a smaller rectangle.

The same would apply to the other value, but these would behave as expected in most cases, its just "right" that might cause confusion.

answered Jun 04 '13 at 01:59

Andrew Kelly

2,027
2
15
25

4

Its like padding in html, right=50dp adds a padding of 50dp to the right. – The Demz Oct 06 '14 at 08:39

OcuS · Answer 2 · 2013-01-21T13:43:26.860

6

Either you use px instead of dp or multiply all dimensions by 10.

I'm ashamed to admit that I don't exactly know WHY this is happening but my guess is that it has something to do with densities where 1dp is a floating px value and the ImageView is scaled up.

Expert answer is welcomed :)

edited Jan 21 '13 at 13:43

answered Jan 21 '13 at 12:27

OcuS

5,239
3
34
45

1

You are right, but I would like to be dpi independed. Could you provide some more informations like if I really need all values of the rect (top,left,right,bottom) and an idea why dp seems not to be work in eclipse. – rekire Jan 21 '13 at 12:36
4

I just found this answer again finally I used px and used for other screensizes (ldpi, mdpi, hdpi, xhdpi and xxhdpi) other values. – rekire Dec 17 '13 at 11:04

Understanding Android's

2 Answers2

Linked