androidmaterial-designandroid-progressbarmaterial-components-androidprogress-indicator

Android Circular Determinate ProgressBar


I want to create a Circluar Determinate ProgressBar, the kind which shows the Progress in the center of the Bar. Is there any default way to create this, or will i have to create my own custom one.


Solution

  • First add a progress_circle.xml to your res/drawable directory like this:

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:drawable="@drawable/progress_circular_background"/>
    <item>
        <shape
            android:innerRadiusRatio="3.4"
            android:shape="ring"
            android:thicknessRatio="6.0" >
            <gradient
                android:endColor="#ffffffff"
                android:startColor="#ffffff"
                android:type="sweep"
                android:useLevel="true" />
        </shape>
    </item>
    <item>
        <rotate
            android:drawable="@drawable/progress_particle"
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="360" />
    </item>
    
    </layer-list>
    

    I Googled image searched both "progress_particle.png" and "progress_circular_background.png" (with quotes) since the android default drawables for those were missing. You'll probably want to customize those but they'll do to get you started.

    Then in your xml layout:

    <ProgressBar
        android:id="@+id/timer_progress"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:indeterminate="false"
        android:max="60"
        android:progressDrawable="@drawable/progress_circle" />
    

    My max is 60, since I'm using it for a seconds timer, but you might have something different.

    The trick is that you need to use style="?android:attr/progressBarStyleHorizontal" even though it's a circular progress.