Fortschrittsbalken mit abgerundeten Ecken?

Ich versuche, dieses Fortschrittsbalken-Design zu erreichen:

Der aktuelle Code, den ich habe, erzeugt Folgendes:

Dies ist der Code:

<item android:id="@android:id/background">
    <shape>
        <corners android:radius="8dp"/>
        <solid android:color="@color/dirtyWhite"/>
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </clip>
</item>

Mein Fortschrittsbalken:

 <ProgressBar
            android:id="@+id/activeProgress"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:progress="10"
            android:progressDrawable="@drawable/rounded_corners_progress_bar"/>

Ich habe versucht , das Hinzufügen <size>Attribut auf die <shape>in <clipder Fortschritt etwas kleiner Form zu machen , aber es hat nicht funktioniert. Außerdem ist der Fortschrittsbalken flach und ich möchte gemäß Design gebogen werden. Was muss ich ändern, um das Design zu erreichen?

Wie kann man die Fortschrittsform etwas verkleinern?

Sie müssen dem Fortschrittselement eine kleine Polsterung geben, wie folgt:

<item android:id="@android:id/progress"
    android:top="2dp"
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp">

Wie kann der Fortschrittsbalken gemäß dem Design gekrümmt werden?

Ersetzen Sie das <clip></clip>Element durch <scale android:scaleWidth="100%"></scale>. Dadurch behält die Form ihre Form, wenn sie wächst - und nicht abgeschnitten. Leider hat es zu Beginn einen etwas unerwünschten visuellen Effekt, da die Formecken nicht genügend Platz zum Zeichnen haben. Aber es könnte für die meisten Fälle gut genug sein.

Vollständiger Code:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:id="@android:id/background">
    <shape>
        <corners android:radius="8dp"/>
        <solid android:color="@color/dirtyWhite"/>
    </shape>
 </item>

 <item android:id="@android:id/progress"
    android:top="1dp"
    android:bottom="1dp"
    android:left="1dp"
    android:right="1dp">

    <scale android:scaleWidth="100%">
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </scale>
 </item>
</layer-list>

Vielen Dank an Georgi Koemdzhiev für eine schöne Frage und Bilder. Für diejenigen, die ähnlich wie er machen wollen, machen Sie Folgendes.

1) Erstellen Sie einen Hintergrund für a ProgressBar .

progress_bar_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <corners android:radius="3dp" />
    <stroke android:color="@color/white" android:width="1dp" />
</shape>

2) Erstellen Sie eine Skala für die ProgressBar .

curved_progress_bar.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="2dp" />
            <solid android:color="@color/transparent" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="2dp" />
                <solid android:color="#ffff00" />
            </shape>
        </clip>
    </item>
</layer-list>

3) Fügen Sie in der Layoutdatei die ProgressBar.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="6dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="20dp"
    android:background="@drawable/progress_bar_background"
    >

    <ProgressBar
        android:id="@+id/progress_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_margin="1dp"
        android:indeterminate="false"
        android:progressDrawable="@drawable/curved_progress_bar"
        />

</FrameLayout>

Sie können einen Fortschrittsbalken sowohl mit der inneren Fortschrittsfarbe als auch mit der Rahmenfarbe und dem leeren Fortschritt mit transparenter Farbe erzielen.

<?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="15dip" />
        <stroke android:width="1dp" android:color="@color/black" />
    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:startColor="@color/black"
                android:centerColor="@color/trans"
                android:centerY="0.75"
                android:endColor="@color/black"
                android:angle="270"

                />
        </shape>
    </clip>
 </item>


 <item
    android:id="@android:id/progress"
    >
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <gradient
                android:startColor="@color/black"
                android:endColor="@color/black"
                android:angle="270" />
        </shape>
    </clip>
 </item>
 </layer-list>

Mit der Material Components Library können Sie das ProgressIndicatorund das app:indicatorCornerRadiusAttribut verwenden.
Etwas wie:

    <com.google.android.material.progressindicator.ProgressIndicator
        style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Indeterminate"
        app:indicatorSize="xxdp"
        app:indicatorCornerRadius="xdp"/>

Es funktioniert auch für den bestimmten Fortschrittsindikator ( style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Determinate").

Hinweis: Es ist mindestens die Version erforderlich 1.3.0-alpha03.