The use of layer-list in the xml file of the drawable folder

1. Concept:

layer: layer

list: list

layer-list: layer list

2. Function:

        It can be applied to the superimposed display effect of shapes that cannot be drawn, similar to the feeling of FrameLayout, the layer added later can be overlaid on the previous layer, so as to produce the effect that a layer is displayed visually.

3. demo demonstration:

        Not much to say, go directly to the demo:

1. Realize the visual frame line effect:

(1) xml file:

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

    <!--    底部的shape-->
    <item>
        <shape>
            <solid android:color="#FFFF0000" />
        </shape>
    </item>

    <!--    上层的shape-->
    <!--    设置距离上、下、左、右分别2dp-->
    <item
        android:bottom="2dp"
        android:end="2dp"
        android:start="2dp"
        android:top="2dp">
        <shape>
            <solid android:color="#FF0000FF" />
        </shape>
    </item>

</layer-list>

(2) Import the corresponding xml file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Activity.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文字"
        android:textSize="40sp"
        android:background="@drawable/frame_line"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

(3) The effect achieved:

        The color of the upper, lower, left, and right frame lines is red, and the color of the middle area is blue.

2. Realize the visual shadow effect:

(1) xml file:

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

    <!--    底部的shape-->
    <item
        android:start="4dp"
        android:top="8dp">
        <shape>
            <solid android:color="#B4B5B6" />
        </shape>
    </item>

    <!--    上层的shape-->
    <!--    设置距离下8dp、距离右边4dp-->
    <item
        android:bottom="8dp"
        android:end="4dp">
        <shape>
            <solid android:color="#FFFFFFFF" />
        </shape>
    </item>

</layer-list>

(2) Import the xml file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Activity.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文字"
        android:textSize="40sp"
        android:background="@drawable/frame_line"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

(3) The effect achieved:

 

3. There are many other effects that can be achieved, so I won’t give examples here!