Parallax Header for ListView

I was looking the other day for a cool parallax effect to add to my application, and after researching some ways to do it, I come up with a simple way that can be added to any project with a couple of lines.

The idea is to put the header that you want to add the parallax effect inside a FrameLayout and behind the ListView, then add a transparent header to your ListView that has the same height as you other header. You will need to implement OnScrollListener on your ListView

And that’s pretty much everything you need

Here is a step by step on how to do it

First, your XML layout (main.xml)

[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android=";

android:layout_height=“200dp” >

android:scrollbars="none" />


Second your transparent header XML layout (empty_header.xml)

[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android=";
android:background="@android:color/transparent" />

Then your fragment (
[code language=”java”]
public class ParallaxListFragment extends Fragment implements OnScrollListener {

private View view;
private ListView listView;
private View parallaxHeader;
private View header;

public static ParallaxListFragment newInstance() {
return new ParallaxListFragment();

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
view = inflater.inflate(R.layout.main, container, false);
parallaxHeader = view.findViewById(;
listView = (ListView) view.findViewById(;
header = inflater.inflate(R.layout.empty_header, listView, false);
listView.addHeaderView(header, null, false);
return view;

public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
// TODO These lines control the parallax effect, change the number "2" for different speeds
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) parallaxHeader.getLayoutParams();
params.setMargins(0, header.getTop() / 2, 0, 0);

public void onScrollStateChanged(AbsListView view, int scrollState) {


That’s it, easy way for a nice effect

I’ll be start posting more often some cool stuff I coded working for some really cool projects

4 responses to “Parallax Header for ListView

  • JulOoor

    I get “cannot resolve methode setMargins(int,int,int,int)” :/
    But nice tut!! 🙂

  • Neo Raiden

    Hi dude, first at all thank you for your time and explain this topic/tutorial in a very simple way.
    Well I have a question, when I inflate the listView it is totally transparent, but what happend if I want to create a listView with a white background but I only want the header with transparent color. When I code the listView attributes and I put “android:background=”@android:color/white”” the complete list is white including the header. I wish you can help me with that.

    Sorry about my english.

    • benexus

      Thanks Neo

      You cannot have a white background list and a transparent header.
      You need a transparent list (the header is part of the listview, so even it is transparent, the view behind it, is white)
      You can create a selector for your items (white background and other color for selected), and apply it to each item on the list

Leave a Reply

%d bloggers like this: