xamarin.androidstaggeredgridlayoutmanager

tiny images when using StaggeredGridLayoutManager


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.


Solution

  • 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 :

    enter image description here

    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.

    enter image description here