Android Studio中添加SVG Item后Layer-List内圆形Drawable消失问题求助

Hey there! Let's break down why your red circle is disappearing and how to fix this step by step:

First, the root cause of the missing circle #

Your circle shape has a stroke set to 69dp—that's the exact size of your ImageView's width/height! When you add a stroke to a shape, it adds that width outside the shape's content area. So your circle's total size becomes 69dp (content) + 69dp*2 (left/right stroke) = 207dp, which is way bigger than your 69dp ImageView. The circle gets completely pushed outside the visible area, so you only see the triangle.

Plus, you already have a solid color filling the oval—you don't need that thick stroke at all (unless you want a border, but even then, 69dp is way too much).

Second, your offset attributes are misused #

The android:left, right, etc. attributes on layer-list items work like this:

• Positive values: Push the item's content inward (e.g., left="10dp" means the content starts 10dp from the left edge)
• Negative values: Expand the item's content outward

Your values (120dp, -128dp) are way larger than your ImageView's 69dp size, so the triangle ends up in a totally wrong position. Instead of messing with these offsets, just use android:gravity="center" to align the triangle in the middle of the circle.

Third, your SVG has mismatched dimensions #

Your triangle SVG has android:width="29px" and android:height="29px" but android:viewportWidth="69" and android:viewportHeight="69". This mismatch will scale the SVG incorrectly, making it look tiny or distorted. We need to fix this to match your 69dp ImageView.

Fixed Code Examples #

1. Updated triangle.xml (SVG)

We'll set the SVG's width/height to match your ImageView, and keep the viewport aligned:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="69dp"
    android:height="69dp"
    android:viewportWidth="69"
    android:viewportHeight="69">
    <path
        android:pathData="M30.743,11.826C32.929,12.938 32.929,16.062 30.743,17.174L8.86,28.304C6.864,29.319 4.5,27.869 4.5,25.63L4.5,3.37C4.5,1.131 6.864,-0.319 8.86,0.696L30.743,11.826Z"
        android:fillColor="#F30000"/>
    <path
        android:pathData="M30.289,16.283L8.407,27.413C7.076,28.089 5.5,27.123 5.5,25.63L5.5,3.37C5.5,1.877 7.076,0.911 8.407,1.587L30.289,12.717C31.747,13.459 31.747,15.541 30.289,16.283Z"
        android:strokeWidth="2"
        android:fillColor="#00000000"
        android:strokeColor="#ffffff"/>
</vector>

2. Updated button.xml (layer-list)

We'll remove the oversized stroke, and use gravity to center the triangle:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Red circle background -->
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/red_max" />
            <!-- Optional: Add a thin border if you want, e.g.: -->
            <!-- <stroke android:width="2dp" android:color="#ffffff" /> -->
        </shape>
    </item>
    <!-- Centered play triangle -->
    <item android:gravity="center">
        <android.graphics.drawable.VectorDrawableCompat
            android:src="@drawable/triangle" />
        <!-- Or simply: android:drawable="@drawable/triangle" -->
    </item>
</layer-list>

Why this works #

• The circle shape now fits perfectly inside your 69dp ImageView (no oversized stroke pushing it out).
• The triangle SVG is sized to match the ImageView, so it scales correctly.
• android:gravity="center" ensures the triangle sits right in the middle of the red circle, no messy offsets needed.

Your ImageView code can stay exactly as it is—this should now show the red circle with the play triangle centered inside it!

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