咨询：Android RecyclerView列表项添加侧边三角箭头的Drawable实现

Hey there! I’ve got you covered on adding that side triangle arrow while keeping your main rectangles aligned at the same X-coordinate. Here’s a step-by-step solution using XML Drawables, which plays nicely with your existing LinearLayout + 3 RelativeLayout setup:

Core Idea #

We’ll use a layer-list drawable to combine two elements:

1. A main rectangle (kept aligned consistently across all items)
2. A triangle arrow that extends beyond the main rectangle (using negative margins to "invade" adjacent layout space)

Step 1: Create the Custom Background Drawable #

Create a new XML file in res/drawable (e.g., list_item_with_right_arrow.xml):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 1. Main Rectangle (stays aligned at same X-coordinate) -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <stroke android:width="1dp" android:color="#E0E0E0"/>
            <corners android:radius="4dp"/>
            <!-- Add padding to keep content away from the arrow area -->
            <padding android:right="16dp"/>
        </shape>
    </item>

    <!-- 2. Right Triangle Arrow (extends outside main rectangle) -->
    <item
        android:right="-8dp"  <!-- Negative margin pushes arrow outside -->
        android:top="12dp"
        android:bottom="12dp">
        <shape android:shape="polygon">
            <solid android:color="#FFFFFF"/>
            <stroke android:width="1dp" android:color="#E0E0E0"/>
            <size android:width="8dp" android:height="32dp"/>
            <!-- Define triangle vertices (right-pointing arrow) -->
            <polygon android:points="0,0 8,16 0,32"/>
        </shape>
    </item>
</layer-list>

Key Details: #

• Negative Margin: android:right="-8dp" makes the arrow extend 8dp to the right of the main rectangle, letting it invade the adjacent layout space.
• Triangle Shape: The polygon uses three points to form a right-pointing arrow. Adjust the points value if you need a left-pointing arrow (e.g., 8,0 0,16 8,32).
• Padding: The main rectangle’s android:right="16dp" ensures your item content doesn’t overlap with the arrow area.

Step 2: Apply the Drawable to Your Layouts #

In your existing RecyclerView item layout (the one with three nested RelativeLayouts), set this drawable as the android:background for each RelativeLayout:

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

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/list_item_with_right_arrow"
        android:padding="16dp">
        <!-- Your content here -->
    </RelativeLayout>

    <!-- Repeat for the other two RelativeLayouts, adjust arrow direction if needed -->
</LinearLayout>

Step 3: Add Selected State (Optional) #

If you need a highlighted state when the item is selected, create a selector drawable (e.g., list_item_selector.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/list_item_with_right_arrow_selected" android:state_selected="true"/>
    <item android:drawable="@drawable/list_item_with_right_arrow"/>
</selector>

Just duplicate your original arrow drawable, change the solid color to a selected-state hue, and use this selector as the background instead.

Final Notes #

• Adjust the arrow size, position, and color by tweaking the size, top/bottom margins, and solid/stroke colors in the drawable.
• This approach keeps your main rectangle’s X-coordinate consistent across all items, since only the arrow extends beyond the bounds.

内容的提问来源于stack exchange，提问作者mac-man