Hello Developers, In this tutorial, we will create an Android image slider using android view pager and CircleIndicator library.

Earlier we have discussed, the working of android view pager by implementing FragmentPagerAdapter in Android Viewpager Example Tutorial. Now we will discuss how to create android image slideshow by extending android pagerAdapter.

Let’s create an android image slideshow example to run a slide show of popular X-MEN posters.

Create Android Image Slider App

1. Go to File → New → New Project and enter your Application Name. Let’s say Android Image Slider
2. Enter company domain, this is used to uniquely identify your App’s package worldwide.
3. Choose project location and minimum SDK and on the next screen choose Simple Activity, since we would be adding most of the code Ourselves. Then Click on Next.
4. Choose an Activity Name. Make sure Generate Layout File check box is selected, Otherwise we have to generate it ourselves.Then click on Finish. We have kept the Activity Name as MainActivity.java. This will be the default screen when the user opens the app for the first time.

Gradle will configure your project and resolve the dependencies, Once it is complete proceed to the next steps.

We need to add the dependency for CircleIndicator in the app’s build.gradle file.

build.gradle

    compile 'me.relex:circleindicator:1.2.2@aar'

Add Layout for Android Image Slideshow

1. Add the following code to the activity_main.xml. The layout consist of an Android ViewPager and a CircleIndicator wrapped inside a RelativeLayout.

activity_main.xml

2. Now Let’s add the code for layout of each slide that will be shown in the Android Image Slider. Add the following code in the slide.xml file. It consists of an ImageView wrapped in a FrameLayout.

slide.xml

Implement Android Image Slider using ViewPager

1. To create android image slideshow, We will hook up a PagerAdapter to android ViewPager.

   Create a new class MyAdapter.java and add the following code.

MyAdapter.java

package com.androidtutorialpoint.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 java.util.ArrayList;

public class MyAdapter extends PagerAdapter {

    private ArrayList images;
    private LayoutInflater inflater;
    private Context context;

    public MyAdapter(Context context, ArrayList images) {
        this.context = context;
        this.images=images;
        inflater = LayoutInflater.from(context);
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup view, int position) {
        View myImageLayout = inflater.inflate(R.layout.slide, view, false);
        ImageView myImage = (ImageView) myImageLayout
                .findViewById(R.id.image);
        myImage.setImageResource(images.get(position));
        view.addView(myImageLayout, 0);
        return myImageLayout;
    }

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

MyAdapter.java will popluate the custom content in our ViewPager:

To implement the abstract class PagerAdapter. We need to override the following methods which have been defined as abstract methods.

1. instantiateItem(ViewGroup, int) – This method should create the page for the positiion passed to it as an argument. Here we inflate() the slide.xml layout to create the android images slider set the image resource for the ImageView in it. Finally, the inflated view is added to the ViewPager using addView() and return it.
2. destroyItem(ViewGroup, int, Object) – Removes the page for the given position from the container. Here we have simply removed object using removeView().
3. getCount() – returns the number of available views in the ViewPager.
4. isViewFromObject(View, Object) – This method checks whether the view passed to it is associated with the key returned by the instantiateItem(). This method is important for proper functioning of the PagerAdapter. We just compare the two input view and the key and return the result.
2. Next, Let’s implement the android image slider. Add the following code to your MainActivity.java

MainActivity.java

package com.androidtutorialpoint.androidimageslider;

import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.Timer;
import java.util.TimerTask;

import me.relex.circleindicator.CircleIndicator;

public class MainActivity extends AppCompatActivity {
    private static ViewPager mPager;
    private static int currentPage = 0;
    private static final Integer[] XMEN= {R.drawable.beast,R.drawable.charles,R.drawable.magneto,R.drawable.mystique,R.drawable.wolverine};
    private ArrayList XMENArray = new ArrayList();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }
    private void init() {
        for(int i=0;i

We have created an Array containing the images of X-MEN poster, We get the data set from XMEN Array – the List of X-MEN posters. After that, we reference the ViewPager in the activity’s view and then set the adapter to be an unnamed instance of MyAdapter.

Next, we reference the CircleIndicator and use the setViewPager to set the indicator.

To create android image slider effect. We have used a Handler to update the android image slider on a new thread. Then we use Timer to schedule tasks for repeated execution in a background thread at an interval of 2.5 seconds starting with a delay of 2.5 seconds.

Now run the Android Image Slider app on an emulator or an actual Android Device and you should see a beautiful android image slideshow. Try to experiment with image slider in your app and

What’s Next ??

After this, We will be covering more interesting tutorials like creating a multilingual app in android.
Till then stay tuned for more tutorials.. and Don’t forget to subscribe our blog for latest android tutorials. Also do Like our Facebook Page or Add us on Twitter.

To download the full code for the Android Image Slider Tutorial using the android studio, Click on the Download Now link below.

The post Android Image Slider Tutorial appeared first on Android Tutorial Point.