如何在Android RecyclerView列表项中实现左侧指示形状视图？

Hey there! I’ve been in your shoes before—trying to add that custom left indicator to RecyclerView items without messing up the existing layout. Let’s break down two solid approaches: building it yourself (most flexible) or using a third-party library (quick win).

Option 1: Build It Yourself (Custom Drawable or View) #

Since you already have a CardView-based layout, adding a left indicator is straightforward. Here are two ways to do it:

Suboption 1: Use a Custom Shape Drawable #

This is the simplest method for basic shapes like rounded bars or triangles.

First, create a drawable file (res/drawable/left_indicator.xml) to define your indicator shape:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- Customize the color to match your design -->
    <solid android:color="#FF5722"/>
    <!-- Add rounded corners on the right side to match your CardView -->
    <corners android:topRightRadius="8dp" android:bottomRightRadius="8dp"/>
    <!-- For a triangle instead, replace the shape and corners with a path:
    <path android:pathData="M0,0 L20,10 L0,20 Z" android:fillColor="#FF5722"/>
    -->
</shape>

Then modify your layout_item.xml to include this indicator inside the CardView:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="8dp"
    card_view:cardElevation="4dp"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <!-- Left Indicator View -->
        <View
            android:layout_width="12dp"
            android:layout_height="match_parent"
            android:background="@drawable/left_indicator"
            android:layout_marginTop="4dp"
            android:layout_marginBottom="4dp"/>

        <!-- Your Existing Content Layout -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Your Item Title"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Your item description here..."
                android:textSize="14sp"
                android:textColor="#666666"/>

        </LinearLayout>

    </LinearLayout>

</android.support.v7.widget.CardView>

Suboption 2: Custom View for Complex Shapes #

If your indicator has a unique, non-standard shape (like slanted edges or custom curves), create a custom View to draw it directly:

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

    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.parseColor("#FF5722")
        style = Paint.Style.FILL
    }
    private val path = Path()

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        path.reset()
        // Example: Draw a slanted indicator—adjust the path to match your design
        path.moveTo(0f, 0f)
        path.lineTo(w.toFloat(), h * 0.2f)
        path.lineTo(w.toFloat(), h * 0.8f)
        path.lineTo(0f, h.toFloat())
        path.close()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawPath(path, paint)
    }
}

Then replace the View in your layout with this custom LeftIndicatorView:

<com.yourpackage.LeftIndicatorView
    android:layout_width="16dp"
    android:layout_height="match_parent"/>

Option 2: Third-Party Libraries #

If you want to skip the custom code, here are a couple of reliable libraries that support this kind of indicator:

• IndicatorRecyclerView: A lightweight library that lets you attach custom left/right indicators to RecyclerView items, with support for binding indicators to item states (like selected/unselected).
• Material Components for Android: Use ShapeAppearanceModel with a custom EdgeTreatment to modify the CardView itself, eliminating the need for an extra View. You can define the left edge shape directly in code or XML.

Final Tips #

• If you’re using Material Components, consider using ShapeableCard instead of the old CardView for better shape customization.
• Adjust the indicator’s width, color, and margins to match your app’s design system.

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