Custom progress drawable not working on Android Lollipop (API 21) devices

Question

I have a progress drawable which does not work properly on devices running Android Lollipop.

Screenshot on M

Screenshot on Lollipop

circle_percentage_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="oval">
      <solid android:color="@color/colorTranslucentBlack"/>
    </shape>
  </item>
  <item android:id="@android:id/progress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270">
      <shape
          android:innerRadiusRatio="2.5"
          android:shape="ring"
          android:thicknessRatio="25.0">
        <gradient
            android:centerColor="@android:color/holo_red_dark"
            android:endColor="@android:color/holo_red_dark"
            android:startColor="@android:color/holo_red_dark"
            android:type="sweep"/>
      </shape>
    </rotate>
  </item>
  <item android:id="@android:id/secondaryProgress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270">
      <shape
          android:innerRadiusRatio="2.5"
          android:shape="ring"
          android:thicknessRatio="25.0">
        <gradient
            android:centerColor="@android:color/holo_red_dark"
            android:endColor="@android:color/holo_red_dark"
            android:startColor="@android:color/holo_red_dark"
            android:type="sweep"/>
      </shape>
    </rotate>
  </item>

</layer-list>

---

This drawable is used as a background to ProgressView like this:

<ProgressBar
      android:id="@+id/circle_progress"
      style="?android:attr/progressBarStyleHorizontal"
      android:layout_width="70dp"
      android:layout_height="70dp"
      android:gravity="center"
      android:progress="65"
      android:indeterminate="false"
      android:progressDrawable="@drawable/circle_percentage_drawable"
      />

The renders as a circle drawn to 65% show up on devices running Android M, KitKat, Jellybean. However, if the same code is run on Android Lollipop (API 21) the circle shows as 100%.

Full source code available here: https://github.com/slashrootv200/CircleProgressPercentage

Answer 1

Add android:useLevel=true" in your circular progressbar xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>

    <shape android:shape="oval"
           android:useLevel="true">
      <solid android:color="@color/colorTranslucentBlack"/>
    </shape>

  </item>

  <item android:id="@android:id/progress">

    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270">
      <shape
          android:innerRadiusRatio="2.5"
          android:shape="ring"
          android:thicknessRatio="25.0"
          android:useLevel="true">
        <gradient
            android:centerColor="@android:color/holo_red_dark"
            android:endColor="@android:color/holo_red_dark"
            android:startColor="@android:color/holo_red_dark"
            android:type="sweep"/>
      </shape>
    </rotate>

  </item>

  <item android:id="@android:id/secondaryProgress">

    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270">
      <shape
          android:innerRadiusRatio="2.5"
          android:shape="ring"
          android:thicknessRatio="25.0"
          android:useLevel="true">
        <gradient
            android:centerColor="@android:color/holo_red_dark"
            android:endColor="@android:color/holo_red_dark"
            android:startColor="@android:color/holo_red_dark"
            android:type="sweep"/>
      </shape>
    </rotate>

  </item>

</layer-list>