Android ConstraintLayout（含Flow）：能否不使用CardView实现阴影与圆角？

Absolutely! You don’t need CardView to add shadows (elevation) and rounded corners to a ConstraintLayout Flow component. Since Flow is just a helper that arranges views, we can customize its background and outline to achieve that CardView-like look. Here are two straightforward methods:

Method 1: Native Android Approach with GradientDrawable + ViewOutlineProvider #

This works for any Android project, no extra libraries needed beyond the default ConstraintLayout dependency.

1. First, set a basic elevation on your Flow in XML to enable shadow support:

<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/flow_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="8dp" <!-- This enables the shadow -->
    android:padding="16dp" <!-- Add padding to keep content inside the rounded area -->
    app:constraint_referenced_ids="tag1,tag2,tag3,tag4"
    app:flow_horizontalGap="8dp"
    app:flow_verticalGap="8dp"
    app:flow_wrapMode="chain" />

2. Then, in your Kotlin/Java code, create a rounded background and set an outline provider so the shadow matches the rounded corners:

val flow = findViewById<Flow>(R.id.flow_container)

// Create a rounded white background
val roundedBackground = GradientDrawable().apply {
    shape = GradientDrawable.RECTANGLE
    cornerRadius = 16f.dpToPx(resources.displayMetrics) // Convert dp to pixels
    setColor(Color.WHITE)
}
flow.background = roundedBackground

// Make the shadow follow the rounded corners
flow.outlineProvider = object : ViewOutlineProvider() {
    override fun getOutline(view: View, outline: Outline) {
        outline.setRoundRect(0, 0, view.width, view.height, 16f.dpToPx(resources.displayMetrics))
    }
}
// Optional: Set to true if you want the Flow's content clipped to the rounded corners
flow.clipToOutline = true

(Note: You’ll need a helper function to convert dp to pixels, like fun Float.dpToPx(metrics: DisplayMetrics): Float = this * metrics.density)

Method 2: Material Components Approach (Recommended) #

If your project uses the Material Components library (most modern Android projects do), MaterialShapeDrawable makes this even easier, with support for more flexible styling (like different corner sizes per edge) and proper Material Design shadow behavior.

1. Keep the elevation in your XML layout (same as Method 1):

<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/flow_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="8dp"
    android:padding="16dp"
    app:constraint_referenced_ids="tag1,tag2,tag3,tag4"
    app:flow_horizontalGap="8dp"
    app:flow_verticalGap="8dp"
    app:flow_wrapMode="chain" />

2. In code, use MaterialShapeDrawable to handle both the rounded background and shadow:

val flow = findViewById<Flow>(R.id.flow_container)

val shapeDrawable = MaterialShapeDrawable(
    ShapeAppearanceModel.builder()
        .setAllCornerSizes(16f.dpToPx(resources.displayMetrics))
        // You can set individual corners too, e.g.:
        // .setTopLeftCornerSize(24f.dpToPx(resources.displayMetrics))
        .build()
).apply {
    fillColor = ContextCompat.getColorStateList(this@MainActivity, android.R.color.white)
    elevation = flow.elevation
    shadowCompatibilityMode = MaterialShapeDrawable.SHADOW_COMPAT_MODE_ALWAYS
}

flow.background = shapeDrawable

Key Notes #

• Shadows only work on Android 5.0 (API 21) and above. For older versions, you’ll need to use a 9-patch image to simulate shadows.
• Make sure your Flow’s layout_width/layout_height is set appropriately (usually wrap_content) so the background wraps all its child views. Adding padding helps prevent child views from touching the rounded edges.
• Avoid setting high elevation on the Flow’s child views, as they’ll draw their own shadows on top of the Flow’s shadow.

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