Создание тени и модификатор shadow

Модификатор shadow позволяет создать тень вокруг элемента. Этот модификатор имеет следующую форму:

fun Modifier.shadow(
    elevation: Dp,
    shape: Shape = RectangleShape,
    clip: Boolean = elevation > 0.dp,
    ambientColor: Color = DefaultShadowColor,
    spotColor: Color = DefaultShadowColor
): Modifier

Функция модификатора принимает следующие параметры:

• elevation: высота тени в dp

• shape: определяет форму тени с помощью объекта Shape

• clip: если равно true, то создается фрагмент с использованием формы из параметра shape

• ambientColor: цвет затенения на компоненте

• spotColor: цвет тени вокруг компонента

Для создания тени нам достаточно задать ее высоту. Например:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.sp

import androidx.compose.ui.draw.shadow
import androidx.compose.ui.unit.dp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello METANIT.COM",
                fontSize = 28.sp,
                modifier = Modifier
                    .padding(20.dp)
                    .shadow(3.dp)
                    .padding(15.dp)
            )
        }
    }
}

В данном случае вокруг компонента Text создается тень высотой в 3 единицы:

Параметр shape позволяет задать форму тени. Он принимает объект интерфейса Shape. Например, определим округлую тень и для этого используем встроенный класс CircleShape:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.sp

import androidx.compose.ui.draw.shadow
import androidx.compose.ui.unit.dp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello METANIT.COM",
                fontSize = 28.sp,
                modifier = Modifier
                    .padding(20.dp) 
                    .shadow(4.dp, shape= CircleShape)
                    .padding(20.dp)
            )
        }
    }
}