Thursday, 27 August 2015

Android Parallax effect in listview


   Here I am going to explain how to create Listview header parallax in android.

                                  


Step 1).Mainactivity.java

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
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 ActionBarActivity {

    private TextView stickyView;
    private ListView listView;
    private View imageView;
    private View stickyViewSpacer;
    private int ROWS = 20;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView= (ListView) findViewById(R.id.listView);
        imageView= findViewById(R.id.imageView);
        stickyView= (TextView) findViewById(R.id.stickyView);
        LayoutInflater inflater = (LayoutInflater)
                          getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View listHeader = inflater.inflate(R.layout.list_header, null);
        stickyViewSpacer = listHeader.findViewById(R.id.stickyViewPlaceholder);
        listView.addHeaderView(listHeader);
        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)
                  {
                    if (listView.getFirstVisiblePosition() == 0) {
                    View firstChild listView.getChildAt(0);
                    int topY = 0;
                    if (firstChild != null) {
                        topY firstChild.getTop();
                    }

                    int heroTopY stickyViewSpacer.getTop();
                    stickyView.setY(Math.max(0heroTopY topY));
                    imageView.setY(topY * 0.5f);
                }
            }
        });

        List<String> modelList = new ArrayList<>();
        for (int i = 0; i < ROWS; i++) {
            modelList.add("List item " + i);
        }

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

Step 2).activty_main.xml


<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"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@drawable/image1"
        android:scaleType="fitCenter" />

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

    <TextView
        android:id="@+id/stickyView"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#222"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:text="AndroidDhina"
        android:textColor="#fff"
        android:textSize="20sp"
        android:textStyle="bold" />
</FrameLayout>


Step 3).list_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="250dp" />

    <Space
        android:id="@+id/stickyViewPlaceholder"
        android:layout_width="match_parent"
        android:layout_height="50dp" />

</LinearLayout>


Step 4).list_row.xml

 <?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 5).gradle
 apply plugin: 'com.android.application'

 android {
    compileSdkVersion 21
    buildToolsVersion "21.1.2"

    defaultConfig {
        applicationId "com.androiddhina.parallaxlistview"
        minSdkVersion 14
        targetSdkVersion 21
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
           minifyEnabled false
           proguardFiles getDefaultProguardFile('proguard-android.txt'),
                                                                       'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.3'
}



Happy Coding:)