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.
