Open top menu


ListView Header with parallax effect in android?

In this blog we will implement Parallax effect ListView header step by step below.




Step 1-
list_item.xml.
The xml class create inside res/layout/ folder.the class is create a single row listview and bind via adapter show MainActivity java class.
...................................................................................................................................................................
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#FAFAFA"
    android:gravity="center_vertical"
    android:minHeight="40dp"
    android:padding="8dp"
    android:textColor="#222" />
...................................................................................................................................................................


Step 2-
activity_main.xml.

Create class inside res/layout folder. In this class declare the layout ImageView,ListView header  textView and ListView in frame layout.
...................................................................................................................................................................


<?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/ImageView_logo"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:padding="20dp"
        android:background="@drawable/logo"
        android:scaleType="fitCenter" />

    <ListView
        android:id="@+id/listView_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="#9E9E9E"
        android:dividerHeight="1dp"
        android:scrollbars="none"></ListView>

    <TextView
        android:id="@+id/ListView_header"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#cc43a5"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:text="Heading1"
        android:textColor="#72cc52"
        android:textSize="20sp"
        android:textStyle="bold" />
</FrameLayout>
 ..................................................................................................................................................................


Step 3-
MainActivity.java.

The Create Class inside src folder.Then Initialize listview and create array adapter,whic will be used in listview. then you add header layout via layout inflater calling by addHeaderView() method and implement AbsListView.onScrollListener interface in your class.

...................................................................................................................................................................
 package com.example.androidtestcode;

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

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends Activity {

private TextView ListView_header;
private ListView listView;
private View ImageView;

private View Viewholder;

private int MAX_ROWS = 20;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

listView = (ListView) findViewById(R.id.listView_item);
ImageView = findViewById(R.id.ImageView_logo);
ListView_header = (TextView) findViewById(R.id.ListView_header);

/* Inflate list header layout */
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View listHeader = inflater.inflate(R.layout.list_header, null);
Viewholder = listHeader.findViewById(R.id.Viewholder);

/* Add list view header */
listView.addHeaderView(listHeader);

/* Handle list View scroll events */
listView.setOnScrollListener(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 ViewTopY = Viewholder.getTop();
ListView_header.setY(Math.max(0, ViewTopY + topY));

/*
* Set the image to scroll half of the amount that of
* ListView
*/

ImageView.setY(topY * 0.5f);
}
}
});

/* Populate the ListView with sample data */
List<String> modelList = new ArrayList<>();
for (int i = 0; i < MAX_ROWS; i++) {
modelList.add("List item " + i);
}

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



you can watch the video click here.
https://www.youtube.com/watch?v=rcDWjRdYaSM




try this code


0 comments