Error when trying to change the corner radius of Android ProgressBar

user_1494902 0
Viewed 561

I have a ProgressBar widget with Widget.AppCompat.ProgressBar.Horizontal style:

<ProgressBar
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

When digging into Widget.AppCompat.ProgressBar.Horizontal (it uses Widget.Material internally) style definition in the AppCompat source codes, I've found that for API 21+ it uses a following drawable:

<style name="Widget.Material.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal">
    <item name="progressDrawable">@drawable/progress_horizontal_material</item>
    ...
</style>

Here is a fragment of progress_indeterminate_horizontal_material:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@id/background"
          android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle"
               android:tint="?attr/colorProgressBackgroundNormal">
            <corners android:radius="?attr/progressBarCornerRadius" />
            <size android:height="@dimen/progress_bar_height_material" />
            <solid android:color="@color/white_disabled_material" />
        </shape>
    </item>

It uses ?attr/colorProgressBackgroundNormal attribute, however when I'm trying to set the value of this attribute in my application theme with the following line:

<item name="progressBarCornerRadius">2dp</item>

then I'm getting a compilation error:

AAPT: error: style attribute 'attr/progressBarCornerRadius (aka com.application:attr/progressBarCornerRadius)' not found.
material-components material-components-android android-theme android-progressbar android
2 Answers

The attribute name is android:progressBarCornerRadius but it is private.

You can use a ProgressBar with a custom style:

<style name="customProgressBar" parent="Widget.AppCompat.ProgressBar.Horizontal">
   <item name="progressDrawable">@drawable/custom_progress_horizontal</item>
</style>

Otherwise you can use the new LinearProgressIndicator provided by the Material Components Library:

    <com.google.android.material.progressindicator.LinearProgressIndicator             
        android:indeterminate="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:trackThickness="10dp"
        app:trackCornerRadius="8dp"/>

Note: it requires at least the version 1.3.0-alpha04.

enter image description here

user_20165620

How to make the progress bar to be curved?

Replace the element, with . That will make the shape keep its form as it grows - and not cut off. Unfortunately, it will have a little unwanted visual effect at the beginning - as the shape corners don't have enough space to draw. But it might be good enough for most cases.

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

output

enter image description here

user_139879520
Related