tiny images when using StaggeredGridLayoutManager

Question

I have a recyclerview inside of a viewholder item that is for displaying up to 5 images nicely along with some other text. it's working pretty good except that the images are mega tiny looking, I'm not sure where I'm going wrong.

the main viewholder item layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:local="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:background="@color/white"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingTop="14dp">
        <TextView
            android:id="@+id/feedItem_txtTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:layout_marginTop="14dp"
            android:textColor="@color/dark_gray"/>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/feedItem_rvImageGrid"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone" />

        <View
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:background="@color/very_light_gray"/>
    </LinearLayout>
</LinearLayout>

the image grid viewholder item:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:orientation="vertical">
    <ImageView
        android:id="@+id/feedItemImage_ivImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop" />
</LinearLayout>

the code I'm using to bind the grid to the recyclerview

_layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.Vertical);
_feedItemImageAdapter = new FeedItemImageAdapter(_imageUrlsVisible, _imageUrlsFull);

_rvImageGrid.SetAdapter(_feedItemImageAdapter);
_rvImageGrid.SetLayoutManager(_layoutManager);

not sure what else you'd like to see, let me know if I need to provide more code samples, I'm at a lost on what I'm doing wrong.

Sorry, I couldn't reproduce this question , could you please share a basic demo so that we can test with it? — Jessie Zhang -MSFT, Sep 17 '19 at 02:46
I'll work on getting a sample project in the morning when I have access to my work computer — Eman, Sep 17 '19 at 02:53

Jessie Zhang -MSFT · Accepted Answer · 2019-09-17T07:54:23.210

One possibility is that your image size itself is small. I tried to reproduce this question by using pictures of different sizes,when the image grid viewholder item is as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
    android:id="@+id/feedItemImage_ivImage"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop" />
 </LinearLayout>

The result is :

But we can adjust the parent properties of the ImageView to

android:layout_width="match_parent"
android:layout_height="match_parent"

So when we use the following code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
    android:id="@+id/feedItemImage_ivImage"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop" />
</LinearLayout>

Now,we will find the image will be adjusted to the proper size,but at the same time,the picture is distorted and blurry.

changing the linear layout to be match_parent solved my problem, they are a little small, I'm going to work with my team to get those images to be larger, thanks — Eman, Sep 17 '19 at 13:58

tiny images when using StaggeredGridLayoutManager

1 Answers1