Icon image in circle shape is blurry
<p>I have created circle shape drawables that contain png icons. As per the Android Material guidelines the diameter of the circle is 40dp and the icon is 24dp. Initially I did not set any values for left, right, top and bottom as I assumed the internal icon item would stay 24dp. However, it resizes. I then tried using width and height properties to force it to 24dp, which appeared to work in the preview in AS but had no effect on the tablet. Finally I set the values of top, bottom, left and right as shown. I use 8dp as: (40-24)/2 = 8. </p>

<p>The issue is that the icon inside the circle appears blurry as though it was resized but I'm at a loss as to how to handle this. Perhaps there is a better way to place an icon inside a circle. It's a very common design practice after all. </p>

<p>I've placed the actual icon next to the circle in the attached image for comparison but unfortunately due to image compression it's hard to tell the difference in clarity but take my word for it that the image on the right looks like a vector as does the one in the FAB.</p>

<p>circle_grid.xml</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
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval"&gt;

            &lt;solid
                android:color="@color/colorPrimary"/&gt;

            &lt;size
                android:width="40dp"
                android:height="40dp"/&gt;
        &lt;/shape&gt;
    &lt;/item&gt;
    &lt;item android:drawable="@drawable/ic_grid_on_white_24dp"
        android:top="8dp"
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:gravity="center"/&gt;
&lt;/layer-list&gt;
</code></pre>

<p>fragment.xml</p>

<pre><code>        &lt;ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="@dimen/screen_edge_margin"
            android:layout_marginStart="@dimen/screen_edge_margin"
            android:src="@drawable/circle_grid" /&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/AJovN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AJovN.png" alt="enter image description here"></a></p>