Android Image Slider Using ViewPager

You have seen many Android apps with sliding images with circle page indicator at top. Today we are going to learn the same thing for our app.

Before proceeding we need a superb library called ViewPagerIndicator-Library that we can get from Github created by JakeWhartom. Just download it and import the library into your project.

We are going to use ViewPager for Sliding the images so if anyone of you are unaware of viewpager can go and check my tutorial about ViewPager.

Features of this app:

Slide images by swiping left and right.
Automatic image sliding at particular duration.

Video Demo

Let’s start with the Example:

1. Create a new project in Android Studio by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is MainActivity.java.

2. First create an xml layout file naming activity_main.xml that contains viewpager and CirclePageIndicator that is provided by JakeWhartom library.

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

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:orientation="vertical">

        <!-- Top Sliding Banners -->

        <RelativeLayout

            android:layout_width="fill_parent"

            android:layout_height="wrap_content" >

            <android.support.v4.view.ViewPager

                android:id="@+id/pager"

                android:layout_width="fill_parent"

                android:layout_height="fill_parent"

                android:layout_alignParentTop="true" />

            <com.viewpagerindicator.CirclePageIndicator

                android:id="@+id/indicator"

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:layout_alignParentBottom="true"

                android:layout_centerHorizontal="true"

                android:gravity="bottom"

                android:padding="10dip"

                app:centered="true"

                app:fillColor="#ff0099"

                app:pageColor="#FF0000"

                app:snap="false" />

        </RelativeLayout>

    </LinearLayout>

3. Now create a new xml layout naming slidingimages_layout.xml that contains an ImageView. It is custom view for our images placing.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:padding="1dip" >

    <ImageView

        android:id="@+id/image"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:adjustViewBounds="true"

        android:layout_gravity="center"

android:src="@mipmap/ic_launcher"

        android:scaleType="centerCrop" />

</FrameLayout>

4. For custom view we have to create a java file for connecting the custom view with the user interface. I named the class SlidingImage_Adapter.java extending PagerAdapter since we are dealing with ViewPager. This class just fetch the Images from Array and display over imageView and rest will be handled by viewpager.

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

59

60

61

62

63

64

65

66

67

68

69

package com.slidingimages;

import android.content.Context;

import android.os.Parcelable;

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 SlidingImage_Adapter extends PagerAdapter {

    private ArrayList<Integer> IMAGES;

    private LayoutInflater inflater;

    private Context context;

    public SlidingImage_Adapter(Context context,ArrayList<Integer> 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 imageLayout = inflater.inflate(R.layout.slidingimages_layout, view, false);

        assert imageLayout != null;

        final ImageView imageView = (ImageView) imageLayout

                .findViewById(R.id.image);

imageView.setImageResource(IMAGES.get(position));

        view.addView(imageLayout, 0);

        return imageLayout;

    }

    @Override

    public boolean isViewFromObject(View view, Object object) {

        return view.equals(object);

    }

    @Override

    public void restoreState(Parcelable state, ClassLoader loader) {

    }

    @Override

    public Parcelable saveState() {

        return null;

    }

}

5. Finally come to your MainActivity.java and add the following code. In this class at start we set the Timer that changes the images at particular interval of time and also when user swipes the viewpager will change the next image.

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

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

package com.slidingimages;

import android.os.Bundle;

import android.os.Handler;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import com.viewpagerindicator.CirclePageIndicator;

import java.util.ArrayList;

import java.util.Timer;

import java.util.TimerTask;

public class MainActivity extends AppCompatActivity {

    private static ViewPager mPager;

    private static int currentPage = 0;

    private static int NUM_PAGES = 0;

     private static final Integer[] IMAGES= {R.drawable.one,R.drawable.two,R.drawable.three,R.drawable.five};

private ArrayList<Integer> ImagesArray = new ArrayList<Integer>();

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        init();

    }

    private void init() {

        for(int i=0;i<IMAGES.length;i++)

            ImagesArray.add(IMAGES[i]);

        mPager = (ViewPager) findViewById(R.id.pager);

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

        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 =IMAGES.length;

        // 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) {

            }

        });

    }

}

6. Now, you are all done, run your app and you will get the output as shown in video.

ADD in build gradle

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

Thanks.

Download Source Code – >

Shikha Pathak

Android Image Slider Using ViewPager

Android Image Slider Using ViewPager

Video Demo

0 comments:

Post a Comment

FAVOURITE LINE

SAY HELLO TO ME

ADDRESS

EMAIL

Skype