Thanh tiến trình với các góc tròn?

Tôi đang cố gắng đạt được thiết kế thanh tiến trình này:

Mã hiện tại mà tôi đã tạo:

Đây là mã:

<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>

Thanh tiến trình của tôi:

 <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"/>

Tôi đã thử thêm <size>thuộc tính vào <shape>trong <clipđể làm cho hình dạng tiến trình nhỏ hơn một chút nhưng nó không hoạt động. Ngoài ra, thanh tiến trình phẳng và tôi muốn được uốn cong theo thiết kế. Tôi cần thay đổi điều gì để đạt được thiết kế?

Làm thế nào để làm cho hình dạng tiến trình nhỏ hơn một chút?

Bạn cần tạo một khoảng đệm nhỏ cho mục tiến trình, như sau:

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

Làm thế nào để làm cho thanh tiến trình được uốn cong theo thiết kế?

Thay thế <clip></clip>phần tử, bằng <scale android:scaleWidth="100%"></scale>. Điều đó sẽ làm cho hình dạng giữ nguyên hình dạng khi lớn lên - và không bị cắt bỏ. Thật không may, nó sẽ có một chút hiệu ứng hình ảnh không mong muốn khi bắt đầu - vì các góc của hình dạng không có đủ không gian để vẽ. Nhưng nó có thể đủ tốt cho hầu hết các trường hợp.

Mã đầy đủ:

<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>

Cảm ơn Georgi Koemdzhiev về một câu hỏi và hình ảnh tốt đẹp. Đối với những ai muốn làm tương tự như của mình, hãy làm như sau.

1) Tạo nền cho 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) Tạo thang đo cho ProgressBar.

Cong_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) Trong tệp bố trí, thêm 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>

Với Chất liệu Thư viện Linh kiện bạn có thể sử dụng ProgressIndicatorvà các app:indicatorCornerRadiusthuộc tính.
Cái gì đó như:

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

Nó cũng hoạt động cho chỉ báo tiến trình xác định ( style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Determinate").

Lưu ý: nó yêu cầu ít nhất phiên bản 1.3.0-alpha03.

Bạn có thể đạt được thanh tiến trình với cả màu tiến trình bên trong, màu đường viền, tiến trình trống với màu trong suốt.

<?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>