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

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

1 2 3 4 5 6 7 8 9 10 11 12 13

<?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

1 2 3 4 5 6 7 8 9 10

<?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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

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