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

why don't you use `ViewPager` instead? there are lots of libraries like what you need — Priyanka, Jul 22 '19 at 09:44

Tamir Abutbul · Answer 1 · 2019-07-19T06:53:18.197

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

well, I don't want to use any third party library because of performance degrade issues! — Tech Nerd, Jul 12 '19 at 20:05
I have been using this library for a long time now and my performance never got affected by this library. Sometimes it's better to look for something already made up and not invent the wheel again all by yourself. — Tamir Abutbul, Jul 12 '19 at 20:09
thanks for your kind help, but its not a clean library I must say! — Tech Nerd, Jul 12 '19 at 20:25
May I ask whats not clean about it? We are talking about 4 lines of code — Tamir Abutbul, Jul 12 '19 at 20:27
Performance! I don't want to degrade the perfomance, as in my library that I mentioned is giving me the desired UI but with PERFORMANCE DEGRADES! — Tech Nerd, Jul 12 '19 at 20:29
Check my edited answer, I used it long ago and maybe it can help you with your problem — Tamir Abutbul, Jul 19 '19 at 06:54

Adarsh Anurag · Answer 2 · 2019-07-17T21:19:20.157

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.

score 0 · Answer 3 · answered Jul 18 '19 at 23:30

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

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

3 Answers3

How to use:

Edit: