RecyclerView currently visible item's height should be larger than the next and previous items

Question

I wanted to show the part of next and previous items of the recyclerview as compared to the currently visible item (as in this third party library). However I managed to do so with my native recyclerview.

That's sound great to me, now I want to set the height of my currently visible item larger than the next and previous items to it as shown in the gif of the above mentioned library!

I have managed to show the next and previous items with my code as in the following stages:

1. Setting the recyclerview adapter as:

LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());

layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

locationTypeFragmentBinding.mRecylerview.setLayoutManager(layoutManager);

locationTypeFragmentBinding.mRecylerview.setHasFixedSize(true);

final LocationTypePictureAdapter locationTypePictureAdapter =
   new LocationTypePictureAdapter(getActivity(), locationDetails,false);

final SnapHelper snapHelper = new PagerSnapHelper();

snapHelper.attachToRecyclerView(locationTypeFragmentBinding.mRecylerview);

locationTypeFragmentBinding.mRecylerview.post(new Runnable() {

    @Override
    public void run() {

    locationTypeFragmentBinding.mRecylerview.
      setAdapter(locationTypePictureAdapter);
    }
});

2. My RecyclerView in the xml is:

     <android.support.v7.widget.RecyclerView
        android:id="@+id/mRecylerview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/buttonsHolder"
        android:clipToPadding="false"
        android:orientation="horizontal"
        android:padding="@dimen/_10sdp"
        android:paddingStart="@dimen/_15sdp"
        android:paddingEnd="@dimen/_15sdp"
        android:scrollbarStyle="outsideOverlay"
        android:visibility="gone"/>

3. My RecyclerView item xml is:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/mainContainer"
       android:layout_width="match_parent"
       android:layout_height="@dimen/_200sdp">

    <android.support.v7.widget.CardView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="@dimen/_5sdp"
        android:layout_marginEnd="@dimen/_5sdp"
        android:background="@android:color/transparent"
        app:cardElevation="0dp">

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

            <ImageView
                android:id="@+id/locationPicture"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

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

4. What I need to achieve is like: I know I can use the above mentioned library, but I want to set the height of the currently visible item larger than the next and previous items of my recyclerview which are to be shown to the user.

Can somebody please figure out what I am doing wrong with my code?

Example Image of what I need

See Here

Answer 1

I am not familiar the library that you are using but You can also use CarouselLayoutManager to achieve this look, with this library you will have one elevated item that will be above all others and this will look bigger than the rest of the items.

How to use:

• In your gradle:

  implementation 'com.azoft.carousellayoutmanager:carousel:version'
  

• When declaring an adapter:

  final CarouselLayoutManager layoutManager = new CarouselLayoutManager(CarouselLayoutManager.VERTICAL);
  
  final RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
  recyclerView.setLayoutManager(layoutManager);
  recyclerView.setHasFixedSize(true);
  

---

Edit:

If you want to do it natively you can do something like this:

• Create recyclerView:

  <android.support.v7.widget.RecyclerView
  android:id="@+id/recyclerView"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:fadingEdge="horizontal"
  android:overScrollMode="never"
  android:requiresFadingEdge="horizontal" />
  

• Attach your recyclerView to SnapHelper like this:

  LinearSnapHelper snapHelper = new LinearSnapHelper();
  snapHelper.attachToRecyclerView(recyclerView);
  

• Now you need to provide the logic for your currently centered item:

  recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
  @Override
  public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
      if (newState == RecyclerView.SCROLL_STATE_IDLE) {
          float position = (float) recyclerView.computeHorizontalScrollOffset() / (float) itemHeight;
          int itemPosition = (int) Math.floor(position);
      }
      super.onScrollStateChanged(recyclerView, newState);
      }
  });
  

Answer 2

If you cary about performance it is the best to do all animations things in Layout Manager. Tamir Abutbul gives you very good solution, why you want to reinvent the wheel? Without library there is ready layout manager you need : https://stackoverflow.com/a/41307581/2551094

Answer 3

I had added animation to items of a recycleView using the below method. I hope it may solve your problem if you are able to do something similar to this

Try this changes in your onBindViewHolder of your recycleView adapter.

@Override
    public void onBindViewHolder(@NonNull final CustomViewHolder holder, int position)
{
    // do your work

    setAnimation(holder.itemView, position);
}

and in setAnimation which receives the view and its position

void setAnimation(View view, int position) {
//this allows new views coming in the recycle view to slide to left while scrolling down and slide to right while scrolling up.
        if (lastPosition < position) {
            Animation animation = AnimationUtils.loadAnimation(context, android.R.anim.slide_in_left);
            view.startAnimation(animation);
        } else {
            Animation animation = AnimationUtils.loadAnimation(context, R.anim.slide_in_right);
            view.startAnimation(animation);
        }
        lastPosition = position;
    }

Similarly, if you know the position or location of view which is in middle, you can use your anim to zoom it up or zoom down other views in the recycleView.