Recyclerview image animation when scrolled

Question

I have a recyclerview which gets data from firestore. It has an image and text. I need to rotate the image when recyclerview is scrolled. I have added a reference video. i need to do like exactly the same.

CategoriesAdapter.java

package com.blackevil.zipuser;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.firebase.ui.firestore.FirestoreRecyclerAdapter;
import com.firebase.ui.firestore.FirestoreRecyclerOptions;
import com.google.android.material.snackbar.Snackbar;
import com.google.firebase.firestore.FirebaseFirestore;

import de.hdodenhof.circleimageview.CircleImageView;

public class CategoriesAdapter extends FirestoreRecyclerAdapter<Cuisines, CategoriesAdapter.ViewHolder> {


    FirebaseFirestore db = FirebaseFirestore.getInstance();

    /**
     * Create a new RecyclerView adapter that listens to a Firestore Query.  See {@link
     * FirestoreRecyclerOptions} for configuration options.
     *
     * @param options
     */
    public CategoriesAdapter(@NonNull FirestoreRecyclerOptions<Cuisines> options) {
        super(options);
    }

    @Override
    protected void onBindViewHolder(@NonNull ViewHolder holder, int position, @NonNull Cuisines model) {
        holder.textView.setText(model.getName());
        Glide.with(holder.itemView.getContext())
                .load(model.getCover())
                .into(holder.imageView);
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.categories_rv_item, parent, false);

        return new ViewHolder(view);
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        TextView textView;
        CircleImageView imageView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);

            textView = itemView.findViewById(R.id.cat_name);
            imageView = itemView.findViewById(R.id.cat_image);

        }
    }

}

This is my fragment

DiscoverFragment.java
public class DiscoverFragment extends Fragment {

    private static final String TAG = "Discover Fragment" ;
    FirebaseFirestore db = FirebaseFirestore.getInstance();
    LinearLayoutManager linearLayoutManager;
    private RecyclerView recyclerView;
    private CategoriesAdapter adapter;

    public DiscoverFragment() {
    }


    public static DiscoverFragment newInstance(String param1, String param2) {
        DiscoverFragment fragment = new DiscoverFragment();
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    public void getListItems() {
        Query query = db.collection("cuisines");

        FirestoreRecyclerOptions<Cuisines> options = new FirestoreRecyclerOptions.Builder<Cuisines>()
                .setQuery(query, Cuisines.class)
                .build();

        adapter = new CategoriesAdapter(options);
        adapter.registerAdapterDataObserver(new RecyclerView.AdapterDataObserver() {
            @Override
            public void onChanged() {
                super.onChanged();
            }
        });
        adapter.startListening();
        adapter.notifyDataSetChanged();
        recyclerView.setAdapter(adapter);
    }




    @Override
    public void onStart() {
        super.onStart();
        getListItems();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        ViewGroup root = (ViewGroup) inflater.inflate(R.layout.fragment_discover, container, false);
        linearLayoutManager = new LinearLayoutManager(getActivity(), LinearLayoutManager.HORIZONTAL, false);
        recyclerView = (RecyclerView) root.findViewById(R.id.categories_rv);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(linearLayoutManager);
        return root;
    }

Need something like this

https://drive.google.com/file/d/1dLIFYfx1DN-FO_7J7zfnvHxjdR8rN6F6/view

Answer 1

DiscreteScrollView discreteScrollView = findViewById(R.id.listview_images);

discreteScrollView.setOrientation(DSVOrientation.HORIZONTAL); //Sets an orientation of the view
discreteScrollView.setOffscreenItems(1); //Reserve extra space equal to (childSize * count) on each side of the view
discreteScrollView.setOverScrollEnabled(true);
discreteScrollView.setSlideOnFling(true);


MyAdapter adapter = new MyAdapter();
discreteScrollView.setAdapter(adapter);

discreteScrollView.setItemTransformer((item, position) -> {
    ImageView imageView = item.findViewById(R.id.imageView);
    imageView.setRotation(position * 180f);


    item.setPivotX(item.getWidth() / 2.0f);
    item.setPivotY(item.getHeight() / 2.0f);
    float scale = 1 - 0.3f * Math.abs(position);
    item.setScaleX(scale);
    item.setScaleY(scale);
});

Here is how that looks: https://www.dropbox.com/s/vwf4vpvrsk89ewy/2020-11-05%2016-22-28.mp4?dl=0

For this I used this library: https://github.com/yarolegovich/DiscreteScrollView

But you could also use the other one (https://github.com/BCsl/GalleryLayoutManager) it works almost the same.