Detailed explanation of the basic use of layer list in Android

Using layer list, multiple drawables can be stacked together in order. By default, drawables in all items will be automatically scaled according to the size of the attached view,

The items in the layer list are stacked from bottom to top in order, that is, the first defined items are stacked below, and the subsequent items are stacked above in turn

example

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

  <item >
    <shape android:shape="rectangle" >
      <solid android:color="#0000ff"/>
    </shape>
  </item>

  <item android:bottom="25dp" android:top="25dp" android:left="25dp" android:right="25dp">
    <shape android:shape="rectangle" >
      <solid android:color="#00ff00" />
    </shape>
  </item>

  <item android:bottom="50dp" android:top="50dp" android:left="50dp" android:right="50dp">
    <shape android:shape="rectangle" >
      <solid android:color="#ff0000" />
    </shape>
  </item>
</layer-list>

layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <ImageView
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:background="@drawable/layer_list"/>
</LinearLayout>

design sketch

The red item is finally defined at the top, the green item is in the middle, and the blue item is first defined at the bottom

Android: bottom = "50dp" Android: Top = "50dp" Android: left = "50dp" Android: right = "50dp" attribute Android: Top = "50dp" is set here; Indicates that the upper edge of the item is 50dp inside with the upper boundary of ImageView. Android: bottom = "50dp" indicates that the lower edge of the item is 50dp inside with the lower boundary of ImageView. Android: left = "50dp"; Indicates that the left side of the item is narrowed inward by 50dp with the left boundary of ImageView. Android: right = "50dp"; Indicates that the right side of the item is shrunk inward by 50dp with the right boundary of ImageView

Android: bottom = "25dp" Android: Top = "25dp" Android: left = "25dp" Android: right = "25dp" similar

Layer list implements three side borders for the specified view

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

  <item >
    <shape android:shape="rectangle" >
      <solid android:color="#ff0000"/>
    </shape>
  </item>

  <item android:bottom="2dp" android:top="2dp" android:right="2dp">
    <shape android:shape="rectangle" >
      <solid android:color="#ffffff" />
    </shape>
  </item>

</layer-list>

layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >

  <LinearLayout
    android:layout_width="150dp"
    android:layout_height="50dp"
    android:background="@drawable/border"
    android:layout_gravity="center"
    android:orientation="vertical"
    >
  </LinearLayout>
</LinearLayout>

design sketch

Achieve button effect with shadow:

code:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <!-- 灰色阴影 -->
    <layer-list>
      <item
    android:left="2dp"
    android:top="4dp">
    <shape>
      <solid android:color="@android:color/darker_gray" />
      <corners android:radius="4dp" />
    </shape>
  </item>

     <!-- 红色前景 -->
    <item
    android:bottom="4dp"
    android:right="2dp">
    <shape>
      <solid android:color="#FF0000" />
      <corners android:radius="4dp" />
    </shape>
  </item>
    </layer-list>

  </item>

  <item>

    <!-- 灰色阴影 -->
    <layer-list>
      <item
    android:left="2dp"
    android:top="4dp">
    <shape>
      <solid android:color="@android:color/darker_gray" />
      <corners android:radius="4dp" />
    </shape>
  </item>

     <!-- 白色前景 -->
    <item
    android:bottom="4dp"
    android:right="2dp">
    <shape>
      <solid android:color="#FFFFFF" />
      <corners android:radius="4dp" />
    </shape>
  </item>
    </layer-list>

  </item>
</selector>

The above is the whole content of this article. I hope it will help you in your study, and I hope you will support us a lot.