如何实现符合参考样式的Android环形ProgressBar？

我看了你的代码和需求，问题主要出在背景层的样式设置以及层级叠加的细节上，下面给你一步步的修改方案：

现有代码的核心问题 #

1. 背景层同时使用了<solid>和<stroke>：solid会填充环形的整个厚度区域，直接覆盖了stroke的边框效果，导致你看不到预期的内边框和背景环。
2. SecondaryProgress层和Progress层完全重复：这会导致两层渐变环叠加，不仅没必要还可能干扰显示效果。
3. 环形参数的比例需要微调，来匹配目标样式的层次感。

修改后的Drawable代码（xml_custom_circular_progress.xml） #

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 背景环：细的浅灰色环形边框 -->
    <item android:id="@android:id/background">
        <shape
            android:shape="ring"
            android:innerRadiusRatio="2.4"
            android:thicknessRatio="30"
            android:useLevel="false">
            <!-- 只保留stroke实现背景细环，去掉solid避免填充覆盖 -->
            <stroke
                android:width="2dp"
                android:color="@color/your_light_gray_color" /> <!-- 替换成你需要的背景浅灰色 -->
        </shape>
    </item>

    <!-- 进度环：渐变彩色环形，厚度比背景环稍宽 -->
    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%">
            <shape
                android:shape="ring"
                android:innerRadiusRatio="2.5"
                android:thicknessRatio="25"
                android:useLevel="true"> <!-- 必须设为true，否则进度不会生效 -->
                <gradient
                    android:type="sweep"
                    android:startColor="@color/history_graph_gradient_start"
                    android:centerColor="#0033C2"
                    android:endColor="@color/history_graph_gradient_end" />
            </shape>
        </rotate>
    </item>
</layer-list>

关键修改说明 #

• 背景层优化：移除了<solid>标签，只用<stroke>来实现细背景环，这样内边框（背景环）就能正常显示，不会被填充色覆盖。
• 层级参数调整：微调了innerRadiusRatio和thicknessRatio，让进度环和背景环形成自然的层次感（你可以根据实际视觉效果再调整这两个数值，数值越小对应尺寸越大）。
• 移除冗余层级：删掉了SecondaryProgress层，除非你确实需要二级进度显示，否则这个层会和进度环重叠导致异常。
• useLevel参数：背景层必须设为false（不需要跟随进度变化），进度层必须设为true（跟随进度值显示），这是环形进度生效的关键。

布局代码的小优化 #

可以给ProgressBar加上android:indeterminate="false"明确禁用不确定模式，避免潜在的显示问题：

<ProgressBar
    android:id="@+id/percentage_circle"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="161dp"
    android:layout_height="161dp"
    android:max="100"
    android:progress="0"
    android:indeterminate="false"
    android:progressDrawable="@drawable/xml_custom_circular_progress" />

调试小贴士 #

• 检查颜色资源是否正确，确保背景色是你想要的浅灰色。
• 如果环形比例不对，微调innerRadiusRatio（控制内圈大小）和thicknessRatio（控制环的厚度）：数值越小，对应的尺寸越大。
• 确保ProgressBar的宽高一致，否则环形会被拉伸成椭圆形。

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