Android development to achieve shadow effect

problem background

In the daily learning and development process of Android, there are often scenes to realize the shadow effect of components and layouts. This article will introduce several solutions to realize the shadow effect in the Android development process.

problem analysis

(1) The way of elevation
Material Design provides the shadow effect setting of View. It is mainly determined by two attributes: elevation and translationZ.
Z = elevation + translationZ
PS: This implementation is only supported by API21 and above.
The elevation attribute indicates that the height of the View plus the height will have a shadow effect. The translationZ attribute represents adding a Z-axis transformation effect to the View. The shadow effect is more prominent when used together with the elevation property.
The implementation is as follows:

    <TextView
        android:layout_margin="30dp"
        android:background="@android:color/holo_blue_bright"
        android:elevation="10dp"
        android:text="elevation配置阴影效果fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

Note that if you directly use the elevation method to achieve the shadow effect, you need to configure the background color, otherwise there may be no shadow effect.
(2) The way of cardView
CardView is an official control provided by Android that supports setting shadow effects. Shadows are implemented by cardElevation and cardMaxElevation.
The implementation is as follows:

    <androidx.cardview.widget.CardView
        android:layout_margin="30dp"
        app:cardMaxElevation="10dp"
        app:cardElevation="10dp"
        app:cardCornerRadius="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="CardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </androidx.cardview.widget.CardView>

(3) SCardView mode
CardView can also achieve rounded corner shadow effect, but we cannot set the shadow direction of CardView. Why emphasize the condition of the shadow direction, because after API 21 of CardView, the display effect of the shadow is inconsistent in each position of the screen. SCardView solves these problems when it appears (refer to https://github.com/meetsl/SCardView-master ).
The implementation is as follows:
add dependencies

implementation 'io.github.meetsl:SCardView:1.2'

Code using:

    <com.meetsl.scardview.SCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        app:cardBackgroundColor="@android:color/holo_red_light"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardLightDirection="none">
        <TextView
            android:text="SCardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </com.meetsl.scardview.SCardView>

problem solved

Not much to say, just go to the code.
(1) Introduce dependencies

implementation 'io.github.meetsl:SCardView:1.2'

(2) The layout file is as follows:

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

    <TextView
        android:layout_margin="15dp"
        android:id="@+id/text"
        android:background="@android:color/holo_blue_bright"
        android:elevation="10dp"
        android:text="elevation配置阴影效果fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <androidx.cardview.widget.CardView
        android:layout_margin="15dp"
        app:cardMaxElevation="10dp"
        app:cardElevation="10dp"
        app:cardCornerRadius="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="CardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </androidx.cardview.widget.CardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        app:cardBackgroundColor="@android:color/holo_red_light"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardLightDirection="none">
        <TextView
            android:text="SCardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </com.meetsl.scardview.SCardView>

    <TextView
        android:layout_margin="15dp"
        android:background="@android:color/holo_blue_bright"
        android:elevation="10dp"
        android:text="elevation配置阴影效果;askl;jfasfjakl;fajfjklfaklfj;"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <androidx.cardview.widget.CardView
        android:layout_margin="15dp"
        app:cardMaxElevation="10dp"
        app:cardElevation="10dp"
        app:cardCornerRadius="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="CardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </androidx.cardview.widget.CardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        app:cardBackgroundColor="@android:color/holo_red_light"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardLightDirection="none">
        <TextView
            android:text="SCardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </com.meetsl.scardview.SCardView>

    <TextView
        android:layout_margin="15dp"
        android:background="@android:color/holo_blue_bright"
        android:elevation="10dp"
        android:text="elevation配置阴影效果fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <androidx.cardview.widget.CardView
        android:layout_margin="15dp"
        app:cardMaxElevation="10dp"
        app:cardElevation="10dp"
        app:cardCornerRadius="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="CardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </androidx.cardview.widget.CardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        app:cardBackgroundColor="@android:color/holo_red_light"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardLightDirection="none">
        <TextView
            android:text="SCardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </com.meetsl.scardview.SCardView>
</LinearLayout>

The result of the operation is as follows:
insert image description here

conclusion of issue

This article introduces several solutions for implementing shadow effects in the Android development process: (1) the way of elevation (2) the way of cardView (3) the way of SCardView.