How to set the secondary color of determinate circular progress bar

Question

I want to change the primary and secondary colors of the determinate progress bar which are green and grey respectively. Android default progress bar does not even show the secondary progress. How can i achieve this? thanks !

<ProgressBar
        android:id="@+id/progress_circular"
        android:layout_width="256dp"
        android:layout_height="256dp"
        android:indeterminate="false"
        style="?android:attr/progressBarStyleLarge"
        android:layout_marginTop="18dp"
        app:layout_constraintTop_toBottomOf="@id/textView2"
        app:layout_constraintStart_toStartOf="@id/mainView"
        android:progress="50"
        app:layout_constraintEnd_toEndOf="@id/mainView"
        />

@MushahidGillani refer this answer https://stackoverflow.com/a/2021119/2772969 — Prashant Hingrajiya, Feb 11 '19 at 06:12

Mukhit · Accepted Answer · 2020-01-15T06:25:05.917

You can create custom progressbar style.

custom_progress.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
              android:innerRadiusRatio="2.8"
              android:shape="ring"
              android:useLevel="false"
              android:type="sweep"
              android:thicknessRatio="18.0">
              <solid android:color="@color/red"/>
         </shape>
    </item>
    <item android:id="@android:id/progress">
        <rotate
              android:pivotX="50%"
              android:pivotY="50%"
              android:fromDegrees="-90"
              android:toDegrees="-90">
              <shape
                  android:innerRadiusRatio="2.8"
                  android:shape="ring"
                  android:angle="0"
                  android:type="sweep"
                  android:thicknessRatio="18.0">
                  <solid android:color="@color/blue"/>

            </shape>
        </rotate>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                  <corners android:radius="5dip" />
                  <solid android:color="@color/secondaryColor"/>
            </shape>
        </clip>
    </item>

</layer-list>

and in xml:

 <ProgressBar
      android:layout_centerInParent="true"
      android:id="@+id/winRateProgressBar"
      android:layout_width="48dp"
      android:layout_height="48dp"
      style="?android:attr/progressBarStyleHorizontal"
      android:indeterminate="false"
      android:max="100"
      android:progress="20"
      android:progressDrawable="@drawable/custom_progress"/>

how can i make the edges round of a progress like the picture above — Mushahid Gillani, Feb 11 '19 at 06:40
Sorry. I just looked at your question. I edited my answer in top)) You can look at! — Mukhit, Jan 15 '20 at 06:27

score 0 · Answer 2 · answered Feb 11 '19 at 06:32

To customize progress bar do this

in xml.

<ProgressBar
            android:id="@+id/progress_circular"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="256dp"
            android:layout_height="256dp"
            android:layout_marginTop="18dp"
            app:layout_constraintTop_toBottomOf="@id/textView2"
            app:layout_constraintStart_toStartOf="@id/mainView"
            android:progress="50"
            app:layout_constraintEnd_toEndOf="@id/mainView"
            android:background="@drawable/circle_shape"
            android:indeterminate="false"
            android:progressDrawable="@drawable/circular_progress_bar" />

where circle_shape xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.5"
    android:thickness="1dp"
    android:useLevel="false">

    <solid android:color="#CCC" /> // use your color here 

</shape>

and circular_progress_bar xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="2dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#ffffff"
            android:startColor="#ffffff"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

How to set the secondary color of determinate circular progress bar

2 Answers2