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)

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

    <FrameLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height=“200dp” >
      <!-- YOUR HEADER -->
    </FrameLayout>

    <ListView
        android:id="@+id/items"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:cacheColorHint="@android:color/transparent"
        android:divider=“@null”
        android:dividerHeight=“0dp"
        android:scrollbars="none" />

</FrameLayout>

Second your transparent header XML layout (empty_header.xml)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@android:color/transparent" />

Then your fragment (ParallaxListFragment.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();
	}


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

	@Override
	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);
		parallaxHeader.setLayoutParams(params);
	}

	@Override
	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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: