title: How to create a rectangle with rounded corners with different sections in different colors
body: <p><strong>REQUIREMENT</strong></p>
  
  <p>How do I create a view looking like this.</p>
  
  <p><a href="https://i.stack.imgur.com/d3Kje.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d3Kje.png" alt="enter image description here"></a></p>
  
  <p>I would like to draw a view on the screen which is a line broken into segments showing values percentage of the whole view. My requirements are </p>
  
  <ul>
  <li>view has different sections which are different colors</li>
  <li>the view might not have all sections rendered, it might only have first 2 or first and last or just a single color etc - this is only known at runtime</li>
  <li>the size of the different sections are only known at runtime therefore need to be specified programmatically</li>
  <li>left and right corners of the whole view are rounded</li>
  </ul>
  
  <p><strong>IDEAS/THINGS I HAVE TRIED</strong></p>
  
  <p><strong>(1) Custom view rendering 3 rectangles side by side</strong></p>
  
  <p>I have tried a custom view which renders 3 rectangles side by side. But these obviously have square corners.</p>
  
  <pre><code>protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);
  
      int viewHeight = 50;
  
      canvas.drawrect(0,  0, 60,  viewHeight, paint); // A
      canvas.drawrect(60, 0, 120, viewHeight, paint); // B
      canvas.drawrect(120,0, 180, viewHeight, paint); // C
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/u4JnM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u4JnM.png" alt="enter image description here"></a></p>
  
  <p><strong>(2) Shape with rounded corners</strong></p>
  
  <p>I know I can use a Shape to define a rectangle with rounded corners using the following, but this is a single color.</p>
  
  <pre><code>&lt;shape xmlns:android="http://schemas.android.com/apk/res/android"&gt;
       ...        
      &lt;corners
          android:radius="4dp" /&gt;
      ....
  &lt;/shape&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/F0Xbs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F0Xbs.png" alt="enter image description here"></a></p>
  
  <p><strong>(3) Layer-list</strong></p>
  
  <p>From <a href="https://stackoverflow.com/questions/39785961/android-rectangle-shape-with-two-different-color">Android rectangle shape with two different color</a>, I see I can use a layer-list to specify each item in the shape to have different colors. </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt;       
  
      &lt;item&gt;
          &lt;shape android:shape="rectangle"&gt;
              &lt;size
                  android:width="40dp"
                  android:height="40dp" /&gt;
              &lt;solid android:color="#F86F05" /&gt;
          &lt;/shape&gt;
      &lt;/item&gt;
  
      &lt;item android:top="10dp"&gt;
          &lt;shape android:shape="rectangle"&gt;
              &lt;size
                  android:width="30dp"
                  android:height="30dp" /&gt;
              &lt;solid android:color="#B31F19" /&gt;
          &lt;/shape&gt;
      &lt;/item&gt;
  
  &lt;/layer-list&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/RfWm6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RfWm6.png" alt="enter image description here"></a></p>
  
  <p><strong>(4) Layer-list with corners??</strong></p>
  
  <p>Can I add the "corners" tag to the whole layer-list to get the rounded main corners? I assume not, and that the corners part has to be in the "Item"s shape tags.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  
      &lt;corners
          android:radius="4dp" /&gt;
  
      &lt;item&gt;
          &lt;shape android:shape="rectangle"&gt;
              &lt;size
                  android:width="40dp"
                  android:height="40dp" /&gt;
              &lt;solid android:color="#F86F05" /&gt;
          &lt;/shape&gt;
      &lt;/item&gt;
  
      &lt;item android:top="10dp"&gt;
          &lt;shape android:shape="rectangle"&gt;
              &lt;size
                  android:width="30dp"
                  android:height="30dp" /&gt;
              &lt;solid android:color="#B31F19" /&gt;
          &lt;/shape&gt;
      &lt;/item&gt;
  
  &lt;/layer-list&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/m94z3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m94z3.png" alt="enter image description here"></a></p>
  
  <p><strong>SUMMARY</strong></p>
  
  <p>This last one is getting closer to my requirement however </p>
  
  <ul>
  <li>how do i specify each "item"s width programmatically</li>
  <li>how do i show/hide "item"s programmatically</li>
  <li>how would i round just the top most visible "item"s top corners and the bottom most "item"s bottom corners </li>
  </ul>
  
  <p><strong>UPDATE: HOW DO I ADD ELEVATION/GREY BORDER</strong></p>
  
  <p>Thank you to "@0X0nosugar" for your solution. I am now wanting to add an elevation or a slight grey border as one of the colors is faily light and close to the background color.  When I add the following I get a rectangular shadow which looks terrible with the curved corners.</p>
  
  <pre><code>android:elevation="2dp"
  android:outlineProvider="bounds"
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/xeNwx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xeNwx.png" alt="enter image description here"></a></p>
  
  <p>I would like it to appear like below</p>
  
  <p><a href="https://i.stack.imgur.com/tzATx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tzATx.png" alt="enter image description here"></a></p>