How can I make a single header stick to the top of the screen when scrolling a listview?

Question

I have got a list view and i am inflating two headers. header1 and bellow it header2 then below that, the list items.

The listview's high is match_parent

How can I make it so that when I scroll my list, header2 does not disappear from the screen. so that the highest it goes is the top of the screen while the list items scroll underneath it

Answer 1

Below code will be helpful for someone.

1.The code having a toolbar.

2.below of toolbar a view(V1) (which will be gone while scrolling)

3.below of V1 another view(V2)(which will stick to the top bottom of the toolbar)

4.Then last one which will be scrolling..(May be views inside nested scroll view,Recyclerview...etc)

Hint:

1.In the xml the view(V1) has to scrolled should be given inside the CollapsingToolbarLayout and the view(V2) has be to sticked in top should be given outside of CollapsingToolbarLayout and inside of AppbarLayout .

2.For demo is used NestedScrollview and some dummy texts..If you are using Recyclerview or something like that please dont forget to put app:layout_behavior="@string/appbar_scrolling_view_behavior" .

The xml is given below.

first.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tollbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#c65"
            android:elevation="4dp"
            />
    <include
        layout="@layout/sample"/>
</LinearLayout>

sample.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <ImageView
                android:id="@+id/rest_logo"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_centerInParent="true"
                android:layout_gravity="center"
                android:scaleType="fitXY"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax" />


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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:background="#cff"
            android:gravity="center"
            app:layout_collapseMode="pin">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Header Sticking in Top"
                android:textColor="#000" />
        </LinearLayout>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"

            android:orientation="vertical"
            android:textColor="#000">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="1"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="2"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="3"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="4"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="5"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="6"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="7"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="8"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="9"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="10"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="11"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="12"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="13"
                android:textColor="#000" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="10dp"
                android:background="#ccc"
                android:gravity="center"
                android:text="14"
                android:textColor="#000" />


        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>


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

Answer 2

Several others have developed solutions for this. I found these two from a quick Google search, but there are certainly more out there.

https://github.com/emilsjolander/StickyListHeaders

https://github.com/JimiSmith/PinnedHeaderListView