How to set ImageView height and width before image is loaded with Picasso inside Recycerview StaggeredGridLayout

Question

I am looking to set the ImageView height before loading the image with Picasso. Trying to prevent the parent view from changing its height to the image. I am getting a height and width of the image and setting it inside of of Picasso and then scaling it down.

How do I scale the ImageView based on the "webformatHeight" and "webformatWidth" before loading the image with Picasso to prevent resizing.

Data

{
    ...
    "hits":[
        {
            "webformatHeight":426,
            "webformatWidth":640,
            "webformatURL":"https://pixabay.com/get/eb32b5062dfd013ed95c4518b74a4291ea77ead204b0144190f8c478a2ebb3_640.jpg",
            ...
        },
        ...
    ]
}

Recycler Implementation

RecyclerView recycler = (RecyclerView) findViewById(R.id.recycler);
mPixabayAdapter = new PixabayAdapter();
recycler.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
recycler.setAdapter(mPixabayAdapter);

ViewHolder

class ViewHolder extends RecyclerView.ViewHolder {

    private ImageView mImage;
    private TextView mTitle;

    private ViewHolder(View view) {
        super(view);
        mImage = view.findViewById(R.id.image);
        mTitle = view.findViewById(R.id.title);
    }

    void bindView() {
        ColorDrawable[] shotLoadingPlaceholders = new ColorDrawable[]{new ColorDrawable(ContextCompat.getColor(itemView.getContext(), R.color.background_light))};
        Hit hit = mHitList.get(getAdapterPosition());
        mTitle.setText(hit.getUser());
        Picasso
                .with(mImage.getContext())
                .load(hit.getWebformatURL())
                .placeholder(shotLoadingPlaceholders[0])
                .resize(hit.getImageWidth(), hit.getImageHeight())
                .priority(Picasso.Priority.HIGH)
                .onlyScaleDown()
                .into(mImage);
    }
}

XML

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

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true" />

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_below="@+id/image"
        android:background="@color/background_light"
        android:fontFamily="sans-serif-medium"
        android:gravity="center_vertical"
        android:maxLines="1"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:textColor="@color/white_light"
        android:textSize="13sp" />
</RelativeLayout>

Answer 1

Calc the aspect ratio of your image by width/height and wrap your ImageView inside something like this:

public class RelativeSizeLayout extends FrameLayout {
    private float aspectRatio = 1.77f;

    public RelativeSizeLayout(Context context) {
        this(context,null);
    }

    public RelativeSizeLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    @Override
    public boolean shouldDelayChildPressedState() {
        return false;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int width = MeasureSpec.getSize(widthMeasureSpec);
        heightMeasureSpec = MeasureSpec.makeMeasureSpec((int) (width / aspectRatio), MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    public void setAspectRatio(float ratio) {
        aspectRatio = ratio;
    }
}