Android CardView阴影效果实现:仅用Shape或CardView属性
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
cardBackgroundColorto transparent.
内容的提问来源于stack exchange,提问作者Arpan24x7




