GridView Parallax Header Android Example

This is a simple android example where you will learn to implement parallax header view with GridView in android application. Parallax header view is already implemented in many android applications and GridView is also a commonly used component in android. Today in this tutorial, I am going to use both grid view and parallax header in same activity. For parallax/animated header, you have to use CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout and many other components and layout using design support library to support older device.

Android GridView allows us to display items in two dimensional scrolling grids and for that we need to use ArrayAdapter. Following is the content of different java activity file and XML layout file.

Related:
Android ListView with Image and Text
Android Expandable Layout Tutorial with Example
How to Hide Toolbar/AppBarLayout When Content Scroll

Android Example: How to use Parallax Header with GridView

Let’s start by adding design support library appcompat support library dependencies compile 'com.android.support:design:23.1.0' and compile 'com.android.support:design:23.1.0' in build.gradle file if you have not add before. Build.gradle file will look like this.

build.gradle

App Theme

Open your app styles.xml file from res/values and change theme parent to Theme.AppCompat.Light.DarkActionBar and make windowActionBar false and windowNoTitle true which will like the below.

res/values/styles.xml

XML Layout File

In XML layout file you have to add different layouts and widgets for parallax header view. Here I have added a DrawerLayout, CoordinatorLayout, AppBArLayout, CollapsingToolbarLayout, Toolbar, NestedScrollView and so on. For header parallax image, add an ImageView inside CollapsingToolbarLayout above the Toolbar. Other app content goes inside NestedScrollView like here I have used a GridView you can add any layout or widgets here. Following is the complete content of XML layout file.

res/layout/parallax_header_gridview_android_example.xml

Java Activity File

Open your java activity file and add array strings for grid item and pass it to array adapter. Following is the complete code of java activity file.

src/ParallaxHeaderGridViewAndroidExample.java

 

That’s all. Now, run your GridView Parallax Header Android Example app and scroll the screen, you will see the parallax header view. In this tutorial I have only used a simple gridview with scrolling/animated header view. This will look like the above screenshot.