Image slider with parallax effect (FlickR style)

These are the elements of our project:

Layout

Main activity layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="es.slothdevelopers.parallaximageslider.MainActivity">

    <android.support.v4.view.ViewPager

        android:id="@+id/parallaxSlider"

        android:layout_width="match_parent"

        android:layout_height="250dp"

        android:layout_centerInParent="true"/>

</RelativeLayout>

Page adapter element layout:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content">

    <ImageView

        android:id="@+id/image"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:scaleType="centerCrop"

        android:layout_gravity="center"/>

</FrameLayout>

We define the ImageView in a FrameLayout to keep the image inside and not to overlap the other images when applying the parallax effect.

Code

We will start defining the ViewPage adapter. Inside it we will override the intantiateItem method to inflate our layout and attach the image.

public class ImagePageAdapter extends PagerAdapter {

    private final Activity activity;

    private int[] imagesId;

    Map<Integer, View> imageViews = new HashMap<Integer, View>();

    public ImagePageAdapter(Activity activity, int[] imagesId) {

        this.activity = activity;

        this.imagesId = imagesId;

    }

    public Map<Integer, View> getImageViews() {

        return imageViews;

    }

    @Override

    public int getCount() {

        return imagesId.length;

    }

    public boolean isViewFromObject(View view, Object object) {

        return view == object;

    }

    @Override

    public Object instantiateItem(ViewGroup container, int position) {

        LayoutInflater inflater = activity.getLayoutInflater();

        View view = inflater.inflate(R.layout.page_adapter_element, null);

        ImageView imageView = (ImageView) view.findViewById(R.id.image);

        imageView.setImageResource(imagesId[position]);

        container.addView(view);

        imageViews.put(position, imageView);

        return view;

    }

    @Override

    public void destroyItem(ViewGroup container, int position, Object object) {

        container.removeView((FrameLayout) object);

    }

}

We have defined the field imageViews that saves the position and the view of the image. We will access this field later from the MainActivity to get the views and apply the parallax effect.
Saving the views at this point improves the performance due to we don’t have to search for them lather.
Now we will analyze the MainActivity code:

public class MainActivity extends ActionBarActivity implements ViewPager.OnPageChangeListener {

    int[] pictures = new int[]{

            R.drawable.picture_1,

            R.drawable.picture_2,

            R.drawable.picture_3,

            R.drawable.picture_4,

            R.drawable.picture_5,

            R.drawable.picture_6

    };

    private int width;

    ViewPager viewPager;

    private ImagePageAdapter adapter;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        initViewPagerAndSetAdapter();

        calculateWidth();

    }

    private void initViewPagerAndSetAdapter(){

        viewPager = (ViewPager) findViewById(R.id.parallaxSlider);

        adapter = new ImagePageAdapter(this, pictures);

        viewPager.setAdapter(adapter);

        addPageChangeListenerIfSDKAbove11();

    }

    private void addPageChangeListenerIfSDKAbove11() {

        if (Build.VERSION.SDK_INT >11) {

            viewPager.setOnPageChangeListener(this);

        }

    }

    private void calculateWidth() {

        Display display = getWindowManager().getDefaultDisplay();

        Point size = new Point();

        viewPager.getWidth();

        if (Build.VERSION.SDK_INT <13) {

            width = display.getWidth();

        } else {

            display.getSize(size);

            width = size.x;

        }

    }

    @Override

    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        parallaxImages(position, positionOffsetPixels);

    }

    private void parallaxImages(int position, int positionOffsetPixels) {

        Map<Integer, View> imageViews = adapter.getImageViews();

        for (Map.Entry<Integer, View> entry: imageViews.entrySet()){

            int imagePosition = entry.getKey();

            int correctedPosition = imagePosition - position;

            int displace = -(correctedPosition * width/2)+ (positionOffsetPixels / 2);

            View view = entry.getValue();

            view.setX(displace);

        }

    }

    @Override

    public void onPageSelected(int position) {

    }

    @Override

    public void onPageScrollStateChanged(int state) {

    }

}

We set the content view, init the view pager, set the onPageChangeListener and finally calculate the width of the screen (because we will need it to make the parallax effect).
As we can see we don’t do nothing to complicated, all the “magic” its done in the parallaxImages method.