Understanding Android's <Layer-List>

Understanding Android's layer-list

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.

Using layer-list to display some drawable images

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>

Unable to understand layer-list

A layer list is drawable, called sequence of other drawables with <item> tag.
Here from your question the first <item> is inner oval shape & top, bottom, right & left are insets given to that item (just same as padding). Try to give width & height to first you can see inner oval shape with 4dp padding from outer oval.

Refer to this link for more detail about layer drawable http://developer.android.com/reference/android/graphics/drawable/LayerDrawable.html

Yes you can use ring shape to draw a ring like:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="15dp"
    android:thickness="10dp"
    android:useLevel="false">
    <solid android:color="#ff0000" />

</shape>

Layer-List with items having top/bottom properties

The reason is item android:width and android:height are not available until API23. Keep an eye on Android Studio for hints like this:

Therefore on the older, API22 device, it behaves as though you haven't set them at all.

Here is an alternative for the seekbar_thumb.xml file:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="@android:color/holo_red_dark"/>
    <size
        android:width="2pt"
        android:height="6pt"/>
</shape>

The thickness differences could be down to the use of pt over dp, see here and the android documentation.

seekbar_progress.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@color/seekbarBackground"/>
    <!-- secondary progress optional -->
    <item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="#00ffff"
            android:scaleWidth="100%"/>
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@color/seekbarProgressBackground"
            android:scaleWidth="100%"/>
    </item>
</layer-list>

Do not specify dimensions at all in that file.

Usage:

<SeekBar
    ...
    android:maxHeight="2pt"
    android:progressDrawable="@drawable/seekbar_progress"
    android:thumb="@drawable/seekbar_thumb"
    />

The maxHeight is restricting the bar's height, but not the thumb.

Again I highly recommend using dp not pt unless you have a good reason.

Android Layer List Drawable Move Adjust Item Position

I finally choose to modify the SVG image to meet my needs, following is the process:

1. Go to "https://materialdesignicons.com/" -> find image -> download SVG image.

2. Go to "https://editor.method.ac/" -> "File" -> "Open SVG..." -> choose SVG file -> "Open".

3. Adjust canvas width and height on the right panel.

4. Adjust the positon of the imported SVG image.

5. "File" -> "Save Image..." -> rename file -> "Download".

6. Import the SVG image to Android Studio as vector asset.

---

Related Topics