My layout is crashed after Picasso loads images

Question

I'm trying to build a customized image layout which looks as following, where 4 A's indicate the one ImageView.

AABC
AADE

When I tried to draw the layout with default src attributes, or when I put placeholder options on Picasso, the layout is rendered without a problem. However, while Picasso gradually lazy-loads each image, the layout is crashed like this. (The space below A is a blank space.)

ABC
 DE

How can I maintain my original layout with Picasso's lazy loading? CustomSquareImageView is a custom class which extends ImageView to draw a squared ImageView.

PartOfLayout.xml

<LinearLayout
    android:id="@+id/set_profile_profile_photos_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="false">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <CustomSquareImageView
            android:id="@+id/set_profile_profile_photos_first"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/profile" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_second"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_third"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_fourth"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_fifth"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

PartOfFragment.java

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    try {
        JSONArray profilePhotos = new JSONArray(mProfile.getProfileImages());
        if (!profilePhotos.get(0).toString().isEmpty()) {
            Picasso.with(getActivity()).load(profilePhotos.get(0).toString()).
                    placeholder(R.drawable.profile).into(mProfilePhotoFirst);
        }
    } catch (JSONException e) {
         e.printStackTrace();
    }
}

UPDATED

The answer by the author here using .fit().centerCrop() with placeholder effectively solve the problem "in the end", but in the process where Picasso is loading images, the layout is temporarily crashed because each image is in different sizes. (After it loads all the image successfully, the layout looks good.)

How can I load images without crashing the layout in the middle? I want the loaded images not to disturb the layout but be inserted directly to the layout with centerCrop state.

Answer 1

Because I used LinearLayouts as a image frame, all I had to do was to set layout_width of LinearLayouts to match_parent, not wrap_content or 0dp as Android Studio suggested.

My new XML looks like this.

NewPartOfLayout.xml

<LinearLayout
    android:id="@+id/set_profile_profile_photos_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <CustomSquareImageView
            android:id="@+id/set_profile_profile_photos_first"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/profile" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_second"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_third"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_fourth"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

            <CustomSquareImageView
                android:id="@+id/set_profile_profile_photos_fifth"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/profile" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>