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);
      }
  });