Contents overlap header item

[MWalid]

Is it possible to make RecyclerView content overlaps little bit upon the header, something like Google's Play Newsstand??

I have tried to mimic that behavior by adding an additional offset to setClipY function, I could make contents overlap header but the problem is the header disappears early when first item reaches top edge of the view port.

Also the header appears with additional offset when scrolling down again.

Demo:

Code:

public void setClipY(int offset) {
    int tmpOffset = (int)(offset * 0.7);
    mOffset = offset + tmpOffset;
    invalidate();
}

[kanytu]

I spent my whole morning trying to fix this issue with no success. The problem is that layoutManager is detaching the header from the recyclerview when the card reaches the top. I posted a question on stackoverflow and I will keep looking for a solution to this problem:

http://stackoverflow.com/q/28092491/3410697

[MWalid]

@kanytu I really appreciate your time & effort trying to solve it, I also spent a whole day trying 😄 and I'll still struggling till it being solved.

[kanytu]

So I found a workaround for this. You will have to update your version because I made some changes. 9844c3f

Next you will have to change your activity/fragment layout so that you have a view just like the header behind your RecyclerView.

It should look like this:

<RelativeLayout>
   <View header/>
   <RecyclerView/>
</RelativeLayout>

Next change your current header to have an alpha of 0. That will make it transparent and work as a placeholder. This way the header you actually see when you run is not the header itself but the view you added behind the RecyclerView. Next implement ParallaxRecyclerAdapter.OnParallaxScroll() and inside it translate the other header.

In conclusion:

1. Add the header behind the recyclerview.
2. Either make the header transparent or remove it's image (make sure the size stays the same)
3. Implement OnParallaxScroll
4. Translate the header that's behind the RV (1.) using the offset returned by OnParallaxScroll multiplied by the same SCROLL_MULTIPLER factor (currently 0.5f)

I've uploaded a new branch to my example-project so that you see what needs to be changed.
https://github.com/kanytu/example-parallaxrecycler/tree/issue7

kanytu/example-parallaxrecycler@867de6d

Here is the final result

I will leave the issue open until someone finds a better solution

[sirvon]

is that example-project displaying a cardview like the above gif?

where can I view the code behind the recyclerview with cards?

thanks

[kanytu]

Yes @sirvon. That's a CardView layout. Refer to this https://developer.android.com/training/material/lists-cards.html for more information.

A simple example of a row layout is:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_margin="5dp"
    card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>

[MWalid]

@kanytu I really thank you for your effort to make it work 👍, sorry for late response because I was kinda busy past 3 days.

[kanytu]

I've created a branch with an attempt to fix this https://github.com/kanytu/android-parallax-recyclerview/tree/fixing7:

You should use now HeaderLayoutManagerFixed instead of LinearLayoutManager.

You should also call:

HeaderLayoutManagerFixed.setHeaderIncrementFixer(header); //where header is your inflated header.

And also call:
ParallaxRecyclerAdapter.setShouldClipView(false); do disable the clipping. You have to call this before calling setParallaxHeader.

[saitejdandge]

Try, This Library .Helped me !

https://github.com/florent37/MaterialViewPager