title: Styling a progress bar Android
body: <p>I have a problem styling a progress bar.</p>
  
  <p>Basically, I want to style the background like this:</p>
  
  <p><img src="https://i.stack.imgur.com/J9ULQ.png" alt="enter image description here"></p>
  
  <p>and the progress like this:</p>
  
  <p><img src="https://i.stack.imgur.com/CEraz.png" alt="enter image description here"></p>
  
  <p>However, the closet I can get is this: (i.e just a black border with no white line around it)</p>
  
  <p><img src="https://i.stack.imgur.com/6qZiR.png" alt="enter image description here"></p>
  
  <p>which means when the progress is set, it ends up looking like this:</p>
  
  <p><img src="https://i.stack.imgur.com/Nan6H.png" alt="enter image description here"></p>
  
  <p>which is a mess!</p>
  
  <p>I am using a layer-list to try and achieve this effect, but when I try to layer my items for the progress it doesn't work, I have spent a couple of hours trying various things but i'm not closer to a solution, im sure its to do with the clip function but this is required otherwise the progress doesn't change.</p>
  
  <p>My current XML is below, <strong>note that this will show the green progress bar as it is above with only the black border and not the white outline</strong>, when I add another item with my white outline I lose the entire progress bar!:</p>
  
  <pre><code>&lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  
      &lt;!-- Define the background properties like color and border etc (RED background with 2dp black border and overlaid 1dp white border ) --&gt;
      &lt;item android:id="@android:id/background"&gt;
      &lt;shape&gt;
           &lt;solid android:color="#FF0000" /&gt;
          &lt;stroke android:width="2dp" android:color="#000000" /&gt;
      &lt;/shape&gt;
  
     &lt;/item&gt;
         &lt;!-- add our white outline over the top--&gt;
      &lt;item android:id="@android:id/background"&gt;
      &lt;shape&gt;
          &lt;stroke android:width="1dp" android:color="#FFFFFF" /&gt;
      &lt;/shape&gt;
  
     &lt;/item&gt;
  
  
         &lt;!-- for the actual progress bar add our colour and border--&gt;
    &lt;item android:id="@android:id/progress"&gt; 
      &lt;clip android:gravity="left"&gt;
          &lt;shape&gt;  
              &lt;solid android:color="#00FF00" /&gt;
              &lt;stroke android:width="2dp" android:color="#000000" /&gt;       
          &lt;/shape&gt;    
      &lt;/clip&gt;
      &lt;/item&gt;    
  
  &lt;/layer-list&gt; 
  </code></pre>
  
  <p>Now, if I add the following to the bottom of the above xml I lose the entire progress bar, and I don't get the white outline as I would expect.</p>
  
  <pre><code>  &lt;item android:id="@android:id/progress"&gt; 
      &lt;clip android:gravity="left"&gt;
          &lt;shape&gt;  
              &lt;stroke android:width="1dp" android:color="#FFFFFF" /&gt;       
          &lt;/shape&gt;    
      &lt;/clip&gt;
      &lt;/item&gt;  
  </code></pre>
  
  <p>Does anyone have any ideas as to how I can achieve this?</p>