Images in recycler view with grid layout stretches

Question

I've started to program an image gallery app. I want my images shown in square shape, without having white space around. I tried different way but in every ways the images stretched or make white space around them. Images load with Picasso.

MainActivity.java

...
recyclerView.setLayoutManager(new GridLayoutManager(this, 2));
...

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerView">
    </androidx.recyclerview.widget.RecyclerView>


</LinearLayout>

images_item.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:background="#ffffff">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/imageView"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop"
        android:src="@drawable/avatar" />
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:id="@+id/progressBar"/>
</RelativeLayout>

Adapter.java

...
        Picasso.get()
                .load(imageGalleryDataModel.getImageUrl())
                .fit()
                .centerCrop()
                .into(holder.imageView, new Callback() {
                    @Override
                    public void onSuccess() {
                        holder.progressBar.setVisibility(View.GONE);
                    }

                    @Override
                    public void onError(Exception e) {

                    }
                });

    }
...

Answer 1

You only need to update your image_item.xml layout and use ConstraintLayout instead of RelativeLayout!

If you don't have the ConstraintLayout dependency into your project, simply add the line below in the dependencies of your app/build.gradle:

implementation 'com.android.support.constraint:constraint-layout:1.1.2'

Next step is to change image_item.xml layout to the following structure:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="1:1"
        android:src="@drawable/avatar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintStart_toStartOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView" />

</android.support.constraint.ConstraintLayout>

Hope this helps you.