CODEWITHSUNDEEP
androidimageimageviewfresco
mik dass
mik dass

Reputation: 49

SIze Imageview Placeholders

I am using recyclerview with imageviews in each cell.Each imageview loads images from the web and can be square or with more width than height or more height than width i.e any sizes.I am going to display a placeholder for each image while it loads in the background(with a progressbar).But the problem is the dimension of the images is unknown and I want to size the placeholders exactly the size of the images like the 9gag app in which the placeholders are exactly the size of the images while loading in the bacground.How do I achieve this in android ?I don't want to use wrap-content(produces a jarring effect after the image has been downloaded) or a specific height to the imageviews(crops the images).I am using UIL and currently planning to switch to Fresco or Picassa.

Upvotes: 0

Views: 1857

Answers (3)

zhb
zhb

Reputation: 687

In case that your placeholder is just filled of some color, you can easily emulate a color drawable with exactly the same size.

/**
 * The Color Drawable which has a given size.
 */
public class SizableColorDrawable extends ColorDrawable {

  int mWidth = -1;

  int mHeight = -1;

  public SizableColorDrawable(int color, int width, int height) {
    super(color);

    mWidth = width;
    mHeight = height;
  }

  @Override public int getIntrinsicWidth() {
    return mWidth;
  }

  @Override public int getIntrinsicHeight() {
    return mHeight;
  }
}

To use it with Picasso:

Picasso.with(context).load(url).placeholder(new SizableColorDrawable(color, width, height)).into(imageView);

Now some tips on the ImageView:

public class DynamicImageView extends ImageView {

  @Override public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    Drawable drawable = getDrawable();
    if (drawable == null) {
      super.onMeasure(widthSpecureSpec, heightMeasureSpec);
      return;
    }
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);
    int reqWidth = drawable.getIntrinsicWidth();
    int reqHeight = drawable.getIntrinsicHeight();
    // Now you have the measured width and height, 
    // also the image's width and height,
    // calculate your expected width and height;
    setMeasuredDimension(targetWidth, targetHeight);
  }
}

Hope this will help someone..

Upvotes: 1

HendraWD
HendraWD

Reputation: 3043

If you use fresco, you need to pass the width and height of your image from the web server, then you set the layout params of your drawee view with that width and height.

Like this:

RelativeLayout.LayoutParams draweeParams =
                    new RelativeLayout.LayoutParams(desiredImageWidthPixel,
                            desiredImageHeightPixel);
yourDraweeView.setLayoutParams(draweeParams);

From width and height of the image that you pass from your web server, you can calculate/resize proportionally the view as you need. Where desiredImageWidthPixel is the calculated image width that you want to show in yourDraweeView and desiredImageHeightPixel is the calculated image height that you want to show in yourDraweeView.

Don't forget to call

yourDraweeView.getHierarchy().setActualImageScaleType(ScalingUtils.ScaleType.FIT_XY);

To make yourDraweeView match the actual params that you set before. Hope this helps

Upvotes: 0

Murat Nafiz
Murat Nafiz

Reputation: 1438

You can feed image dimensions along with the image url. (I assume you are getting image list from a source, like a JSON file or something.) And resize the ImageView holder inside the RecyclerView according to their dimension and then fire the image downloading process.

Upvotes: 0

Related Questions