Progress bar with rounded corners?

Question

I am trying to achieve this progress bar design:

The current code that I have produces this:

This is the 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> 

My progress bar:

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

I tried adding <size> attribute on the <shape> in <clip to make the progress shape a bit smaller but it did not work. Also, the progress bar is flat and I want to be curved as per design. What I need to change in order to achieve the design?

Answer 1

How to make the progress shape a bit smaller?

You need to give the progress item a little padding, like so:

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

How to make the progress bar to be curved as per design?

Replace the <clip></clip> element, with <scale android:scaleWidth="100%"></scale>. 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> 

Answer 2

With the Material Components Library you can use the LinearProgressIndicator and the app:trackCornerRadius attribute.
Something like:

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

It works also for the determinate progress indicator removing the android:indeterminate="true" or using android:indeterminate="false"

Note: it requires at least the version 1.3.0.