Прогрес бар із закругленими кутами?

Я намагаюся досягти такого дизайну барів прогресу:

Поточний код, який я маю, видає це:

Це код:

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

Мій індикатор прогресу:

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

Я спробував додати <size>атрибут на <shape>в, <clipщоб зробити форму прогресу трохи меншою, але це не спрацювало. Крім того, індикатор прогресу є плоским, і я хочу бути вигнутим відповідно до проекту. Що мені потрібно змінити для досягнення дизайну?

Як зробити форму прогресу дещо меншою?

Вам потрібно дати елементу прогресу трохи відступів, наприклад:

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

Як зробити так, щоб індикатор прогресу був вигнутим відповідно до дизайну?

Замініть <clip></clip>елемент на <scale android:scaleWidth="100%"></scale>. Це змусить форму зберігати форму у міру зростання - і не обрізати. На жаль, на початку це матиме небажаний візуальний ефект - оскільки куточки фігури не мають достатньо місця для малювання. Але це може бути досить добре для більшості випадків.

Повний код:

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

За допомогою бібліотеки компонентів матеріалів ви можете використовувати атрибут LinearProgressIndicatorand app:trackCornerRadius.
Щось на зразок:

    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:indeterminate="true"
        app:trackThickness="xxdp"
        app:trackCornerRadius="xdp"/>

Він також працює для визначеного індикатора прогресу, що видаляє android:indeterminate="true"або використовуєandroid:indeterminate="false"

Примітка: для цього потрібна принаймні версія 1.3.0-alpha04.

Дякую Георгію Кемджієву за приємне запитання та зображення. Для тих, хто хоче зробити подібне до нього, зробіть наступне.

1) Створіть фон для 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) Створіть шкалу для 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) У файл макета додайте файл 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>

Ви можете досягти індикатора прогресу як з внутрішнім кольором прогресу, кольором межі, так і з порожнім ходом за допомогою прозорого кольору.

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