RecyclerView + StaggeredGridLayout + Picasso get GridItem width

Question

m using RecyclerView with StaggeredGrid (spanCount is variable). Each GridItem (a CardView) contains an a square ImageView. What i want is to load an Image from my backend with desired width and height to exactly fit an ImageView inside a CardView. Any suggestions i can achieve this? Code example is below:

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
    Picasso.with(context)
        .load(String.format("http://mybackend.com/image/w_%d,h_%d/%s",
                holder.image.getMeasuredWidth(), // This returns 0, but i want here a real width
                holder.image.getMeasuredWidth(),
                myCollection.get(position).getImagePid()))
        .tag(context)
        .placeholder(R.drawable.placeholder_logo)
        .into(holder.image);

In 2 words: somehow i need to get imageView dimensions (width) before my ViewHolder is bound.

score 1 · Answer 1 · answered Feb 03 '15 at 15:59

1

Have you looked into using .fit() ? I believe that will resize the image to exactly fit an ImageView.

answered Feb 03 '15 at 15:59

Nick

33
3

This is not an option because i don't want to download a whole image (could be BIG). – localhost Feb 03 '15 at 15:59
Let me get this straight: are you asking for a way of resizing the image before it is downloaded? – Sebastiano Feb 03 '15 at 16:00
If you want to resize the image before downloading, then I believe this would have to be done on the server side – Nick Feb 03 '15 at 16:03
Yes. I need to know the dimension (width) of Image before downloading it. How can i know it in onBindViewHolder? – localhost Feb 03 '15 at 16:07
So you're trying to get the width and height of an ImageView in onBindViewHolder? I don't believe this is possible because it hasn't been bound yet. Could you download an image that is only a little bit too big, and then let Picasso resize it to the ImageView for you? You could build some logic in to tell how large of an Image you need depending on the screen size. – Nick Feb 03 '15 at 16:12
For me this is a single solution, but i wish there is more simple one:) – localhost Feb 03 '15 at 16:16

score 0 · Answer 2 · answered Apr 02 '15 at 17:35

You can use ViewTreeObserver:

final int width = holder.image.getMeasuredWidth();
    if (width > 0) {
        Picasso.with(context)
                .load(String.format("http://mybackend.com/image/w_%d,h_%d/%s",
                        holder.image.getMeasuredWidth(), // This returns 0, but i want here a real width
                        holder.image.getMeasuredWidth(),
                        myCollection.get(position).getImagePid()))
                .tag(context)
                .placeholder(R.drawable.placeholder_logo)
                .into(holder.image);
    } else {
        holder.image.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                holder.image.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                Picasso.with(context)
                        .load(String.format("http://mybackend.com/image/w_%d,h_%d/%s",
                                holder.image.getMeasuredWidth(), // This returns 0, but i want here a real width
                                holder.image.getMeasuredWidth(),
                                myCollection.get(position).getImagePid()))
                        .tag(context)
                        .placeholder(R.drawable.placeholder_logo)
                        .into(holder.image);
            }
        });
    }

RecyclerView + StaggeredGridLayout + Picasso get GridItem width

2 Answers2