Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Working With Image Sliders in Android

DZone's Guide to

Working With Image Sliders in Android

In this tutorial, mobile developers can learn how to create an image slider in an Android app using the ViewPagerIndicator library.

· Mobile Zone ·
Free Resource

Hello, Android folks. Today, I will share some of my tips on how to create an image slider in an Android app.

External Library

We will use the GitHub library ViewPagerIndicator, developed by Jake Wharton, to complete our goal.

To integrate this library into your Android Studio project, insert the below line into your build.gradle(Module:app) file.

compile 'com.github.JakeWharton:ViewPagerIndicator:2.4.1'

Adding Images

Obviously, you will need some images to create image slider. Add four to five images into the Drawable Folder.

ViewPager

You need to use ViewPager here to make the slider.

Make a model class first. A model class is something like a data source for ViewPager. ViewPager will get the address of images to show in every slider.

An example for the source code of the model is below:

public class ImageModel {

    private int image_drawable;

    public int getImage_drawable() {
        return image_drawable;
    }

    public void setImage_drawable(int image_drawable) {
        this.image_drawable = image_drawable;
    }
}

XML Layout for a Single Image

Make an XML file which describes the layout file (UX/UI) for each slide.

Note: Original reference is present at Android Image Slider Example. It includes original source code to download in android studio and detailed information on image slider. 

Adapter Class for ViewPager

The adapter class will work the same as the adapter class of ListView. This class will put an image into every slide.

The function of this class is called as many times as the total number of images. If four images are there, then the method will be called four times.

An example of the method of adapter class:

@Override
    public Object instantiateItem(ViewGroup view, int position) {
        View imageLayout = inflater.inflate(R.layout.slidingimages_layout, view, false);

        assert imageLayout != null;
        final ImageView imageView = (ImageView) imageLayout
                .findViewById(R.id.image);


        imageView.setImageResource(imageModelArrayList.get(position).getImage_drawable());

        view.addView(imageLayout, 0);

        return imageLayout;
    }

You can easily find that image is set in ImageView with the help of setImageResource() function.

This method will be called multiple times as described earlier.

Finally, Set Up the ViewPager 

 Now see the below source code:

mPager.setAdapter(new SlidingImage_Adapter(MainActivity.this,imageModelArrayList));

        CirclePageIndicator indicator = (CirclePageIndicator)
                findViewById(R.id.indicator);

        indicator.setViewPager(mPager);

        final float density = getResources().getDisplayMetrics().density;

//Set circle indicator radius
        indicator.setRadius(5 * density);

        NUM_PAGES =imageModelArrayList.size();

        // Auto start of viewpager
        final Handler handler = new Handler();
        final Runnable Update = new Runnable() {
            public void run() {
                if (currentPage == NUM_PAGES) {
                    currentPage = 0;
                }
                mPager.setCurrentItem(currentPage++, true);
            }
        };
        Timer swipeTimer = new Timer();
        swipeTimer.schedule(new TimerTask() {
            @Override
            public void run() {
                handler.post(Update);
            }
        }, 3000, 3000);

        // Pager listener over indicator
        indicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                currentPage = position;

            }

            @Override
            public void onPageScrolled(int pos, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int pos) {

            }
        });

As you can see in the above code snippet, a handler is used to keep the attention on time. You can set the time, for which one slide will be shown to user. For example, if you set it as two seconds, then every slide will be shown for two seconds.

You can also control the user tasks like when user slide image by himself and etc. Here are three methods:

  1.  onPageSelected() 

  2.  onPageScrolled() 

  3.  onPageScrollStateChanged() 

So, that's how to implement an image slider in your next Android app. You can visit the original source for more information and to download the whole source code.

Topics:
android ,image slider ,tutorial ,mobile ,mobile app development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}