Correctly download and display image from server

Question

Now, in my app, each placeholder has size, that was set in xml and after image was downloaded it resizes ImageView height with horrible visual effect.

How can I get image size, that is downloading and should be displayed in ImageView, to make the same placeholder size like in Facebook application live feed? Maybe I should include image ratio for each link in json file that is downloading from server, or Fresco, Glide or Picasso has some tricks to acheive this?

Answer 1

If you want to resize the placeholder to the actual image dimensions before downloading the image, you have to somehow get this information from your server. You could, like you've already suggested, include the image dimensions / aspect ratio to the request and then use that information to properly size your views upfront.

Because of this horrible visual effect you've mentioned, Fresco doesn't support wrap_content but it supports setting an aspect ratio for the DraweeView that you can set using your server data.

See also http://frescolib.org/docs/wrap-content.html

Answer 2

Try using ResourceTranscoder with glide request as mentioned below:

Glide
    .with(this)
    .load(imageUrl)
    .asBitmap()
    .transcode(new BitmapSizeTranscoder(), Size.class)
    .into(new SimpleTarget<Size>() {
        @Override public void onResourceReady(Size size, GlideAnimation glideAnimation) {
            Log.w("SIZE", String.format(Locale.ENGLISH, "%dx%d", size.width, size.height));
        }
    });

class Size {
    int width;
    int height;
}

class BitmapSizeTranscoder implements ResourceTranscoder<Bitmap, Size> {
    @Override public Resource<Size> transcode(Resource<Bitmap> toTranscode) {
        Bitmap bitmap = toTranscode.get();
        Size size = new Size();
        size.width = bitmap.getWidth();
        size.height = bitmap.getHeight();
        return new SimpleResource<>(size);
    }
    @Override public String getId() {
        return getClass().getName();
    }
}