androidandroid-drawableandroid-progressbar

Progress bar with rounded corners?


I am trying to achieve this progress bar design: enter image description here

The current code that I have produces this: enter image description here

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?


Solution

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