Updating ImageView with RecyclerView

Question

I have an ImageView above a RecyclerView and I am trying to find a way to update the ImageView as I scroll through the RecyclerView where the top item(image) of the RecyclerView is enlarged and displayed on the ImageView while scrolling.

After some digging around, I found that I could use ItemTouchHelper.SimpleCallback or ItemTouchHelper.Callback. However, both implement swiping animations that I would not want in my own RecyclerView, or I simply haven't found a way to get rid of these animations.

I hope my explanation was clear enough and if not a comment would be much appreciated.

Here is my xml file for reference:

<layout 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">

<data>
    <variable
        name="viewModel"
        type="com.example.collection.presentation.overview.CollectionOverviewViewModel" />
    <variable
        name="plantPhoto"
        type="com.example.storage.data.PlantPhoto" />
</data>

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true">

    <Button
        android:id="@+id/to_collection_overview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/collection_overview"
        app:layout_constraintBottom_toTopOf="@+id/collection_individual_imageview"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.882"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.17000002" />

    <ImageView
        android:id="@+id/collection_individual_imageview"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:adjustViewBounds="false"
        app:singleImage="@{viewModel.plantPhotoDisplay.plantFilePath}"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.26999998"
        tools:srcCompat="@tools:sample/avatars" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/collection_individual_recyclerview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
        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/collection_individual_imageview"
        app:layout_constraintVertical_bias="0.498"
        app:listPhotoData="@{viewModel.listPlantPhoto}"
        tools:listitem="@layout/image_plant_photo_view" />

    <TextView
        android:id="@+id/test_individual"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:text="Name"
        app:layout_constraintBottom_toTopOf="@+id/collection_individual_recyclerview"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/collection_individual_imageview" />


</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Amit pandey · Accepted Answer · 2021-03-26T05:06:17.620

try this one it might be helpful for you i not sure about this .

Use check this

 reyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
        override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        
       LinearLayoutManager myLayoutManager = reyclerView.getLayoutManager();
        int scrollPosition = myLayoutManager.findFirstVisibleItemPosition(); // its provide you the recycler view first item postion 

         // than here  get your image from your imageList[scrollPosition] and set on your top imageView
            
            
            }
        
    })

score 0 · Answer 2 · answered Mar 26 '21 at 05:00

Try using given link - https://stackoverflow.com/a/34647005/10752962

Here, logic was implemented for finding main centered item of recyclerview from visible items and it will continue finds focused item whenever you scroll the recyclerview, this task will be done in calculatePositionAndScrollDate(...) method with the variable expectedPositionDate(may be because i'm not sure) in recyclerview's onScrollStateChanged and for checking that you have to try this code and if it will work than you will get recyclerview item which is in center. So, now you can get image from recyclerview by position and set it to ImageView above recyclerview, Thank you and let us know if this will help you or not..

I think answer given by @amit-pandey is more easy to use because it haven't more calculations for finding centered position, it will just return first visible item of recyclerview in single line. — Vivek Thummar, Mar 26 '21 at 06:57

Updating ImageView with RecyclerView

2 Answers2