You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Android CardView阴影效果实现:仅用Shape或CardView属性

How to Implement Custom Shadow Effects for Android CardView (No White Background, No Canvas/9-Patch)

Got it, let's break this down properly to meet all your requirements. We'll use CardView's native properties for shadows and a Shape Drawable for the content background, ditching the default white background entirely.

Step 1: Configure CardView to Remove Default White Background & Enable Shadows

First, tweak CardView's built-in attributes to make its background transparent and set up shadow parameters. Here's the XML for the CardView itself:

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    <!-- Remove default white background -->
    app:cardBackgroundColor="@android:color/transparent"
    <!-- Set shadow depth (adjust value for stronger/softer shadow) -->
    app:cardElevation="8dp"
    <!-- Max shadow height (for when the CardView is elevated, e.g., on click) -->
    app:cardMaxElevation="12dp"
    <!-- Ensure shadows aren't clipped on older Android versions -->
    app:cardUseCompatPadding="true"
    <!-- Optional: Add padding between shadow and content -->
    app:contentPadding="16dp">

    <!-- We'll add our content layout with a Shape Drawable background here -->

</androidx.cardview.widget.CardView>

Key Attribute Explanations:

  • cardBackgroundColor="@android:color/transparent": Wipes out CardView's default white background, so only the shadow and our custom content background will be visible.
  • cardElevation: Controls the size and intensity of the shadow—higher values mean a more prominent shadow.
  • cardUseCompatPadding="true": Critical for pre-Android 7.0 devices, where CardView would otherwise clip the shadow. This adds extra padding to ensure the shadow displays fully.

Step 2: Create a Custom Shape Drawable for Content Background

Next, make a Shape Drawable to define the background of our CardView's content (since we removed the default white one). Create a new file in res/drawable/ called custom_card_background.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- Custom background color (replace with your desired color) -->
    <solid android:color="#E3F2FD"/>
    <!-- Optional: Add rounded corners to match CardView's shadow shape -->
    <corners android:radius="8dp"/>
    <!-- Optional: Add a subtle border -->
    <stroke
        android:width="1dp"
        android:color="#BBDEFB"/>
</shape>

You can customize this shape however you want—adjust the solid color, corner radius, stroke width/color, or even add gradients.

Step 3: Add Content Layout to CardView

Now, wrap your actual content (TextViews, ImageViews, etc.) inside a layout (like LinearLayout or ConstraintLayout) and set its background to the Shape Drawable we just created:

<androidx.cardview.widget.CardView
    <!-- ... keep the attributes from Step 1 ... -->
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_card_background"
        android:orientation="vertical"
        android:padding="16dp">

        <!-- Your content goes here -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Custom Shadow CardView Example"
            android:textSize="18sp"/>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/your_image"
            android:layout_marginTop="12dp"/>

    </LinearLayout>

</androidx.cardview.widget.CardView>

Bonus: Custom Shadow Color (API 28+)

If you're targeting Android 9 (API Level 28) or higher, you can customize the shadow color directly with CardView's built-in attribute:

app:cardShadowColor="#99336699" <!-- Semi-transparent blue shadow -->

Why This Works

  • We're using only CardView's native properties (cardElevation, cardBackgroundColor, etc.) to generate the shadow—no Canvas drawing required.
  • The content background is a Shape Drawable, which meets your requirement of avoiding 9-Patch images.
  • The default white background is completely removed by setting cardBackgroundColor to transparent.

内容的提问来源于stack exchange,提问作者Arpan24x7

火山引擎 最新活动