title: Why does my progress bar rendering incorrectly?
body: <p><a href="https://i.stack.imgur.com/ntQoV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ntQoV.png" alt="What is currently being rendered" /></a></p>
  <p><a href="https://i.stack.imgur.com/Sy1QQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sy1QQ.png" alt="Ideal render" /></a></p>
  <p>Hello,</p>
  <p>I am trying to create a ring progress bar similar to the ideal image. I tried using the following xml code but for some reason it's coming out very wrong. I'm not sure why it is behaving this way so I would appreciate any help with figuring this out.</p>
  <p>main xml file:</p>
  <pre><code>&lt;ProgressBar
          style=&quot;@style/Widget.AppCompat.ProgressBar.Horizontal&quot;
          android:layout_width=&quot;wrap_content&quot;
          android:layout_height=&quot;wrap_content&quot;
          android:max=&quot;100&quot;
          android:layout_marginTop=&quot;329dp&quot;
          android:background=&quot;@drawable/circular_progress_bar_background&quot;
          android:indeterminate=&quot;false&quot;
          android:progress=&quot;50&quot;
          android:progressDrawable=&quot;@drawable/circular_progress&quot;
          app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
          app:layout_constraintEnd_toEndOf=&quot;parent&quot;
          app:layout_constraintStart_toStartOf=&quot;parent&quot;
          app:layout_constraintTop_toTopOf=&quot;parent&quot; /&gt;
  </code></pre>
  <p>circular_progress_bar_background:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  &lt;shape xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
      android:shape=&quot;ring&quot;
      android:innerRadiusRatio=&quot;2.5&quot;
      android:thickness=&quot;20dp&quot;
      android:useLevel=&quot;false&quot;
  
      &gt;
      &lt;solid
          android:color=&quot;#bbb&quot;
          /&gt;
  &lt;/shape
  </code></pre>
  <blockquote>
  </blockquote>
  <p>circular_progress:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  &lt;rotate xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
      android:fromDegrees=&quot;150&quot;
      android:toDegrees=&quot;150&quot;
      &gt;
      &lt;shape
          android:shape=&quot;ring&quot;
          android:innerRadiusRatio=&quot;2.5&quot;
          android:thickness=&quot;20dp&quot;
          android:useLevel=&quot;false&quot;
          &gt;
          &lt;solid android:color = &quot;#ef32d9&quot;/&gt;
      &lt;/shape&gt;
  &lt;/rotate&gt;
  </code></pre>