Search code examples
androidimagekotlinimageview

Android -Images in Drawable Folder Appear Blurry

I'm testing this in the Emulator Pixel 4, API 33.

I added some 100x100 png images to the drawable folder but they all come out blurry. I copied and pasted each one into the folder. I've tried android:src="drawable/...", android:background="drawable/...", android:scaleType="fitXY", android:adjustViewBounds="true" and different combinations of each but the image always comes out blurry. I even tried CircleImageView, Glide, and Picasso, but the blur is still there. This happens with all of my images except the ones in the BottomNavigationView

Here is an example of one of them:

enter image description here

Here it is the bottom navigationView but not as blurry. I'm assuming because it's shrunk down.

enter image description here

In iOS they use 1x, 2x, 3x images. I drop the above 100x100 image into a program like https://hotpot.ai/blog/ios-1x-2x-3x-generator, and afterwards once I drag the images into the Assets folder, I don't have to worry about the blur (I have 3 versions of it). In iOS this same 100x100 image appears sharp

Is the issue me copying and pasting the image into the drawables folder but instead I need 1x, 1.5x, 2x, 3x, and 4x versions of the image? Btw I'm still learning Android.

Example code:

<androidx.constraintlayout.widget.ConstraintLayout

    <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:src="drawable/profile_icon"
            android:scaleType="fitXY"
            android:adjustViewBounds="true"
            .../>
        <TextView

    <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="drawable/profile_icon"
            android:scaleType="fitXY" // I've tried multiple scaleTypes 
            android:adjustViewBounds="true"
            .../>
        <TextView
Solution

  • Is the issue me copying and pasting the image into the drawables folder but instead I need 1x, 1.5x, 2x, 3x, and 4x versions of the image?

    Yes. Use res/drawable/ at most for vector drawables and other XML-defined drawables. For bitmaps, use:

    • res/drawable-mdpi/ (1x)
    • res/drawable-hdpi/ (1.5x)
    • res/drawable-xhdpi/ (2x)
    • res/drawable-xxhdpi/(3x)
    • res/drawable-xxxhdpi/ (4x)

    This is covered more in the documentation.