How to Create ListView with Groups and Parallax Effect

When you view the screen of an app in Google Play, that’s exactly what you see–a meaningful transition from image to app bar, which happens as a response to user input–scrolling down. This particular transition is called a parallax effect, and this blog post will show you how to add it to your application.

The Android 5.0 Lollipop release–the most significant Android release ever–introduced Material Design, which refreshed the entire Android experience. An important part of the Material Design is the Responsive Interaction. It encourages deeper exploration of an app by creating timely, logical and delightful reactions to user input. Another important aspect is the use of meaningful transitions between view states in a way that presents the information according to what is most important for the user right now. One way to do this is by using the parallax effect.

Here, we ​will demonstrate the Parallax effect using a list of items, shown in groups by Telerik ListView for Android.

We are going to use Android Studio for this post, but the same idea can be applied within your preferred IDE. Create a new app and add the aar files necessary for the ListView, part of Telerik UI for Android, to the libs folder of your application (the files are Common, Data and List). Then, add the following dependencies to your app’s build.gradle file:

The design reference is necessary for the recently introduced Android Design Support Library, which contains a lot of helpful widgets for achieving the expected Material Design behaviors. One of these widgets is the CoordinatorLayout, which provides an additional level of control over touch events between child views. It has to be the first element inside the main layout of your activity:

For many of the features of material designs app bar concepts, namely scrolling gestures, the Design Library provides the AppBarLayout. It depends heavily on being a direct child of the coordinator layout, so we'll add it as a direct child to the layout that we just added:

The height we have set reflects the maximum height this layout will consume when the image is expanded. Our coordinator layout will have one more child, which will be the scrollable view–in our case, ​the ListView:


Pay attention to the layout_behavior attribute we have set. This is also a requirement of the AppBarLayout–to have a sibling whose scrolling it will "listen" to. We are also going to need a Toolbar and an ImageView to collapse when we scroll, but to do the collapsing, we will add a CollapsingToolbarLayout inside the AppBarLayout we already have:


The layout_scrollFlags attribute is a requirement of the AppBarLayout, ​because it needs to know how to scroll its children, depending on the scroll events it receives. The possible values include scroll (to scroll off screen), enterAlways (downward scrolls return the view), enterAlwaysCollapsed (the view will enter on its minimal height, if declared) and exitUntilCollapsed (the view collapses before it exits). Now we are ready to add the Image and the Toolbar as children of the CollapsingToolbarLayout:

These views should define their layout_collapseMode-s so they respond in accordance with the CollapsingToolbarLayout’s events. The value pin means the Toolbar will remain pinned, while the parallax value for the ImageView speaks for itself. 

Now let’s go the code for the activity ​using this layout. ​We will need a few lines to set up the toolbar as a support action bar:

And another few lines to set up the ​ListView with its grouping:


The getData method simply returns a populated list of Entity objects. The group descriptor defines grouping for the list by the value of the category of the Entity. And that's it​; when you run the app, you should have the behavior from the image in the beginning of the post. Here’s the source code of the app.