Sticky Header Android

A simple approach to add sticky header in android.

Be safe and Stay Healthy.

Concept — A bit tricky / Hack Approach. Works for my case.

See picture above, Place your view in recycler view position where you want to make a view sticky. Determining the visible position of recycler view then show hide the sticky view present in your layout.

First, Let's create a recycler view with three view types.

1. TYPE_HEADER
2. TYPE_STICKY - This is the view you want to stick to the top.
3. TYPE_FOOTER — Whatever you like lol.

For simplicity, Here’s I am creating simple views with a fixed height.

item_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#F02020"
    android:layout_margin="5dp"
    android:orientation="vertical">

</LinearLayout>

item_footer.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="500dp"
    android:background="#3A81F7"
    android:layout_margin="5dp"
    android:orientation="vertical">

</LinearLayout>

item_sticky_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#000"
    android:orientation="horizontal"
    android:paddingBottom="11dp"
    android:paddingEnd="15dp"
    android:paddingStart="15dp"
    android:paddingTop="15dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:ellipsize="end"
        android:maxLines="1"
        android:textStyle="bold"
        android:text="I am Sky View"
        android:textColor="#fff"
        android:padding="10dp"
        android:textSize="16sp" />


</LinearLayout>

Here’s how my adapter looks like.

private class ProductsRecyclerViewAdapter extends RecyclerView.Adapter {

    private static final int TYPE_HEADER = 0;
    private static final int TYPE_FOOTER = 1;
    private static final int TYPE_STICKY = 2;


    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        if (viewType == TYPE_HEADER) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_header, parent, false);
            return new VHHeader(view);

        } else if (viewType == TYPE_STICKY) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_sticky_view, parent, false);
            return new VHSticky(view);

        } else if (viewType == TYPE_FOOTER) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_footer, parent, false);
            return new VHProducts(view);

        }
        throw new RuntimeException("there is no type that matches the type " + viewType + " + make sure your using types correctly");

    }


    @Override
    public int getItemViewType(int position) {
        if (isPositionHeader(position)) {
            return TYPE_HEADER;
        } else if (isPositionStickyHeader(position)) {
            return TYPE_STICKY;
        }
        return TYPE_FOOTER;
    }

    private boolean isPositionHeader(int position) {
        return position == 0;
    }

    private boolean isPositionStickyHeader(int position) {
        return position == 1;
    }


    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        if (holder instanceof VHHeader) {
            VHHeader vhHeader = (VHHeader) holder;

        } else if (holder instanceof VHProducts) {
            VHProducts vhProducts = (VHProducts) holder;



        } else if (holder instanceof VHSticky) {
            VHSticky vhSticky = (VHSticky) holder;

        }


    }



    @Override
    public int getItemCount() {
        return 10;
    }


    private class VHHeader extends RecyclerView.ViewHolder {



        public VHHeader(View view) {
            super(view);


        }


    }

    private class VHProducts extends RecyclerView.ViewHolder {



        public VHProducts(View view) {
            super(view);
        }
    }


    private class VHSticky extends RecyclerView.ViewHolder {

        public VHSticky(View view) {
            super(view);
        }
    }
}

My activity_home.xml contains sticky_view & recycler view.

Making sticky view visibilty= gone,

Remember!!!

Its the same item view of recyclerview which we included.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

    <RelativeLayout
        android:id="@+id/maincontainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">



        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recycler_view_home"
                android:layout_width="match_parent"
                android:layout_height="match_parent"

                />
        </FrameLayout>


        <include
            android:id="@+id/sticky_view"
            layout="@layout/item_sticky_view"
            android:visibility="gone" />


    </RelativeLayout>

</FrameLayout>

Now, Adding OnScrollListener to recycler view.

private RecyclerView.OnScrollListener onScrollListener = new RecyclerView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        View view = recyclerView.getChildAt(0);

        int position = ((LinearLayoutManager) recyclerView.getLayoutManager()).findFirstVisibleItemPosition();
        RecyclerView.ViewHolder viewHolder = recyclerView.findViewHolderForAdapterPosition(position);
        if (viewHolder != null) {
           // TextView textView = (TextView) viewHolder.itemView.findViewById(R.id.title);

        }
        if (dy > 0) {
            if (position > 0) {
                stickyTextLayout.setVisibility(View.VISIBLE);
            }
        } else {
            if (position == 0) {
                stickyTextLayout.setVisibility(View.GONE);
            }
        }
    }
};

That’s all.

In the end, my Activity looks like.

HomeActivity.java

public class HomeActivity extends AppCompatActivity {

    private RecyclerView recyclerViewHome;

    private LinearLayout stickyTextLayout;
    private ProductsRecyclerViewAdapter productsRecyclerViewAdapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        initViews();
        setUpRecyclerView();

    }

    private void initViews() {
        recyclerViewHome = findViewById(R.id.recycler_view_home);
        stickyTextLayout = findViewById(R.id.sticky_view);

    }

    private void setUpRecyclerView() {
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(HomeActivity.this);
        recyclerViewHome.setLayoutManager(linearLayoutManager);
        productsRecyclerViewAdapter = new ProductsRecyclerViewAdapter();
        recyclerViewHome.addOnScrollListener(onScrollListener);
        recyclerViewHome.setAdapter(productsRecyclerViewAdapter);
    }



    private RecyclerView.OnScrollListener onScrollListener = new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
        }

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);
            View view = recyclerView.getChildAt(0);

            int position = ((LinearLayoutManager) recyclerView.getLayoutManager()).findFirstVisibleItemPosition();
            RecyclerView.ViewHolder viewHolder = recyclerView.findViewHolderForAdapterPosition(position);
            if (viewHolder != null) {
                TextView textView = (TextView) viewHolder.itemView.findViewById(R.id.title);

            }
            if (dy > 0) {
                if (position > 0) {
                    stickyTextLayout.setVisibility(View.VISIBLE);
                }
            } else {
                if (position == 0) {
                    stickyTextLayout.setVisibility(View.GONE);
                }
            }
        }
    };

    private class ProductsRecyclerViewAdapter extends RecyclerView.Adapter {

        private static final int TYPE_HEADER = 0;
        private static final int TYPE_FOOTER = 1;
        private static final int TYPE_STICKY = 2;


        @NonNull
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            if (viewType == TYPE_HEADER) {
                View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_header, parent, false);
                return new VHHeader(view);

            } else if (viewType == TYPE_STICKY) {
                View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_sticky_view, parent, false);
                return new VHSticky(view);

            } else if (viewType == TYPE_FOOTER) {
                View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_footer, parent, false);
                return new VHProducts(view);

            }
            throw new RuntimeException("there is no type that matches the type " + viewType + " + make sure your using types correctly");

        }


        @Override
        public int getItemViewType(int position) {
            if (isPositionHeader(position)) {
                return TYPE_HEADER;
            } else if (isPositionStickyHeader(position)) {
                return TYPE_STICKY;
            }
            return TYPE_FOOTER;
        }

        private boolean isPositionHeader(int position) {
            return position == 0;
        }

        private boolean isPositionStickyHeader(int position) {
            return position == 1;
        }


        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
            if (holder instanceof VHHeader) {
                VHHeader vhHeader = (VHHeader) holder;

            } else if (holder instanceof VHProducts) {
                VHProducts vhProducts = (VHProducts) holder;



            } else if (holder instanceof VHSticky) {
                VHSticky vhSticky = (VHSticky) holder;

            }


        }



        @Override
        public int getItemCount() {
            return 10;
        }


        private class VHHeader extends RecyclerView.ViewHolder {



            public VHHeader(View view) {
                super(view);


            }


        }

        private class VHProducts extends RecyclerView.ViewHolder {



            public VHProducts(View view) {
                super(view);
            }
        }


        private class VHSticky extends RecyclerView.ViewHolder {

            private TextView textViewTitle;

            public VHSticky(View view) {
                super(view);
                textViewTitle = view.findViewById(R.id.title);
            }
        }
    }


}

Please reply with a comment about this approach, I would love to know.

Output.

Here’s GitHub link to this project.

https://github.com/iamnaran/stickyview-android

Thank you :)

Here’s a stack overflow answer link. try this approach.

How can I make sticky headers in RecyclerView? (Without external lib)