CODEWITHSUNDEEP
androidimageimageviewandroid-recyclerviewpicasso
Dani M
Dani M

Reputation: 1201

Fit image width of imageView in ReyclerView item

I currently have this code working. What I'm doing is downloading an image using Picasso and loading it into an imageView, which is inside a RecyclerView item.

Recycler Item XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_item"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cardPreventCornerOverlap="false"
    app:cardElevation="4dp"
    app:cardCornerRadius="4dp"
    app:cardUseCompatPadding="true">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Loading View -->
        <com.wang.avi.AVLoadingIndicatorView
            android:id="@+id/avloadingitem"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:visibility="gone"
            app:indicator="BallClipRotate"
            app:indicator_color="@color/colorAccent"/>

        <!-- Imagen -->
        <com.wallakoala.wallakoala.Views.ProductImageView
            android:id="@+id/grid_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:riv_corner_radius_bottom_left="4dp"
            app:riv_corner_radius_bottom_right="4dp"
            app:riv_corner_radius_top_left="4dp"
            app:riv_corner_radius_top_right="4dp"/>

        <!-- Pie de foto -->
        <RelativeLayout
            android:id="@+id/footer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:alpha="0.75">

            <!-- Info extra -->
            <include android:id="@+id/extraInfo"
                layout="@layout/product_footer_extra"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="visible"/>

            <!-- Info principal -->
            <include android:id="@+id/mainFooter"
                layout="@layout/product_footer"
                android:layout_height="@dimen/footer_height"
                android:layout_width="match_parent"
                android:layout_below="@id/extraInfo"/>

        </RelativeLayout>

    </FrameLayout>

</android.support.v7.widget.CardView>

This is my custom ImageView.

public class ProductImageView extends RoundedImageView
{
    public ProductImageView(Context context)
    {
        super(context);
    }

    public ProductImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    public ProductImageView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        setMeasuredDimension(getMeasuredWidth(), (int)(getMeasuredWidth() * 1.32f));
    }
}

I know the aspect ratio of the images, so I can do this in onMeasure method to tell Android the height I want:

setMeasuredDimension(getMeasuredWidth(), (int)(getMeasuredWidth() * 1.32f));

So now it works perfectly with images with that aspect ratio,however, I want to get rid of this, as I want to download images with different aspect ratios. So, how can I tell Android to fit the width and adjust the height of the imageView maintaining the aspect ratio?

Thanks in advance,

Upvotes: 0

Views: 5522

Answers (4)

Marcos Casagrande
Marcos Casagrande

Reputation: 40434

What you're looking is: .fit().centerCrop() or .fit().centerInside()

Picasso
  .with(context)
  .load(imageUrl)
  .fit()
  .centerCrop()
  // or .centerInside()
  .into(myImageView)
  • fit: wait until the size of the ImageView can be measured, and resize the image to fit the ImageView
  • centerInside: The image will be displayed completely, but might not fill the entire ImageView (Mantains aspect ratio)
  • centerCrop: scales the image so that it fills, cropping the extra

Upvotes: 1

Nathan Teyou
Nathan Teyou

Reputation: 2136

Think you should add the adjustViewBounds attribute to your image tag 

 <ImageView
              android:id="@+id/thumbview"
              android:layout_width="120dp"
              android:layout_height="120dp"
              android:layout_gravity="center"
              android:adjustViewBounds="true"/>

Upvotes: 6

Level One
Level One

Reputation: 11

There is a lib called ''Glide''. You can do this simply loading the image into a imageview and call .centercrop ex: Glide.with(yourFragment) .load(yourUrl) .centerCrop() .into(yourView);

Font> https://github.com/bumptech/glide/wiki/Transformations

Upvotes: 1

Ashutosh Verma
Ashutosh Verma

Reputation: 338

You ImageView in xml should have height wrap_content, like this..

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

then, you should use post() method with picasso lib to load image from server.

imageView.post(new Runnable() {
                                @Override
                                public void run() {
                                    Picasso.with(mActivity).load(path).resize(imageView.getWidth(), 0).into(imageView);
                                }
                            }); break;

Upvotes: 3

Related Questions