How to define gradient to circular progressBar

user_4977669 0
Viewed 2690

I have added a progress bar like following in my layout, i also added a color to it, and it works fine.

 <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:indeterminate="true"
        android:indeterminateTintMode="src_atop"
        android:indeterminateTint="@color/color"
        android:layout_gravity="center_vertical|center_horizontal"
        android:visibility="visible"
 />

But i need to add a gradient color on it. I added a gradient in colors folder like following.

<gradient android:type="linear"
    android:angle="0"
    android:startColor="#dc0336"
    android:endColor="#ff7f00"
    xmlns:android="http://schemas.android.com/apk/res/android" />

and then i assigned this color to the Progressbar

 android:indeterminateTint="@color/gradientColor"

But this does not work, I need to know a way to add a gradient to the progressBar

android-constraintlayout android-progressbar android-layout android
3 Answers

This is a late answer but I think this will help other people. Just Try Following the code.

drawable/loading_progressbar

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1440">
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="10"
        android:useLevel="false">
        <size
            android:width="60dp"
            android:height="60dp" />

        <gradient
            android:centerColor="#b43787"
            android:centerY="0.50"
            android:endColor="#7036a3"
            android:startColor="#f0376f"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

activity_main.xml

<ProgressBar
        android:id="@+id/loading_progress"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:indeterminateDrawable="@drawable/loading_progressbar"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

Result

Result

user_150052980

You should use android:progressDrawable instead of android:indeterminateTint.

Your code should look like below:

 <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:indeterminate="true"
        android:indeterminateTintMode="src_atop"
        android:progressDrawable="@drawable/gradientDrawable"
        android:layout_gravity="center_vertical|center_horizontal"
        android:visibility="visible"
 />

Use the following as your gradient Drawable. Name the file as gradientDrawable.xml and place it under your drawable directory.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="3.5"
    android:shape="ring"
    android:thickness="2.5dp"
    android:useLevel="false">
    <gradient
        android:angle="0"
        android:endColor="#ff7f00"
        android:startColor="#dc0336"
        android:type="linear" />
</shape>

I have tested your gradient and it looked like this:

enter image description here

user_23933090 
You can set gradient background to progress-bar as below:

<ProgressBar
   android:layout_width="75dp"
   android:layout_height="75dp"
   **android:progressDrawable="@drawable/circular"** />

**circular.xml**

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
  <shape
        android:shape="ring"
        android:thicknessRatio="10"
        android:useLevel="false">
      <solid android:color="#FA969C" />
    </shape>
  </item>
  <item>
    <rotate
        android:fromDegrees="270"
        android:toDegrees="270">
      <shape
          android:shape="ring"
          android:thicknessRatio="10"
          android:useLevel="true">
        <gradient
            android:centerColor="#CC3037"
            android:endColor="#ED4A52"
            android:startColor="#A11210"
            android:type="sweep" />
      </shape>
    </rotate>
  </item>
</layer-list>
user_115248730
Related