Search code examples
javaandroidfirebasepicasso

wrap_content on imageView using Picasso


I have a social media and I want to add the height of the image on the post to wrap_content, but when i retrieve the images of the Firebase and display them on recycler view the image is not displayed with wrap_content. Also I'm using Picasso to set the image.

the part of code when I'm using to set the image (with Picasso):

         Picasso.get()
                .load(postList.get(position).getImgUrl())
                .placeholder(R.drawable.m1)
                .fit()
                .centerCrop()
                .into(holder.postImg);

post_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="8dp"
    app:cardCornerRadius="6dp"
    app:cardElevation="10dp"
    android:layout_marginBottom="30dp">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/post_username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_marginStart="3dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:text="george the developer"
            android:textSize="17sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@+id/post_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.038"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="1.0" />

        <ImageView
            android:id="@+id/post_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_contenta\"
            android:src="@drawable/m1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/post_username" />

        <ImageButton
            android:id="@+id/likeBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:background="@null"
            app:layout_constraintBottom_toTopOf="@+id/post_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toEndOf="@+id/post_username"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/like_emoji_before" />

        <TextView
            android:id="@+id/like_counter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="5dp"
            android:text="0"
            android:textSize="17sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@+id/post_image"
            app:layout_constraintEnd_toStartOf="@+id/likeBtn"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toEndOf="@+id/post_username"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Solution

  • You need to remove centerCrop() to avoid cropping the image, also remove fit() as it tries to calculate an appropriate image size, although you need its full size.

    So now we have:

         Picasso.get()
                .load(postList.get(position).getImgUrl())
                .placeholder(R.drawable.m1)
                .into(holder.postImg);
    

    And for the ImageView: add the below couple of attributes to make sure the image has the full size.

        <ImageView
            ...
             android:scaleType="fitStart"    
             android:adjustViewBounds="true"/>