Bug: Icons are blurry in grid view

[ajhuntsman]

We're using Material Design icons from the Google library, at 48dp.

When using list style, the icons look great.

When using grid style, the icons are blurry on various tablets, but not on phones. I get the same result whether I build the Bottom sheet using items defined in a menu XML file, or dynamically from code (using enum values).

Overview

Up Close

Should @style/BottomSheet_GridItemImage just use wrap_content for layout_width and layout_height instead of explicitly specifying 48dp?

[ajhuntsman]

I was able to successfully work around this by switching my drawables from PNG to Vector.

First, assuming your using 2.0 or higher of the Android Gradle plugin, modify build.gradle:

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Second, use Vector Asset Studio (within Android Studio 2.0+) to create a new vector XML resource, typically by importing a Material Design icon. For example, I created ic_assignment_black_24dp.xml

Third, if you're obtaining the Drawable icon from code (I'm building my bottom sheet from an enum, on the fly), get your Drawable icon as a vector using the AppCompatDrawableManager library:

Drawable actionIcon = AppCompatDrawableManager.get().getDrawable(view.getContext(), R.drawable.ic_assignment_black_24dp);

In this screen shot (Google Nexus 7 4.3 on Genymotion), the "List" icon is a vector drawable, but the others are PNG (all 5 densities). You can really taste the difference:

[soarcn]

I myself always use vector drawable instead of bitmap in my projects.

The only reason of the blurry icon could be the resolution of the drawable resources, I would suggest you check whether the right bitmap resources been prepared and picked up (xxhdpi or xxxhdpi, not quite sure)

[ajhuntsman]

Yeah, I had all 5 resolutions of each icon in place, and I even re-created new ones from scratch to verify. But now that I switched to vectors, it's a non-issue.

[waiinaythulay234]

Thank you for feedback