CODEWITHSUNDEEP
androidandroid-layoutandroid-xmlandroid-progressbar
Mushahid Gillani
Mushahid Gillani

Reputation: 753

How to set the secondary color of determinate circular progress bar

circular progress bar

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

Upvotes: 1

Views: 1444

Answers (2)

Mukhit
Mukhit

Reputation: 162

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

Upvotes: 2

Quick learner
Quick learner

Reputation: 11457

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>

Upvotes: 0

Related Questions