Search code examples
androidimagegridviewpicassoandroid-glide

How to make glide display like picasso?

I've been using Picasso's library to load images into my gridview in my application and it works and looks exactly as I'd like. But users are telling me that the images are loading very slowly. I know that this is because of poor network speed and Picasso is loading my full images which are very big and then resizing them to fit my image view. So I tried using glide which loads the images in almost twice the speed but on some images it's not keeping the structure like Picasso does. For example Picasso loading images looks like

this

Whilst glide loading them has different states here's what it loads initially

first state

and then after scrolling it looks like

this

and then eventually after lots of scrolling it looks like

this

I am pretty confident that this is due to my images sizes all being different and also it seems that making my placeholder image a different size has an effect but what I want to know is how do I get glide to keep its initial state, or how do I get Picasso to load quicker? I've heard lowering the color format from 888 to 565 has a dramatic effect, can anybody lend me there two cents? Thanks for any and all suggestions

EDIT

this is my imageview

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:id="@+id/imageView"/>

this is how i was calling picasso 

                 Picasso.with(getActivity())
                .load(mThumbIds[position])
                .placeholder(R.drawable.placeholder)
                .fit()
                .into(imageView);

        return imageView;

and this is how i am now calling glide

                 Glide.with(getActivity())
                .load(mThumbIds[position])
                .asBitmap()
                .placeholder(R.drawable.placeholder)
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .fitCenter()
                .error(R.drawable.ic_photos)
                .into(imageView);

         return imageView;

and if it matters this is my gridview

    <GridView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_margin="5dp"
    android:id="@+id/gridview"
    android:numColumns="2"
    android:gravity="center"
    android:drawSelectorOnTop="true"
    android:listSelector="@drawable/ripple"
    android:stretchMode="columnWidth"
    >
Solution

  • By default, Glide will attempt to keep the aspect ratio of the images. When you use fitCenter(), this implies that you want the whole image visible and centered within the available area. Switching to centerCrop() would be the first step in making sure the image fills both the height and width available to it.

    However, you are also running into a longstanding issue with GridView: it assumes all columns have the same height. Yet, you use wrap_content for your ImageView's height, causing each element to get resized differently based on the incoming height (remember, to Glide's perspective, you said your ImageView can be as tall as it needs to be!).

    If you have a dominant aspect ratio (say, 16:9), you could use a fixed aspect ratio view such as this AspectRatioImageView which would always use the same height based on the width of the column (set by your GridView). Another, more complicated, option is to switch to RecyclerView and use a StaggeredGridLayoutManager, which would allow you to keep the aspect ratio of each image and stagger the rows, ensuring that each image fills the space and keeps its aspect ratio.