title: How to set the size of vector drawable inside of a button in Android?
body: <p>The Android Studio Vector Assets tools convert vector drawable to PNG-s for devices pre-Lollipop but I get really bad quality PNG-s as you can see here:  </p>
  
  <p><a href="https://i.stack.imgur.com/NQNnY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NQNnY.png" alt="Converted Vector to PNG"></a></p>
  
  <p>What's more is that the button's background solid color is supposed to be this light green that you see on the left but the drawable overwrite it:</p>
  
  <pre><code>&lt;item android:state_checked="true"
      android:drawable="@drawable/show"&gt;
      &lt;shape android:shape="rectangle"&gt;
          &lt;corners android:bottomRightRadius="8dp"/&gt;
          &lt;solid android:color="@color/waveComponentGreen"/&gt;
      &lt;/shape&gt;
  &lt;/item&gt;
  
  &lt;item android:state_checked="false"
      android:drawable="@drawable/hide"&gt;
      &lt;shape android:shape="rectangle"&gt;
          &lt;corners android:bottomRightRadius="8dp"/&gt;
          &lt;solid android:color="@color/waveComponentGreen"/&gt;
      &lt;/shape&gt;
  &lt;/item&gt;
  </code></pre>
  
  <p>The xml for the drawable is (the default from the material icons):</p>
  
  <pre><code>&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
      android:width="24dp"
      android:height="24dp"
      android:viewportWidth="24.0"
      android:viewportHeight="24.0"&gt;
  &lt;path
      android:fillColor="#FF000000"
      android:pathData="M8.59,16.34l4.58,-4.59 -4.58,-4.59L10,5.75l6,6 -6,6z"/&gt;
  </code></pre>
  
  <p></p>
  
  <p>I wanted also to make the icon appear a bit smaller by tweaking the values and I noticed increasing the viewport dimensions decreases the icon but I'm not sure I understand why.</p>
  
  <p>So: How do I make the icon and the generated PNG appear smaller, less blurry and with the background colour set in the resource file? Thank you.</p>
  
  <p><strong>EDIT</strong>: I managed to get the solid colour background with the icon by combining them in a separate xml file with layer-lists:</p>
  
  <pre><code>&lt;layer-list
  xmlns:android="http://schemas.android.com/apk/res/android" &gt;
  &lt;item&gt;
      &lt;shape android:shape="rectangle"&gt;
          &lt;corners android:bottomRightRadius="10dp"/&gt;
          &lt;solid android:color="@color/waveComponentGreen"/&gt;
      &lt;/shape&gt;
  &lt;/item&gt;
  &lt;item android:drawable="@drawable/show"
      android:top="10dp"
      android:bottom="10dp"
      android:left="10dp"
      android:right="10dp"
      /&gt;
  </code></pre>
  
  <p></p>
  
  <p>The result is:  </p>
  
  <p><a href="https://i.stack.imgur.com/xGnk8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xGnk8.png" alt="The result of some tweaking"></a></p>
  
  <p>I managed to reduce the blurring by increasing the width and height of the vector drawable. However without the <code>android:top|bottom|left|right</code> tags, the drawable is stretched across the whole area of the button. The second button doesn't need to have a background solid color so I'm not using the layer-list tags => no way to set a <code>top|bottom|left|right</code> margin for the drawable.<br>
  If I reduce the button size what I'm doing is reducing the clickable area of the button.</p>
  
  <p>My updated question is how to set the size of the vector drawable inside a button/toggle button/radio button without reducing the size of the button itself?</p>
  
  <p><strong>UPDATE</strong><br>
  I couldn't find a way to resize the vector drawable on pre-API 21 devices. So instead I made the buttons themselves smaller and increased the touch area of each button. </p>