自定义进度栏中的圆形渐变 [英] Rounded gradient in custom Progress Bar

问题描述

您将如何像在屏幕上那样为ProgressBar制作圆角渐变?

How would you make rounded gradient for ProgressBar like on screen?

我现在所拥有的:

pb_shape.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <corners android:radius="12dip" />

        <stroke
            android:width="1dip"
            android:color="@color/primary_white" />

        <gradient
            android:angle="270"
            android:centerColor="@color/primary_black"
            android:centerY="0.5"
            android:endColor="@color/primary_black"
            android:startColor="@color/primary_black"/>

        <padding
            android:bottom="4dp"
            android:left="4dp"
            android:right="4dp"
            android:top="4dp" />
    </shape>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="12dip" />
            <gradient
                android:angle="0"
                android:endColor="@color/primary_teal"
                android:startColor="@color/primary_blue_dark" />             
        </shape>
    </clip>
</item>

<ProgressBar
        android:id="@+id/pb_timer"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:progressDrawable="@drawable/pb_shape" />

我已经尝试将android:gradientRadius="12dip"添加到pb_shape中，但是没有效果.

I already tried to add android:gradientRadius="12dip" to pb_shape but it takes no effect.

推荐答案

似乎我找到了一种解决方法，感谢您提供正确的搜索@krislarson和

Seems like I found a workaround thanks for giving right direction to search to @krislarson and this post

结果代码: pb_shape.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">

    <shape android:shape="rectangle">

        <corners android:radius="12dip" />

        <stroke
            android:width="1dip"
            android:color="@color/primary_white" />

        <gradient
            android:angle="270"
            android:centerColor="@color/primary_black"
            android:centerY="0.5"
            android:endColor="@color/primary_black"
            android:gradientRadius="12dip"
            android:startColor="@color/primary_black" />
    </shape>
</item>

<item android:id="@android:id/progress">
    <scale
        android:drawable="@drawable/pb_custom_progress"
        android:scaleWidth="98%" />
</item>
</layer-list>

pb_custom_progress.xml神奇之处在于:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<!--make it rounded-->
<corners
    android:radius="20dp"
    android:topLeftRadius="20dp"
    android:topRightRadius="20dp" />

<gradient
    android:angle="0"
    android:endColor="@color/primary_teal"
    android:startColor="@color/primary_blue_dark" />

<!--create invisible stroke for padding-->
<stroke
    android:width="6dip"
    android:color="@android:color/transparent"/>

</shape>

结果:

这篇关于自定义进度栏中的圆形渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！