Search code examples
androidimageviewandroid-gridlayout

Images loaded with Picasso in ImageViews are overflowing in GridLayout?

I am able to make UI look like this by setting background color of ImageView in GridLayout programatically. enter image description here

I am using Picasso to load images from server in these grids. Images are stretching to go beyond their defined colspan and rowspan. Why am I getting this? enter image description here

GridLayout xml

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tableGrid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:horizontalSpacing="0dp"
    android:stretchMode="columnWidth"
    android:verticalSpacing="0dp"
    app:alignmentMode="alignBounds"
    app:columnOrderPreserved="true"
    app:rowOrderPreserved="true"
    app:useDefaultMargins="false"/>`

And my grid setting method in Activity

 private void setGrids(int totalRows, int totalCols) {

    int total = gridList.size();
    gridLayout.setColumnCount(totalCols);
    gridLayout.setRowCount(totalRows);
    for (int i = 0; i < total; i++) {

        float rowWeight = Float.parseFloat(gridList.get(i).getRowSpan() + "F");
        float colWeight = Float.parseFloat(gridList.get(i).getColSpan() + "F");

        GridLayout.Spec rowSpan = GridLayout.spec(gridList.get(i).getStartRow(), gridList.get(i).getRowSpan(), rowWeight);
        GridLayout.Spec colSpan = GridLayout.spec(gridList.get(i).getStartColumn(), gridList.get(i).getColSpan(), colWeight);

        GridLayout.LayoutParams gridParam = new GridLayout.LayoutParams(
                rowSpan, colSpan);

        GridLayout.LayoutParams param = new GridLayout.LayoutParams();
        param.height = 0;
        param.width = 0;
        ImageView oImageView = new ImageView(this);
        oImageView.setLayoutParams(new GridLayout.LayoutParams(param));

       /*
        Random rnd = new Random();
        int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
        oImageView.setBackgroundColor(color);
        */

        Picasso.with(this).load(gridList.get(i).getProductImage()).noFade().into(oImageView);
        oImageView.setAdjustViewBounds(true);
        oImageView.setScaleType(ImageView.ScaleType.FIT_XY);

        gridLayout.addView(oImageView, gridParam);
    }
}

Guide me so that I can fit images in these grids properly.

Solution

  • I solved my problem. the problem was in line that is loading image using Picasso. Library was resizing my image. i changed my image loading line to

     Picasso.with(this).load(gridList.get(i).getProductImage()).fit().noFade().into(oImageView);