title: Android ProgressBar UI custom layout
body: <p>I am trying to customize a status bar so it will look like this image:<img src="https://i.stack.imgur.com/EkJCJ.png" alt="enter image description here"></p>
  
  <p>However, after a good couple of hours all I have is a status bar with the background I need only (Image 2): <img src="https://i.stack.imgur.com/1LTSD.png" alt="enter image description here"></p>
  
  <p>The current code I have is: 
  xml layout:</p>
  
  <pre><code>&lt;ProgressBar
                  android:id="@+id/pBarOverallStatus"
                  style="?android:attr/progressBarStyleHorizontal"
                  android:layout_width="0dip"
                  android:layout_height="fill_parent"
                  android:layout_marginLeft="10dip"
                  android:layout_marginRight="10dip"
                  android:layout_weight="94"
                  android:indeterminateOnly="false"
                  android:max="100"
                  android:progressDrawable="@drawable/progress_bar_states" &gt;
              &lt;/ProgressBar&gt;
  </code></pre>
  
  <p>The progress_bar_states.xml:</p>
  
  <pre><code>&lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android" &gt;
  
      &lt;!-- &lt;item android:id="@android:id/progress"&gt;
          &lt;bitmap
              android:gravity="center"
              android:src="@drawable/progressbar_progressing" /&gt;
  
          &lt;corners android:radius="10dp" /&gt;
      &lt;/item&gt;
       --&gt;
  
  &lt;/layer-list&gt;
  </code></pre>
  
  <p>Removing the comment, where proressbar_progressing looks like 
  <img src="https://i.stack.imgur.com/FbLU3.png" alt="enter image description here">
  then I am having something a bit ugly as there are no corners. <img src="https://i.stack.imgur.com/8NCwU.png" alt="enter image description here"></p>
  
  <p>I am adding the background from code, something like:</p>
  
  <pre><code>overallStatus = (ProgressBar) findViewById(R.id.pBarOverallStatus);
  Resources res = getResources();
  overallStatus.setBackgroundDrawable(res.getDrawable(R.drawable.progressbar_background));
  overallStatus.setProgress(50);
  </code></pre>
  
  <p>I tried to add corners to the image but no luck. 
  Does anybody have any idea what I am doing wrong here? Or what am I missing?
  Also, do you have any idea how could I add the left and right rings? The resource: 
  <img src="https://i.stack.imgur.com/TT4be.png" alt="enter image description here"></p>