Parallax Header with Android ListView Example

Android ListView is a group view that is used to display a list of items in vertical scrollable format and parallax header view means the effect shown during screen scrolling like hide and show header view with animation effect. In this tutorial, you will learn to implement parallax header view with listview in android application. Before android developed some layouts and widgets like CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout, Toolbar etc it was very difficult to make parallax header view in android because you need to write a lot of code for that. Now using these layouts and widgets, you can make parallax header view within few minutes.

I have already posted some tutorials like simple android listview tutorial, android listview with image and text, simple gridview example and so on including lots of material design and design support library tutorial. If you are familiar with android design support library it will be very easy to make parallax header view.

Related:
Android ListView with Image and Text
Animated Android Toolbar (Expanding and Collapsing)
Simple Android ListView Example

Android Example: How to Make Parallax Header with ListView

Open your app build.gradle file and add design support and appcompat library dependencies. Build.gradle file will look like below.

build.gradle

Change App Theme

If your app theme is not appcompact then change it to Theme.AppCompat.Light.DarkActionBar. Styles.xml file will look like below.

res/values/styles.xml

XML Layout File

Open your app XML layout file and add CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout using design support library and inside CollapsingToolbarLayout add an ImageView for header parallax image and Toolbar for appbar/actionbar. Following is the complete content of XML layout file.

res/layout/parallax_header_android_listview.xml

 
Java Activity File

Here, you have to add different method to make collapsing/animated/parallax header view and for listview. Following is the complete code snippet of java activity file.

src/ParallaxHeaderAndroidListView.java

Now, run your Parallax Header with Android ListView Example application and scroll the screen, you will see that the header image is collapsing slowly and app title text will be shown at toolbar. Like this, you can add TabLayout and customize it according to your needs.