Android中如何为自定义View添加阴影？实现指定参数的自定义按钮阴影需求

Got it, let's get that exact shadow effect added to your custom Android button. Since Android doesn’t have a direct equivalent to CSS’s box-shadow, we can replicate your specified parameters (10px 7px 25px 0px #0000001F) using your existing drawable and layout files with a few tweaks. Here's how:

Step 1: Update the Background Drawable (main_round_teamsbtn.xml) #

We’ll add the shadow directly to your button shape using the <shadow> tag, which maps perfectly to your box-shadow values:

• android:dx="10dp" → matches the 10px rightward horizontal offset
• android:dy="7dp" → matches the 7px downward vertical offset
• android:radius="25dp" → matches the 25px blur radius
• android:color="#0000001F" → matches the semi-transparent black shadow color

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:padding="10dp" android:shape="rectangle">
            <solid android:color="@color/btn_color" />
            <corners 
                android:bottomLeftRadius="5dp" 
                android:bottomRightRadius="5dp" 
                android:topLeftRadius="5dp" 
                android:topRightRadius="105dp" />
            <!-- Add shadow matching your box-shadow parameters -->
            <shadow
                android:radius="25dp"
                android:dx="10dp"
                android:dy="7dp"
                android:color="#0000001F" />
        </shape>
    </item>
</layer-list>

Step 2: Adjust the Button Container (teams_main_btn.xml) #

By default, Android Views clip content to their padding, which would cut off the shadow. We need to disable this clipping and add extra padding to make space for the shadow without pushing your internal content around:

<?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="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/main_round_teamsbtn"
    android:paddingStart="16dp"
    <!-- Add extra padding to fit the shadow offset -->
    android:paddingEnd="26dp" <!-- 16dp original + 10dp shadow right offset -->
    android:paddingTop="23dp" <!-- 16dp original +7dp shadow down offset -->
    android:paddingBottom="16dp"
    <!-- Disable clipping so shadow is visible outside the View bounds -->
    android:clipToPadding="false">

    <!-- Your existing TextView and ImageView code stays exactly the same -->
    <TextView
        android:id="@+id/teamsHead"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/notosans_bold"
        android:includeFontPadding="false"
        android:text="원하는\n공모전을\n찾아보세요"
        android:textColor="@color/black"
        android:textSize="22sp"
        app:layout_constraintBottom_toTopOf="@+id/teamsSub" />

    <TextView
        android:id="@+id/teamsSub"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/notosans_regular"
        android:text="현재 구하고 있는 팀 둘러보기"
        android:textColor="#8C8C8C"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="parent" />

    <ImageView
        android:id="@+id/teamsImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="4dp"
        android:background="@drawable/findteams_btn"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Double-Check Your Custom View #

Make sure your MainTeamsBtnView is correctly inflating the updated layout. If you haven’t already, your custom View class should look like this (adjust the package name as needed):

class MainTeamsBtnView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : ConstraintLayout(context, attrs, defStyleAttr) {

    init {
        LayoutInflater.from(context).inflate(R.layout.teams_main_btn, this, true)
    }
}

Quick Notes #

• We use dp instead of px for better compatibility across different screen densities. If you need pixel-perfect alignment, you can convert dp to px programmatically, but dp is the recommended standard.
• If the shadow blur doesn’t match your design exactly, tweak the android:radius value slightly—Android’s shadow rendering works a bit differently from CSS, so small adjustments might be needed.

内容的提问来源于stack exchange，提问作者ksssssw