Tutorials Android ListView Header Parallax in Android

ListView Header Parallax in Android

A quick Android example with code snippet to demonstrate ListView header with parallax effect. You need to follow few steps as described below to create the list view parallax effect.

The output of this example in the following attached video.

1. Declare Activity Layout

To begin with let us start declaring a simple layout for our example activity. We are adding just a simple ListView that covers the total width of screen.

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:dividerHeight="1dp"
    android:divider="#9E9E9E"/>

2. Declare List Header Layout

Now declare the layout for list header. In this example, I have declared an ImageView inside FrameLayout.

<?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="250dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/listHeaderImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/wallpaper" />
</FrameLayout>

3. Declare List Row Layout

Declare another layout for your list view row. In this example, for sake of simplicity I have declared a simple TextView. You may design fancy list of your choice by declaring your own custom adapter.

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FAFAFA"
    android:gravity="center_vertical"
    android:text="List Item"
    android:padding="8dp"
    android:minHeight="40dp"
    android:textColor="#222"/>

4. Handle ListView Scroll Events

Following step will guide you with the necessary things required in your activity to create list view, add list header and implement parallax effect.

  1. Let us now create an activity and set the layout by calling setContentView() method inside onCreate() lifecycle callback.
  2. Initialize list view and create an array adapter, which will be used for the list view.
  3. Inflate list header layout and set to list view by calling listView.addHeaderView() method.
  4. Handle user scroll events for list view and change the position Y of list header.
  5. For handling the user scroll event, you need to implement AbsListView.OnScrollListener interface to your activity or fragment class and override the onScrollStateChanged and onScroll method. The onScroll method will be called when user scrolls the list view up or downwards.
package com.javatechig.parallaxlistview;

import android.graphics.Rect;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends ActionBarActivity implements AbsListView.OnScrollListener {

    private static final int MAX_ROWS = 50;
    private int lastTopValue = 0;

    private List<String> modelList = new ArrayList<>();
    private ListView listView;
    private ImageView backgroundImage;
    private ArrayAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = (ListView) findViewById(R.id.list);

        for (int i = 0; i < MAX_ROWS; i++) {
            modelList.add("List item " + i);
        }

        adapter = new ArrayAdapter(this, R.layout.list_row, modelList);
        listView.setAdapter(adapter);

        // inflate custom header and attach it to the list
        LayoutInflater inflater = getLayoutInflater();
        ViewGroup header = (ViewGroup) inflater.inflate(R.layout.custom_header, listView, false);
        listView.addHeaderView(header, null, false);

        // we take the background image and button reference from the header
        backgroundImage = (ImageView) header.findViewById(R.id.listHeaderImage);
        listView.setOnScrollListener(this);
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {

    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        Rect rect = new Rect();
        backgroundImage.getLocalVisibleRect(rect);
        if (lastTopValue != rect.top) {
            lastTopValue = rect.top;
            backgroundImage.setY((float) (rect.top / 2.0));
        }
    }
}

5. Download Complete Source Code

[download url=”https://github.com/javatechig/Parallax-List-View-Header” source=”GitHub”]
Total
0
Shares
10 comments
  1. use the following code

    listView.setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView a, View v, int position, long id) {
    // Write your logic here
    }
    });

  2. I integrated your code with viewpager.
    Images parallaxed position is not retained when returned from new page.
    I have tried pager.setoffscreenlimit

Leave a Reply

Your email address will not be published.

Previous Post

Linear / Sequential Search Example in Java

Next Post

ListView Header Parallax with Sticky View in Android

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All