{{announcement.body}}
{{announcement.title}}

Working With Viewpager

DZone 's Guide to

Working With Viewpager

In this tutorial, mobile developers can learn how to work with ViewPager.

· 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 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.

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 ViewPager 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. 

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 ,mobile ,mobile app development ,tutorial

Published at DZone with permission of Hardik Parsania . See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}