CODEWITHSUNDEEP
javaandroidcssimageandroid-recyclerview
Sirop4ik
Sirop4ik

Reputation: 5243

How to fill RecyclerView (StaggeredGridLayoutManager) with images in correct scale type?

I got such issue with my RecyclerView

I need to present to user images that I downloaded with help of picasso lib from web to my RecyclerView. Eventually it looks like this

enter image description here

As you can see I need to scratch my images, but in proper aspect ratio of course.

I went to my XML file and set attribute in my ImageView android:scaleType="fitXY"

now my ImageView looks like this

<ImageView
        android:id="@+id/imageViewMainCard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        />

and here is result that I got

enter image description here

as you can see now image fill all available space, but them doesn't scratch with propriety aspect ratio. Images scratch width more than height and does't looks nice...

Also here is my XML file

<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="3dp"
android:paddingEnd="3dp"
android:paddingStart="3dp"
android:paddingTop="3dp"
>

<LinearLayout
    android:id="@+id/cardMainActivityLinearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

  <com.balysv.materialripple.MaterialRippleLayout
      android:id="@+id/rippleInbox"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:mrl_rippleColor="@color/ntz_background_light_grey"
      app:mrl_rippleOverlay="true"
      >

    <ImageView
        android:id="@+id/imageViewMainCard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        />

  </com.balysv.materialripple.MaterialRippleLayout>

  <RelativeLayout
      android:id="@+id/rlCardMain"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@color/white"
      android:padding="4dp"
      >

    <TextView
        android:id="@+id/tvBrandName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:textColor="@color/black_color"
        android:textSize="10dp"
        />

    <TextView
        android:id="@+id/tvItemName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvBrandName"
        android:textColor="@color/black_color"
        android:textSize="10dp"
        />

    <TextView
        android:id="@+id/tvPreviousPrice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvItemName"
        android:textColor="@color/black_color"
        android:textSize="10dp"
        />

    <TextView
        android:id="@+id/tvDivider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/tvPreviousPrice"
        android:layout_toEndOf="@+id/tvPreviousPrice"
        android:text=" / "
        android:textSize="10dp"
        android:visibility="gone"
        />

    <TextView
        android:id="@+id/tvPrice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/tvDivider"
        android:layout_toEndOf="@+id/tvDivider"
        android:textColor="@color/black_color"
        android:textSize="10dp"
        />

    <Button
        android:id="@+id/bAction"
        android:layout_width="70dp"
        android:layout_height="30dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:textSize="8dp"
        />

  </RelativeLayout>
</LinearLayout>
</LinearLayout>

What am I doing wrong?

Edit1

There is a result of android:scaleType="centerCrop" attributes

enter image description here

It is also not so nice when women don't have head))

Edit2

There is result of android:scaleType="centerInside"

enter image description here

Upvotes: 1

Views: 592

Answers (3)

Remario
Remario

Reputation: 3863

Alright the problem is that your layout does not respect the bounds of your image.To remedy this, wrap the image-view in a separate parent layout , add a parent weight to the layout it self with layout_weight="1".Then set the width relative to the layout with android:layout_width="0px", to avoid tearing and proper bounds coordination set android:adjustViewBounds="true". To center and crop the image at it's center use android:scaleType="centerCrop".

Upvotes: 0

Remario
Remario

Reputation: 3863

To answer your question, please use centerCrop to center the image absolute to it's parent. Also add this attribute, android:adjustViewBounds="true". With this the aspect ratio of the image will be preserved.

Upvotes: 3

Mehmet K
Mehmet K

Reputation: 2814

fitXY uses FILL which is described as "Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src" in the Android Documentation.

You should use centerInside to center, fit and scale while keeping the aspect ratio

Upvotes: 0

Related Questions