Android recyclerview with images

Question

I want to make a recyclerview that show some images taken by users. In the recyclerview for each item I have the author and the date on the left, and in the center-right, I have the image resized for example with 200dp width and 100dp height and when the user click on it I show it in full size. The problem is that I cannot set the width and the height of the image item in the recyclerview. I tried all the scaleType but nothing works, the image is resized incorrectly or go too up or too down.

the xml of the recyclerview:

<androidx.recyclerview.widget.RecyclerView
               android:id="@+id/photoList"
               android:layout_width="350dp"
               android:layout_height="0dp"
               android:layout_marginStart="@dimen/MarginStart20"
               android:layout_marginTop="15dp"
               android:background="@drawable/reclycler_border"
               android:paddingStart="10dp"
               android:paddingEnd="10dp"
               app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
               app:layout_constraintHeight_default="wrap"
               app:layout_constraintHeight_max="300dp"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toBottomOf="@id/textView20"
               tools:listitem="@layout/photo_list_item" />

the xml of each item:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:paddingBottom="10dp">

   <TextView
       android:id="@+id/photoAuthorView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="5dp"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       tools:text="Mario Rossi" />

   <TextView
       android:id="@+id/photoDateView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="5dp"
       android:singleLine="false"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/photoAuthorView"
       tools:text="10/01/2021\n10:00:00" />

   <ImageView
       android:id="@+id/photoView"
       android:layout_width="200dp"
       android:layout_height="200dp"
       android:layout_marginStart="60dp"
       android:scaleType="fitEnd"
       app:layout_constraintStart_toEndOf="@+id/photoAuthorView"
       app:layout_constraintStart_toEndOf="@+id/photoAuthorView"
       tools:srcCompat="@tools:sample/backgrounds/scenic" />

</androidx.constraintlayout.widget.ConstraintLayout>

this is how it look now, you can see that images are in bad position, i want it on the right of author and date

Answer 1

remove this

app:layout_constraintBottom_toBottomOf="@+id/photoDateView"

and add to

app:layout_constraintTop_toTopOf="@id/photoAuthorView"

imageView bottom is aligned with the bottom of the date view.

Also, check scale type. Try with FitXY

android:scaleType="fitXY"

Answer 2

Try this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_marginStart="10dp">

    <TextView
        android:id="@+id/photoAuthorView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Mario Rossi" />

    <TextView
        android:id="@+id/photoDateView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:singleLine="false"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/photoAuthorView"
        tools:text="10/01/2021\n10:00:00" />

    <ImageView
        android:id="@+id/photoView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/backgrounds/scenic" />

</androidx.constraintlayout.widget.ConstraintLayout>

Result: