ImageView images seem pixelated and low quality

Question

My Images in ImageView are all pixelated and low quality, almost blurry. They are all 48px x 48px PNG files in my drawable folder. Here's my XML file.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:id="@+id/main"
    android:background="#ecf0f1">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:src="@drawable/my_photo1"
        android:onClick="val1"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/ImageView"
        android:layout_toStartOf="@+id/ImageView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="0"
        android:id="@+id/val"
        android:textIsSelectable="false"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:textSize="60dp"
        android:textColor="#ff34495e" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ImageView"
        android:src="@drawable/my_photo2"
        android:visibility="invisible"
        android:onClick="val2"
        android:layout_alignTop="@+id/imageView"
        android:layout_toLeftOf="@+id/imageView2"
        android:layout_toStartOf="@+id/imageView2" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:src="@drawable/my_photo3"
        android:visibility="invisible"
        android:onClick="val3"
        android:layout_alignTop="@+id/ImageView"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView3"
        android:src="@drawable/my_photo4"
        android:visibility="invisible"
        android:onClick="val4"
        android:layout_alignTop="@+id/imageView2"
        android:layout_toLeftOf="@+id/imageView4"
        android:layout_toStartOf="@+id/imageView4" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView4"
        android:src="@drawable/my_photo5"
        android:visibility="invisible"
        android:onClick="val5"
        android:layout_alignTop="@+id/imageView3"
        android:layout_toLeftOf="@+id/imageView5"
        android:layout_toStartOf="@+id/imageView5" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView5"
        android:src="@drawable/my_photo6"
        android:visibility="invisible"
        android:onClick="val6"
        android:layout_alignTop="@+id/imageView4"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Cup Cakes"
        android:id="@+id/textView"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/imageView"
        android:layout_toStartOf="@+id/imageView"
        android:textColor="#ff34495e" />

</RelativeLayout>

Have you set different image dimension in drawable-ldpi, drawable-mdpi , drawable-hdpi folder If not then provide same image with samr name but with different dimension in these respective folders — Sanjeev, Jul 19 '15 at 22:38

score 3 · Accepted Answer · edited Jul 19 '15 at 23:45

3

There are different directories for different image sizes. Remember that png images aren't as as SVG which use vectors to resize to different size, png are rather fixed size so when android uses your app in a bigger screen size or a small size such it uses automatic software to resize the image that is why it seems fuzzy.

Open your src/main/resdir en there you shall see folders such as:
<code>res</code> directory structure in Android Studio depicting resource qualifier bins

This directories/folders are used for different resolutions so if you need to use icon-example.png just use the different mipmap folders for different resolutions. Please check the official android guide on supporting different screen sizes.

edited Jul 19 '15 at 23:45

Paul Lammertsma

37,593
16
136
187

answered Jul 19 '15 at 23:38

CommonSenseCode

23,522
33
131
186

1

I am using the material icons supplied by google and have downloaded and unzipped each resolution to its respective folder but still find the resulting image blurry. Is using an icon font or svg the only way to get a clear image? – Luke Allison Mar 03 '16 at 12:18
Please see my comment here: http://stackoverflow.com/questions/21002224/add-a-background-image-to-shape-in-xml-android – Luke Allison Mar 03 '16 at 12:35

ImageView images seem pixelated and low quality

1 Answers1

Linked