RecyclerView Header under items in Android

Question

I can't find solution for such behaviour:

It is that header of the RecyclerView is a little bit under items. Of course I guess that it is RecyclerView.

How can I achieve that?

EDIT

What I have done is just adding decoration for recycler view.

This is my simple decorator:

public class HeaderItemDeceration extends RecyclerView.ItemDecoration {

    public HeaderItemDeceration() {
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if (parent.getChildAdapterPosition(view) == 0) {
            outRect.bottom = -100;
        }
    }
}

It's working but the problem is that this header is disappearing too fast, I mean where next item is on the top, and under it there is header, and immediately is disappearing, because normally it should be hidden when next item is on the top.

EDIT 2

I haven't explain everything, so here I'm explaining.

In my case I don't want to have ActionBar. What I want is just image under RecyclerView like in example above, but without collapsing toolbar. Just let's say that my Activity has style which parent is Theme.AppCompat.Light.NoActionBar.

Taking into consideration my explanation and answers below I'm trying to reach the goal with such layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="fitXY"
            android:src="@drawable/header"/>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view_items"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:behavior_overlapTop="24dp"/>

</android.support.design.widget.CoordinatorLayout>

It's almost working. Almost, because I noticed unwanted effect, which is when I scroll to top sometimes I have to repeat scroll gesture to reach the top. I recorded it:

Bad effect recorded

I assume that with my goal using CollapsingToolbarLayout may be wrong.

Answer 1

I achieved this effect when I wrote the main home screen for the lawn care app for Scotts. Here is an image of how it looks.

This is accomplished by using a CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout, and RecyclerView. The key is a scrolling view behavior you need to set both app:behavior_overlapTop and app:layout_behavior="@string/appbar_scrolling_view_behavior" attributes on the RecyclerView (which only work if it's a sibling view of an AppBarLayout).

In my scenario, I had the header separate from the RecyclerView altogether. Depending on how your content is managed, this solution may not work for you (although it is a lot simpler for me to keep the header outside of the RV--one less viewtype/view holder to manage!)

The gist ends up looking like this:

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >
  <android.support.design.widget.AppBarLayout
      android:layout_height="300dp" // fixed height of your header container
      android:layout_width="match_parent"
      android:fitsSystemWindows="true"
      >
    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" // snap/exitUntilCollapsed are optional. See more info on scroll flags here: https://developer.android.com/reference/android/support/design/widget/AppBarLayout.LayoutParams.html#setScrollFlags(int)
        >
      <ImageView // This is where you'd put your header backdrop
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:fitsSystemWindows="true"
          app:layout_collapseMode="parallax" // not essential, but most people want the parallax scrolling effect with their image header in this setup. this is how you would do it.
          />
    </CollapsingToolbarLayout>
  </AppBarLayout>
  <RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:overScrollMode="never"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:behavior_overlapTop="64dp" // This is what you're looking for!
    />
</CoordinatorLayout>

Answer 2

Its a combination of two view, not just a recycler view.

Android-ObservableScrollView will help you to reach what you want.

The trick is, there is a view in background and a recycler in front. The recycler view have a header which make the gap you want from top. Whenever you scroll the recycler, you will get notified by the listener you used and in that you will scroll the bottom layout manually,