title: Tinting the background of an outlined Material Components button
body: <p>I'm trying to create an <a href="https://www.material.io/design/components/buttons.html#outlined-button" rel="nofollow noreferrer">outlined Material Components button</a>, however I need it to have a semi-transparent background in addition to the stroke.</p>
  
  <p>This is my XML code so far:</p>
  
  <pre><code>&lt;android.support.design.button.MaterialButton
      android:id="@+id/foo"
      style="@style/Widget.MaterialComponents.Button.TextButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button"
      app:backgroundTint="#CFFF"
      app:strokeColor="@color/colorAccent"
      app:strokeWidth="2dp" /&gt;
  </code></pre>
  
  <p>And this is what this looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/MDiyd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MDiyd.png" alt="Button with 2dp stroke"></a></p>
  
  <p>The issue is that some of the background is visible outside the stroke around the button (the larger the stroke width, the more white pixels getting out). </p>
  
  <p>For example, here's a <code>5dp</code> stroke:</p>
  
  <p><a href="https://i.stack.imgur.com/ujKNa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ujKNa.png" alt="Button with 5dp stroke"></a></p>
  
  <p>Is there a way to fix this, a better way to set the background color, or anything?</p>