Tag Archives: parallax

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

Advertisements