title: How to add round corners to a Circular Progress Bar in Android?
body: <p>Hello I am trying to design a Circular bar progess component. I have managed to do this, but I can't get to design the circle round corners.</p>
  <p>For the moment I have this:</p>
  <p><a href="https://i.stack.imgur.com/1QOVZ.jpg" rel="nofollow noreferrer">Example 1</a></p>
  <p>Here is the code that I am using:</p>
  <p>custom_progress_drwawable.xml</p>
  <pre><code>    &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
      &lt;layer-list xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
      &lt;item&gt;
          &lt;shape
              android:shape=&quot;ring&quot;
              android:thicknessRatio=&quot;16&quot;
              android:useLevel=&quot;false&quot;
              android:thickness=&quot;10dp&quot;&gt;
              &lt;solid android:color=&quot;@color/base_dark&quot; /&gt;
          &lt;/shape&gt;
      &lt;/item&gt;
      &lt;item&gt;
          &lt;rotate
              android:fromDegrees=&quot;270&quot;
              android:toDegrees=&quot;270&quot;&gt;
              &lt;shape
                  android:shape=&quot;ring&quot;
                  android:thicknessRatio=&quot;16&quot;
                  android:useLevel=&quot;true&quot;
                  android:thickness=&quot;10dp&quot;&gt;
                  &lt;gradient
                      android:endColor=&quot;@color/secundary_10&quot;
                      android:type=&quot;radial&quot;/&gt;
              &lt;/shape&gt;
          &lt;/rotate&gt;
      &lt;/item&gt;
  &lt;/layer-list&gt;
  </code></pre>
  <p>circular_progress_bar</p>
  <pre><code>&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
      xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
      xmlns:tools=&quot;http://schemas.android.com/tools&quot;
      android:layout_width=&quot;100dp&quot;
      android:layout_height=&quot;100dp&quot;
      android:layout_gravity=&quot;center&quot;&gt;
  
      &lt;ProgressBar
          android:id=&quot;@+id/progress_bar&quot;
          style=&quot;@style/CircularDeterminateProgressBar&quot;
          android:layout_width=&quot;match_parent&quot;
          android:layout_height=&quot;match_parent&quot;
          app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
          app:layout_constraintLeft_toLeftOf=&quot;parent&quot;
          app:layout_constraintRight_toRightOf=&quot;parent&quot;
          app:layout_constraintTop_toTopOf=&quot;parent&quot;
          tools:progress=&quot;100&quot;/&gt;
  
      &lt;TextView
          android:id=&quot;@+id/text_view_progress&quot;
          android:layout_width=&quot;wrap_content&quot;
          android:layout_height=&quot;wrap_content&quot;
          app:textSize=&quot;12sp&quot;
          app:textColor=&quot;@color/blue_dark&quot;
          android:textAppearance=&quot;@style/TextAppearance.AppCompat.Large&quot;
          app:layout_constraintBottom_toBottomOf=&quot;@+id/progress_bar&quot;
          app:layout_constraintEnd_toEndOf=&quot;@+id/progress_bar&quot;
          app:layout_constraintStart_toStartOf=&quot;@+id/progress_bar&quot;
          app:layout_constraintTop_toTopOf=&quot;@+id/progress_bar&quot;
          tools:text=&quot;60%&quot; /&gt;
  
  &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  </code></pre>
  <p>And what I want to get is this(the same but with round corners bar):</p>
  <p><a href="https://i.stack.imgur.com/GqGKh.jpg" rel="nofollow noreferrer">Example 2</a></p>