Advanced Android - Parallax Header

This library will provide you to have Parallax effect on list View

Example

This example demostrate about how to integrate Android Parallax Header.

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project.

Step 2 − Add the following code to res/layout/activity_main.xml.

Here abcd indicates the logo of tutorialspoint.com

<?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">
   <ImageView
      android:id = "@+id/header_image_view"
      android:layout_width = "match_parent"
      android:layout_height = "200dp"
      android:background = "@drawable/abcd"
      android:scaleType = "fitCenter" />
   <ListView
      android:id = "@+id/list_view"
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:scrollbars = "none"/>
   <TextView
      android:id = "@+id/header_text"
      android:layout_width = "match_parent"
      android:layout_height = "40dp"
      android:background = "#009900"
      android:gravity = "center_vertical"
      android:padding = "10dp"
      android:text = "header"
      android:textColor = "@android:color/white"
      android:textStyle = "bold" />
</FrameLayout>

Step 3 − Add the following code to src/MainActivity.java

package myapplication.example.com.myapplication;

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;

import android.widget.AbsListView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
   private TextView headerText;
   private ListView listView;
   private View headerView;
   private View headerSpace;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      listView = (ListView) findViewById(R.id.list_view);
      headerView = findViewById(R.id.header_image_view);
      headerText = (TextView) findViewById(R.id.header_text);
      
      setListViewHeader();
      setListViewData();
      
      // Handle list View scroll events
      listView.setOnScrollListener(onScrollListener());
   } 
   
   private void setListViewHeader() {
      LayoutInflater inflater = (LayoutInflater) getSystemService(
         Context.LAYOUT_INFLATER_SERVICE);
      
      @SuppressLint("InflateParams") View listHeader = inflater.inflate(
         R.layout.listview_header, null, false);
      
      headerSpace = listHeader.findViewById(R.id.header_space);
      listView.addHeaderView(listHeader);
   } 
   
   private void setListViewData() {
      List<String> modelList = new ArrayList<>();
      for (int i = 0; i < 20; i++) {
         modelList.add("Item " + (i+1));
      } 
      ArrayAdapter<String> adapter = new ArrayAdapter<>(
         this, R.layout.item_listview, R.id.item, modelList);
      
      listView.setAdapter(adapter);
   } 
      
   private AbsListView.OnScrollListener onScrollListener () {
      return new AbsListView.OnScrollListener() {
         @Override
         public void onScrollStateChanged(AbsListView view, int scrollState) {
         }
            
         @Override
         public void onScroll(AbsListView view, int firstVisibleItem, 
            int visibleItemCount, int totalItemCount) {
               
            // Check if the first item is already reached to top
            if (listView.getFirstVisiblePosition() == 0) {
               View firstChild = listView.getChildAt(0);
               int topY = 0;
                  
               if (firstChild != null) {
                  topY = firstChild.getTop();
               } 
               int headerTopY = headerSpace.getTop();
               headerText.setY(Math.max(0, headerTopY + topY));
                  
               // Set the image to scroll half of the amount that of ListView
               headerView.setY(topY * 0.5f);
            } 
         } 
      };
   }
}

Step 4 − Add the following code to res/layout/item_listview.xml

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:layout_width = "match_parent"
   android:layout_height = "wrap_content">
   <TextView
      android:id = "@+id/item"
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:background = "@android:color/white"
      android:gravity = "center_vertical"
      android:padding = "8dp" />
</LinearLayout>

Step 5 − Add the following code to res/layout/listview_header.xml.

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   android:orientation = "vertical">
   <Space
      android:layout_width = "match_parent"
      android:layout_height = "200dp" />
   <Space
      android:id = "@+id/header_space"
      android:layout_width = "match_parent"
      android:layout_height = "40dp" />
</LinearLayout>

Step 6 − No need to changemanifest.xml

Let's try to run your application. I assume you have connected your actual Android Mobile device with your computer. To run the app from android studio, open one of your project's activity files and click Run icon from the toolbar. Select your mobile device as an option and then check your mobile device which will display your default screen −