Layer Lists

Definition

A layer list is a drawable used to manage other drawables.

Its inflated into a LayerDrawable object in java.

Each drawable in the list is drawn in the order of the list, just like a stack of plates at the dinner table, the last drawable in the list is drawn on top.

The xml file

The list is represented by a single element with an array of elements as its children (drawables). 

Meaning each  elements  represents a drawable.

syntax:

xml version="1.0" encoding="utf-8"?>

<layer-list

    xmlns:android="http://schemas.android.com/apk/res/android" >

    <item

        android:drawable="@drawable/drawable_resource"

        android:id="@id/resource_name"

        android:top="dimension"

        android:right="dimension"

        android:bottom="dimension"

        android:left="dimension" />

</layer-list>

Attributes of element:

android:drawable 

Reference to a drawable resource.

In case there is no drawable resource reference, then the drawable resource must be nested inside the elements as we are going to see in our examples

android:id

Resource ID. A unique resource ID for this drawable, by which it can be referenced from code. Retrieve and modify the drawable with View.findViewById() or Activity.findViewById().

android:top

Integer. The top offset in px/dp/dip.

android:right

Integer. The right offset in px/dp/dip.

android:bottom

Integer. The bottom offset in px/dp/dip.

android:left

Integer. The left offset in px/dp/dip.

Offset

This refers to how much space there should be between the containing view and this drawable.

To illustrate abit, incase you were viewing a stack of 2 equal-sized plates on the dinner table from the top, you'd only be able to see a single plate, the one at the top. 

Now to be able to view a plate below the top most one, you'd have to cut off some of the edge of the top one. 

The amount of diameter you remove from the top plate is equivalent to the offset and to the amount of the second plate below that you will be able to see.

Images

All drawable items are scaled to fit the size of the containing View, by default. An image may be used in the layer-list like so;

<item android:drawable="@drawable/image" />

However, this might increase the size of the View and cause some images scale as appropriate. The effect counter-acts the advantage of drawables.

To avoid scaling items in the list, use a element inside the element to specify the drawable and define the gravity to something that does not scale, such as "center". For example, the following defines an item that scales to fit its container View:

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

 Example

Create a new android project called LayerList and create three TextViews in the main.xml like so. We will use this example to illustrate one of the most important functions of layer-lists i.e. to create backgrounds or layered shadows.

Create 3 xml files in the drawables folder like so:

layered_no_offset.xml

xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

       <item>

             <shape>

                    <solid android:color="#f00" />

             </shape>

       </item>

       <item>

             <shape>

                    <solid android:color="#0f0" />

             </shape>

       </item>

             <item>

             <shape>

                    <solid android:color="#00f" />

             </shape>

       </item>

</layer-list>

layered_simple_offset.xml

xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

       <item>

             <shape>

                    <solid android:color="#f00" />

             </shape>

       </item>

       <item android:top="5px" android:left="5px">

             <shape>

                    <solid android:color="#0f0" />

             </shape>

       </item>

             <item android:top="10px" android:left="10px">

             <shape>

                    <solid android:color="#00f" />

             </shape>

       </item>

</layer-list>

layered_fancy_offset.xml

xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

       <item android:bottom="10px" android:right="10px">

             <shape>

                    <solid android:color="#f00" />

             </shape>

       </item>

       <item android:top="5px" android:left="5px" android:bottom="5px" android:right="5px">

             <shape>

                    <solid android:color="#0f0" />

             </shape>

       </item>

             <item android:top="10px" android:left="10px">

             <shape>

                    <solid android:color="#00f" />

             </shape>

       </item>

</layer-list>

main.xml

xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <LinearLayout

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

    <TextView 

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Layered without offset, so drawables take size of

    containing view and appear like 3 stacked plates viewed from top"

    android:layout_margin="5px"

    />

    <TextView 

    android:layout_width="fill_parent"

    android:layout_height="40px"

    android:background="@drawable/layered_no_offset"

    android:layout_margin="10px"

    />

    <TextView 

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Layered with left and top offsets, so drawables appear

    like 3 stacked plates and left and top edges chipped off in increasing

    amounts to the top, you can view a part of each plate from the top"

    android:layout_margin="5px"

    />

    <TextView 

    android:layout_width="fill_parent"

    android:layout_height="40px"

      android:background="@drawable/layered_simple_offset"

      android:layout_margin="10px"

    />

    <TextView 

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Bottom and right offsets added to some drawables, the appearance should be self-explanatory"

    android:layout_margin="5px"

    />

    <TextView 

    android:layout_width="fill_parent"

    android:layout_height="40px"

    android:background="@drawable/layered_fancy_offset"

    android:layout_margin="10px"

    />

    </LinearLayout>

</ScrollView>

We can now run our application, here is my screen shot:

Lets also check out how you'd go about using an image, for brevity, we shall use one of android's inbuilt image drawables.

Create 2 xml drawables like so

 layered_save_icon_no_offset.xml

xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>

      <bitmap android:src="@android:drawable/ic_menu_save"

        android:gravity="center" />

    </item>

    <item>

      <bitmap android:src="@android:drawable/ic_menu_save"

        android:gravity="center" />

    </item>

    <item>

      <bitmap android:src="@android:drawable/ic_menu_save"

        android:gravity="center" />

    </item>

</layer-list>

 layered_save_icon_with_offset.xml

xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>

      <bitmap android:src="@android:drawable/ic_menu_save"

        android:gravity="center" />

    </item>

    <item android:top="10dp" android:left="10dp">

      <bitmap android:src="@android:drawable/ic_menu_save"

        android:gravity="center" />

    </item>

    <item android:top="20dp" android:left="20dp">

      <bitmap android:src="@android:drawable/ic_menu_save"

        android:gravity="center" />

    </item>

</layer-list>

Let's go ahead and add these 2 image views in the main.xml and tell them to use our new drawables. Place them inside a horizontal linear layout.

    

    <LinearLayout   

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:weightSum="2"

     >

    <ImageView    

    android:layout_height="wrap_content"

    android:layout_width="wrap_content"

    android:src="@drawable/layered_save_icon_no_offset"

    android:layout_weight="1"

    />

    <ImageView    

    android:layout_height="wrap_content"

    android:layout_width="wrap_content"

    android:src="@drawable/layered_save_icon_with_offset"

    android:layout_weight="1"

    />

    </LinearLayout>

Here is my screen shot:

there you go, those are the basics of Layer lists, we shall be looking at more advanced and powerful ways of using them in later posts.