Android Image slider with Swipe Gesture


In this tutorial, we will learn to build an image slider in Android. We will use ViewPager to develop image slider.

ViewPager

It allows the user to swipe a page left and right. We use PageAdapter to create multiple pages. In pages, we can add images or other view items.

Create a new Android project and in the main XML file, you need to add a ViewPager element.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    />
</LinearLayout>

Now we want to create pages for our ViewPager. For that, we need to create a base class of PagerAdapter.

public class CustomAdapter extends PagerAdapter{
}

To make our adapter work, we need to implement some methods.

  1. getCount() method is used to return the number of pages which we want in our image slider.
    @Override
    	public int getCount() {
    		// TODO Auto-generated method stub
    		
    	}
  2. instantiateItem() helps to create the page for a given position. Here the adapter helps to add the view to our container.
    @Override
    	public Object instantiateItem(ViewGroup container, int position) {
    		// TODO Auto-generated method stub
    		
    	}
  3. It helps to remove a page.
    	@Override
    	public void destroyItem(ViewGroup container, int position, Object object) {
    		// TODO Auto-generated method stub
    	}

We also need one XML file which will hold the view items which we want our page to have.

image_item.xml

  • Add LinearLayout as your root element.
  • Add ImageView to it.
<?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" >

<ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />


</LinearLayout>

Now you need to add some images in the drawable folder.

 

We will work with five images. You can add any number of images you want.

Below are the images which we are going to use in our project.

 

Let us implement instantiateItem() method which will help to create pages.

  • LayoutInflater helps to convert XML file into corresponding view item.
    LayoutInflater inflater = ((Activity)context).getLayoutInflater();
    View viewItem = inflater.inflate(R.layout.image_item, container, false);
  • Get the reference to the image view and set the image resource by passing the id of the image to be displayed.
    ImageView imageView = (ImageView) viewItem.findViewById(R.id.imageView);
    imageView.setImageResource(imageId[position]);
  • Add the view to your view pager.
@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub
		
		LayoutInflater inflater = ((Activity)context).getLayoutInflater();
		
		View viewItem = inflater.inflate(R.layout.image_item, container, false);
		ImageView imageView = (ImageView) viewItem.findViewById(R.id.imageView);
		imageView.setImageResource(imageId[position]);
		((ViewPager)container).addView(viewItem);
		
		return viewItem;
	}

Store id of all images in an array

We store id's of images in an array to use them for our custom adapter.

int[] imageId = {R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4, R.drawable.image5};	

Complete code for our custom adapter

package com.example.kb4devimageslider;

import android.app.Activity;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class CustomAdapter extends PagerAdapter{
	
	Context context;
	int[] imageId = {R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4, R.drawable.image5};
	
	public CustomAdapter(Context context){
		this.context = context;
		
	}
	
	
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub
		
		LayoutInflater inflater = ((Activity)context).getLayoutInflater();
		
		View viewItem = inflater.inflate(R.layout.image_item, container, false);
		ImageView imageView = (ImageView) viewItem.findViewById(R.id.imageView);
		imageView.setImageResource(imageId[position]);
		TextView textView1 = (TextView) viewItem.findViewById(R.id.textView1);
		textView1.setText("hi");
		((ViewPager)container).addView(viewItem);
		
		return viewItem;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return imageId.length;
	}

	@Override
	public boolean isViewFromObject(View view, Object object) {
		// TODO Auto-generated method stub
		
		return view == ((View)object);
	}


	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		// TODO Auto-generated method stub
		((ViewPager) container).removeView((View) object);
	}

}

Now let us implement the MainActivity

  1. First we create a ViewPager object.
  2. Then we proceed towards creating an adapter and passing the context of current activity to it.
  3. After that, we add the adapter to ViewPager.
package com.example.kb4devimageslider;

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Menu;

public class MainActivity extends Activity {
	ViewPager viewPager;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewPager = (ViewPager) findViewById(R.id.viewPager);
		PagerAdapter adapter = new CustomAdapter(MainActivity.this);
		viewPager.setAdapter(adapter);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

ScreenShot

Below is the screenshot of Image slider with Swipe Gesture Android application.