Search code examples
androidandroid-layoutimageviewandroid-imageview

Image inside ImageView is showing really blurry


I'm trying to develop a little android app, that will use image recognition for dog breeds. After recognizing a dog, it will save in another activity the name of the breed, with a picture. Those are saved in a MaterialCardView, which has inside a Linearlayout, with an ImageView for the picture, a TextView and an ImageButton for delete. In the preview window, everything looks fine: Preview Window ,but when I'm testing on my phone the Image is verry blurred, or very zoomed in, I don't even know how to describe it: Actual app. I tried with many pictures, also tried most of the solutions that I saw online, but nothing worked. I'm also a begginer with android, so it might be something very simple that I just can't see. Here is the xml code for the layout:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        >


    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:elevation="15dp"
            android:orientation="horizontal"
            >
        <ImageView
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/affenpinscher"
                android:id="@+id/img_content"

            />

        <TextView
                android:id="@+id/txv_content"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                android:layout_weight="100"
                android:gravity="center"
                android:padding="4dp"
                android:textSize="14sp"
                />
        <ImageButton
                android:id="@+id/ibt_delete"
                android:layout_width="30dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textStyle="bold"
                android:background="@android:color/transparent"
                android:src="@android:drawable/ic_delete"
                />


    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

Also tried with android:scaleType="centerCrop" or just "center", it's the same. The Image is 220x330


Solution

  • The image is blurry because has a bigger resolution than supported for the imageView with its current size.

    So you got to resize the image. Go to the IDE settings -> Plugins -> Search “ Android Drawable Importer and install it -> restart the IDE Once installed right click the drawable folder and: New-> Batch Drawable Import -> select your image and resize it.