Icon image in circle shape is blurry

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.

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.

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.

circle_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">

            <solid
                android:color="@color/colorPrimary"/>

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

fragment.xml

        <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" />

回答1:

What is the DP group for the device you are using? If your device as a hdpi DP then the icon should have 36*36 size in pixels. If it is in the xhdpi group, it should have 48*48 size in pixels. If it is in the xxhdpi group then it should have a size of 72*72. And so on and so forth. I believe you only have one size for that icon that's why is appears blurred

回答2:

http://www.sweet-web-design.com/wordpress/android-tricks-drawable-objects-or-how-to-draw-a-circle/2874/

This works without what ever was causing the image to re-scale and pixelate.