Android ListView Header Parallax Sticky – Implementation & Code

Adding a parallax header with a sticky view on top of a ListView enhances the UX by creating a smooth visual effect where the header image scrolls at a different rate than the list, and a secondary view becomes fixed (“sticky”) at the top once scrolling passes it.

This pattern can be implemented cleanly by layering views and adjusting their behavior in response to scroll events.

What Is Parallax & Sticky Header in ListView?

Before implementation, it’s important to understand the pattern:

• Parallax Header: An image or view that moves slower than the list while scrolling, creating depth.
• Sticky View: A view that sticks to the top of the screen after the parallax header scrolls off.

Together, they create modern mobile UI effects seen in many apps.

Layout Setup

To achieve this, we’ll use a FrameLayout with:

✦ A header image that will exhibit parallax movement
✦ A secondary sticky view that will stick when scrolled
✦ The ListView itself with padding to accommodate the header

Example activity_main.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Parallax Header Image -->
    <ImageView
        android:id="@+id/ivHeader"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:scaleType="centerCrop"
        android:src="@drawable/header_image"/>

    <!-- Sticky View (e.g., Title bar) -->
    <TextView
        android:id="@+id/tvSticky"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/headerBackground"
        android:text="Sticky Header"
        android:textColor="@color/white"
        android:gravity="center_vertical|start"
        android:paddingLeft="16dp"
        android:visibility="gone"/>

    <!-- The ListView -->
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="250dp"
        android:clipToPadding="false"/>
</FrameLayout>

How it Works

• The ListView gets top padding equal to the header height.
• The parallax header stays behind and scrolls slower.
• When the header scrolls off screen, the sticky view becomes visible.

Implementing Parallax + Sticky Logic

In your Activity initialize views and set a scroll listener:

ListView listView = findViewById(R.id.listView);
ImageView ivHeader = findViewById(R.id.ivHeader);
TextView tvSticky = findViewById(R.id.tvSticky);

listView.setOnScrollListener(new AbsListView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {}

    @Override
    public void onScroll(AbsListView view,
                         int firstVisibleItem,
                         int visibleItemCount,
                         int totalItemCount) {

        View firstChild = view.getChildAt(0);
        int scrollY = (firstChild == null) ? 0 : -firstChild.getTop();

        // Parallax movement: half scroll speed
        ivHeader.setTranslationY(scrollY * 0.5f);

        // Show/hide sticky view
        if (scrollY >= ivHeader.getHeight()) {
            tvSticky.setVisibility(View.VISIBLE);
        } else {
            tvSticky.setVisibility(View.GONE);
        }
    }
});

Explanation

• Parallax Effect: We move the header image at half the scroll distance for depth.
• Sticky Behavior: Once the scroll offset passes the header height, we display the sticky view.

Adding a Header View to ListView

If you want the header image itself in the list scroll content, you can add it as a ListView header:

View headerView = getLayoutInflater()
    .inflate(R.layout.list_header_layout, listView, false);
listView.addHeaderView(headerView);

Be sure to adjust padding or layout logic accordingly.

Best Practices for Production

From real Android engineering experience:

• Use RecyclerView with CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout for complex and performant scroll effects on modern apps.
• Avoid heavy scroll calculations on UI thread — use translation properties where possible.
• Test on multiple devices/screens to adjust parallax intensity.
• Use placeholder/overlay views to avoid jumpy scroll transitions.

While ListView is classic, modern Android recommends RecyclerView with built-in nested scroll support for complex scrolling patterns.

Common Issues and Fixes

Sticky view appears too early or too late
✔ Ensure your scroll threshold equals header height.

Parallax appears jittery
✔ Use setTranslationY() rather than resetting layout parameters.

List items jump below sticky view
✔ Ensure ListView padding and header offsets are correctly calculated.

Summary

A ListView header with parallax and sticky view provides an engaging UI element that:

• Moves the header image at a slower rate than list scroll
• Keeps a view fixed at the top after scroll
• Enhances visual hierarchy and UX depth

It’s implemented by layering views and responding to scroll events to adjust positions dynamically. If you plan more advanced animations, migrating to RecyclerView with CoordinatorLayout gives you even smoother control.