Android Image Slider Using ViewPager Example

In this tutorial you will learn to make android image slider using ViewPager and PagerAdapter.

ViewPager is a layout manager that allows the user to flip left and right through pages of data. We supply an implementation of a PagerAdapter to generate the pages that the view shows.

Below example shows how to make a simple image slider in android.

Demo

Android Image Slider Using ViewPager Example (Demo)

Android Image Slider Using ViewPager Example

Create an android studio project with package name com.androidimageslider.

Here I have used total 4 pages in slider. So paste some images in res/drawable folder.

Add following code in respective files.

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:padding="15dp"
    tools:context="com.androidimageslider.MainActivity">

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

res/layout/item.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">

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

src/MainActivity.java

package com.androidimageslider;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    ViewPager viewPager;
    int images[] = {R.drawable.image_1, R.drawable.image_2, R.drawable.image_3, R.drawable.image_4};
    MyCustomPagerAdapter myCustomPagerAdapter;

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

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

        myCustomPagerAdapter = new MyCustomPagerAdapter(MainActivity.this, images);
        viewPager.setAdapter(myCustomPagerAdapter);
    }
}

src/MyCustomPagerAdapter.java

package com.androidimageslider;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MyCustomPagerAdapter extends PagerAdapter{
    Context context;
    int images[];
    LayoutInflater layoutInflater;


    public MyCustomPagerAdapter(Context context, int images[]) {
        this.context = context;
        this.images = images;
        layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        return images.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == ((LinearLayout) object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, final int position) {
        View itemView = layoutInflater.inflate(R.layout.item, container, false);

        ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
        imageView.setImageResource(images[position]);

        container.addView(itemView);

        //listening to image click
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context, "you clicked image " + (position + 1), Toast.LENGTH_LONG).show();
            }
        });

        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((LinearLayout) object);
    }
}

Save and run the project.

Screenshot

Android Image Slider Using ViewPager Example

Comment below if you have any doubts regarding above android image slider tutorial.

26 thoughts on “Android Image Slider Using ViewPager Example”

    1. private void startPagerAutoSwipe() {

      update = () -> {
      if (!touched) {
      if (currentPage == NUM_PAGES) {
      currentPage = 0;
      }
      try {

      binding.get().viewPager.setCurrentItem(currentPage++, true);

      } catch (NullPointerException e) {

      } catch (Exception e) {

      }
      }
      };

      Timer swipeTimer = new Timer();
      swipeTimer.schedule(new TimerTask() {
      @Override
      public void run() {
      handler.post(update);
      }
      }, 4000, 4000);
      }

  1. Abhishek sharma

    when i run the app then it show this error
    Error:java.util.concurrent.ExecutionException: com.android.ide.common.process.ProcessException:

  2. Shailesh H Vishwase

    Nice tutorial Neeraj, It is very useful for informative screens like ‘Take a tour’.
    Suppose we want to show fragments instead of images, for that Shall we use FragmentPagerAdaper?

    I have used FragmentPagerAdaper before, but there is one issue with that, after sliding 1st page, screen get flashed. I didn’t get any error, but curiosity to solve that. Will you please help me for that?

    Thanks in advance.
    Shailesh

  3. hi, thanks for this tutorial
    i want use database in my app and get image from db … how do it !?
    please help me !

  4. when i run the app then it show the error in below code and app crashes when opened
    imageView.setImageResource(images[position]);

  5. Hi neeraj,
    I want my firebase images to be displayed like the one above.is it the same thing the one you coded
    Have retriving the image with glide with images as img1,img2,img3.what changes has to do from the above code.

    Thanks in advance
    Manikandan

    1. when i run the app then it show the error in below code and app crashes when opened
      imageView.setImageResource(images[position]);

  6. actually this code is awesome but as a added feature i want to display a text below the image how is that possible ?????

Leave a Comment

Your email address will not be published. Required fields are marked *