Images using Glide are blurry

Question

I'm trying to use Glide to display images in a Recyclerview but they are blurred (the images are in jpg format).

I've tried using Picasso to display them but I get exactly the same issue: the images are blurred. As a test, I also have 10 drawables and these seem to display just fine. Does anyone know why the images are blurred?

** EDIT **

I just ran my code on a (Genymotion emulator) Google Galaxy Nexus 4.2.2; API 17 and the images are fine! So the next issue is why the images were blurred on a (Genymotion emulator) Motorola Moto X 4.3 ; API 18.

** EDIT **

I think i've found out why my images were blurry: In my main fragment I wrote the URL of my images to my database via my custom Content Provider. My initial images were of a lower resolution therefore when I displayed them and due to resizing and formatting they became blurry. I therefore used an image of higher resolution in the hope this would resolve the issue. It did not, initially (frustration!!), until I changed the database version number. The new images were then written to the database and the issue was correct.

package demo.example.com.customarrayadapter;

import android.content.Context;
import android.database.Cursor;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;

import java.util.List;

import demo.example.com.customarrayadapter.data.FlavorsContract;

/**
 * Created by richard on 03/01/16.
 */
public class AndroidFlavorCursorRecyclerViewAdapter extends
        CursorRecyclerAdapter<AndroidFlavorCursorRecyclerViewAdapter
        .DataObjectHolder> {
    private static String LOG_TAG = AndroidFlavorCursorRecyclerViewAdapter.class.getSimpleName();
    private List<AndroidFlavor> mDataset;
    private static MyClickListener myClickListener;
    private Cursor mCursor;
    private int posterHeight;
    private int posterWidth;

    public static class DataObjectHolder extends RecyclerView.ViewHolder
            implements View
            .OnClickListener {
        TextView label;
        ImageView image;

        public DataObjectHolder(View itemView) {
            super(itemView);
            //label = (TextView) itemView.findViewById(R.id.flavor_text);
            image = (ImageView) itemView.findViewById(R.id.flavor_image);
            Log.i(LOG_TAG, "Adding Listener");
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View v) {
            myClickListener.onItemClick(getPosition(), v);
        }
    }

    public void setOnItemClickListener(MyClickListener myClickListener) {
        this.myClickListener = myClickListener;
    }

    public AndroidFlavorCursorRecyclerViewAdapter(Cursor cursor, int w, int h) {
        super(cursor);
        //mCursor = cursor;
        posterHeight = h;
        posterWidth = w;
    }

    @Override
    public DataObjectHolder onCreateViewHolder(ViewGroup parent,
                                               int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.flavor_item, parent, false);

        DataObjectHolder dataObjectHolder = new DataObjectHolder(view);
        return dataObjectHolder;
    }


    @Override
    public void onBindViewHolderCursor(DataObjectHolder holder, Cursor cursor) {
        Context context = holder.image.getContext();

        //Log.i(LOG_TAG,"image:" + cursor.getString(
        //        cursor.getColumnIndex(FlavorsContract.FlavorEntry.COLUMN_FILM_POSTER)));

        //holder.label.setText(cursor.getString(
        //        cursor.getColumnIndex(FlavorsContract.FlavorEntry.COLUMN_VERSION_NAME)));
        String url = cursor.getString(
                cursor.getColumnIndex(FlavorsContract.FlavorEntry.COLUMN_FILM_POSTER));
        Glide.with(context.getApplicationContext()).load(url)
                .into(holder.image);

        //Picasso.with(context).load("http://i.imgur.com/DvpvklR.png")
        //        .into(holder.image);

        Log.v(LOG_TAG, "onBindViewHolderCursor() " + cursor.getCount());
    }

    //    public void addItem(AndroidFlavor dataObj, int index) {
    //    mDataset.add(dataObj);
    //    notifyItemInserted(index);
    //}

    //public void deleteItem(int index) {
    //    mDataset.remove(index);
    //    notifyItemRemoved(index);
    //}

    //@Override
    //public int getItemCount() {
    //    return mDataset.size();
    //}

    public interface MyClickListener {
        public void onItemClick(int position, View v);
    }

}

I thought it might be a good idea to put my imageview:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >

        <demo.example.com.customarrayadapter.SquareImageView
            android:id="@+id/flavor_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:scaleType="centerCrop"
            />

</FrameLayout>

SquareImageView class:

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;

public class SquareImageView extends ImageView
{
    public SquareImageView(Context context)
    {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    public SquareImageView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()*2); //Snap to width

    }
}

Answer 1

Your question is clear but did you try those emulators only ? And why didn't i find the .size() nowhere ?

Are you sure your picture has been resized and not formated only to be seen entirely ?

If yes, try to look at your console. Did you see an error like this ?

W/OpenGLRenderer: Bitmap too large to be uploaded into a texture

Answer 2

myFault ! i ment .override !

After load Your picture, be sure that the picture as been properly resize before to send it in your layout container :

public Bitmap loadFormattedImage(Context c ,int imv_icone){
   Glide.with(c)
            .load(imv_icone)
            .diskCacheStrategy(DiskCacheStrategy.ALL)
            .override(300, 200);

    return  BitmapFactory.decodeResource(c.getResources(), imv_icone);
}

Have you already try this ?