Android - Image gallery like the one of QuickPic

Question

In my Android app I display a GridView with the user's photos. The problem is that currently I'm displaying the images into an ImageView by using the Picasso library. The problem is that, with my code, images appear in a square shape, very ugly. What I want to accomplish is the same effect as QuickPic (this app has a grid of photos, and, if the photo is very big, you simply don't see some parts of it (you only see the center of the image). I imagine that this type of presentation is accomplished by using the ImageView's scaleType attribute to fitCenter, but in this case, what the dimensions to resize the image to using Picasso library would be?

Thank you

My code is as follows:

grid_row.xml

<fergaral.myapp.utils.TickedImageView
    android:id="@+id/thumb"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

(TickedImageView is a subclass of ImageView which overlaps the image on touch with a tick meaning that it's selected)

GridView's adapter

public class MyAdapter extends BaseAdapter {
    private Context context;
    private ArrayList<String> paths;

    public MyAdapter(Context context, ArrayList<String> paths) {
        this.context = context;
        this.paths = paths;
    }

    @Override
    public int getCount() {
        return paths.size();
    }

    @Override
    public Object getItem(int position) {
        return paths.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        View row = convertView;
        if (row == null) {
            LayoutInflater inflater = getLayoutInflater();
            row = inflater.inflate(R.layout.grid_row, parent, false);
        }

        DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
        float dpWidth = displayMetrics.widthPixels / displayMetrics.density;
        numberOfColumns = Utils.landscape(PhotosActivity.this) ? 5 : 3;
        int columnWidth = (int) dpWidth / numberOfColumns;

        final TickedImageView thumbV = (TickedImageView) row.findViewById(R.id.thumb);
        thumbV.setSelected(false);
        thumbV.setDrawingWidth((int) Utils.dpToPixels(columnWidth, getResources()));
        //final AppCompatCheckBox checkBox = (AppCompatCheckBox) row.findViewById(R.id.selectImageCheckbox);
        /*final CheckBox checkBox = (CheckBox) row.findViewById(R.id.selectPicCheckbox);

        checkBox.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(checkBox.isChecked())
                {
                    selectedPositions.add(position); //Añadimos la posición de la imagen al ArrayList
                }
                else
                {
                    selectedPositions.remove(Integer.valueOf(position));
                }
            }
        });*/

        thumbV.setOnImageClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if (thumbV.isSelected()) {
                    selectedPaths.add(imagesToProcess.get(position));
                    //checkBox.setChecked(true);
                } else {
                    selectedPaths.remove(imagesToProcess.get(position));
                    //checkBox.setChecked(false);
                }
            }
        });

        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = true;

        BitmapFactory.decodeFile(paths.get(position), options);

        int imageWidth = options.outWidth;
        int imageHeight = options.outHeight;

        int imageSize = (int) Utils.dpToPixels(columnWidth, getResources());
        int imageGridHeight = (imageSize * imageHeight) / imageWidth;

        /*Picasso.with(context)
                .load(new File(paths.get(position)))
                .resize(imageSize, imageSize)
                .into(thumbV);*/
        Picasso.with(context)
                .load(new File(paths.get(position)))
                .resize(imageSize, imageGridHeight)
                .into(thumbV);

        return row;
    }
}

GridView's XML code

<GridView android:id="@+id/photos_gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:horizontalSpacing="2dp"
    android:elevation="1dp"
    android:verticalSpacing="2dp"
    android:layout_below="@id/tool_bar"
    android:stretchMode="columnWidth"
    />

Answer 1

Try using glide library which manages the thumbnail if image is bigger and shows it properly in small thumbnail also. And it's easy to use.

git hub glide lib demo