Android Layer-List Example

android.graphics.drawable.LayerDrawable is a drawable object that manages arrays of other drawable objects in desired order. Each drawable object in the layer list is drawn in the order of the list, and the last drawable object in the list is drawn at the top.

To define a LayerDrawable object, you need to add a xml file under app / res / drawable folder. And the file name is just the drawable resource id.

In above picture, my_layer_list.xml file contains layer list definition. Each drawable object is represented by a <item> element within a single <layer-list> element.

You can add any <bitmap> or <shape> sub elements under <item>. You can read Android Shape, Selector Examples to learn how to create shape drawable in andoird.

To use above layer-list drawable resource, use below method.

1. Java Code : R.id.my_layer_list.
2. Xml Code : @drawable/my_layer_list.

1. Layer-list Three Layer Example.

Above picture is a button, it use a three layer layer-list drawable object as the background.

my_layer_list.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- The bottom layer is blue square.-->
    <item
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp">
        <shape>
            <solid android:color="@color/colorBlue" />
            <size android:height="200dp"
                   android:width="200dp" />
        </shape>
    </item>

    <!-- The middle layer is green circle.-->
    <item>
        <shape android:shape="oval">
            <size
                android:width="100dp"
                android:height="100dp" />
            <solid android:color="@color/colorGreen" />
        </shape>
    </item>

    <!-- The top layer is red ring.-->
    <item
        android:left="30dp"
        android:top="30dp"
        android:right="30dp"
        android:bottom="30dp">
        <shape
            android:shape="ring"
            android:thickness="25dp"
            android:useLevel="false">
            <solid android:color="@color/colorRed" />
        </shape>
    </item>
</layer-list>

layout xml code use above layer-list.

<Button
    android:id="@+id/selectorButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/my_layer_list"
    android:text="Click Me"/>

2. Layer-list Image Border Example.

Above example add two border for an image. If you want to left only one border. You can remove <stroke> element to remove green border, remove <solid> element or change <padding> value to 5dp to remove red border.

my_layer_list.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- The bottom layer is red color rectangle with green border. -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorRed" />
            <stroke
                android:width="5dp"
                android:color="@color/colorGreen" />
            <padding
                android:left="15dp"
                android:top="15dp"
                android:right="15dp"
                android:bottom="15dp" />
            <size
                android:width="100dp"
                android:height="100dp" />
        </shape>
    </item>
    <!-- The top layer is an image. -->
    <item android:drawable="@drawable/img6" />
</layer-list>

3. Layer-list Red Crosshair Example.

There are two layer in above eaxmple. The bottom layer draw the vertical line and the top layer draw the horizontal line. You can adjust the layer item’s top, bottom, left and right offset to change the crosshair center point.

my_layer_list.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Draw the vertical line, left edge move to right 100dp and right edge move to fight 200dp. -->
    <item
        android:left="100dp"
        android:right="200dp">
        <shape>
            <size android:width="10dp" />
            <solid android:color="@color/colorRed" />
        </shape>
    </item>
    <!-- Draw the horizontal line, top edge move down 100dp and bottom edge move down 200dp. -->
    <item
        android:top="100dp"
        android:bottom="200dp">
        <shape>
            <size android:height="10dp" />
            <solid android:color="@color/colorRed" />
        </shape>
    </item>
</layer-list>

4. Layer-list Heart Example.

There are three layer in this example.

1. The bottom layer is a blue square which rotate 45  degree rotation.
2. The middle layer is a red oval.
3. The top layer is a green oval.

You can adjust each layer’s item offset to change the heart border and shape. If you set same color for both three layer. You can see a heart picture.

my_layer_list.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- The bottom layer is a blue square rotate 45 degree rotation. -->
        <item
            android:top="76dp"
            android:bottom="42dp"
            android:left="66dp"
            android:right="66dp">
            <rotate android:fromDegrees="45">
                <shape>
                    <solid android:color="@color/colorBlue" />
                    <size
                        android:width="100dp"
                        android:height="100dp" />
                </shape>
            </rotate>
        </item>
        <!--The middle layer is a red oval.-->
        <item
            android:bottom="90dp"
            android:right="100dp">
            <shape android:shape="oval">
                <solid android:color="@color/colorRed" />
            </shape>
        </item>
        <!--The top layer is a green oval. -->
        <item
            android:bottom="90dp"
            android:left="100dp">
            <shape android:shape="oval">
                <solid android:color="@color/colorGreen" />
            </shape>
        </item>
</layer-list>

5. Layer-list Bitmap Example.

By default, all rendering items are scaled to fit the size of the included view. Therefore, placing the image at different locations in the layer list may increase the size of the view, and some of the images will scale accordingly.

To avoid scaling items in a list, use <bitmap> elements within <item> elements to specify drawable objects, and define gravity for some items that are not scaled (such as “center”).

Below layer-list do not add gravity attribute for bitmap, so the picture has been scaled.

my_layer_list.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:src="@drawable/toggle_button_on" />
    </item>
    <item android:top="50dp" android:left="50dp">
        <bitmap android:src="@drawable/toggle_button_on" />
    </item>
    <item android:top="100dp" android:left="100dp">
        <bitmap android:src="@drawable/toggle_button_on" />
    </item>
</layer-list>

If you add android:gravity=”center” attribute for each bitmap in above your layer-list xml file, you can see below screen effect.

<bitmap android:src="@drawable/toggle_button_on" android:gravity="center"/>