Add dot indicator to viewpager with pageradapter

Question

I need to add dot indicator to my code for slide show so kindly help me to add this indicator and also click listner for views in page viewer

 viewPager = (ViewPager) findViewById(R.id.splash);
        ImageAdapter adapter = new ImageAdapter(this);
        viewPager.setAdapter(adapter);

public class ImageAdapter extends PagerAdapter {

        Context context;

        private int[] GalImages = new int[] {
                R.drawable.slider,
                R.drawable.slider,
                R.drawable.slider,
        };

        ImageAdapter(Context context){
            this.context=context;
        }

        @Override
        public int getCount() {
         return GalImages.length;
         //   return 10;
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = new ImageView(context);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setImageResource(GalImages[position]);
            new LoadImage(imageView).execute("http://www.gadgetbaazar.com/wp-content/uploads/2016/12/Top-Mobile-Phones.jpg");
            new LoadImage(imageView).execute("https://pisces.bbystatic.com/BestBuy_US/store/ee/2015/com/pm/nav_desktops_1115.jpg");
            container.addView(imageView, 0);
            return imageView;
        }

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



        private class LoadImage extends AsyncTask<String, String, Bitmap> {
            ImageView img=null;
            public LoadImage(ImageView img){
                this.img=img;
            }
            @Override
            protected void onPreExecute() {
                super.onPreExecute();

            }
            protected Bitmap doInBackground(String... args) {
                Bitmap bitmap=null;
                try {
                    bitmap = BitmapFactory.decodeStream((InputStream)new URL(args[0]).getContent());
                } catch (Exception e) {
                    e.printStackTrace();
                }
                return bitmap;
            }
            protected void onPostExecute(Bitmap image) {
                if(image != null){
                    img.setImageBitmap(image);
                }
            }
        }
    }

Here i need the indicators if possible along with pageclick listner for this viewpager

Answer 1

I done this using following LIB PageIndicatorView

compile 'com.romandanylyk:pageindicatorview:0.1.1'

<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:id="@+id/pager"
    android:layout_height="match_parent">

</android.support.v4.view.ViewPager>

<com.rd.PageIndicatorView
    android:id="@+id/pageIndicatorView"
    android:layout_width="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_above="@+id/buttons"
    android:layout_marginBottom="20dp"
    app:piv_animationType="swap"
    app:piv_viewPager="@id/pager"
    android:layout_height="wrap_content" />

Java code

mViewPager = (ViewPager) findViewById(pager);
    mViewPager.setAdapter(mCustomPagerAdapter);

    //dots
    PageIndicatorView pageIndicatorView = (PageIndicatorView) findViewById(R.id.pageIndicatorView);
    pageIndicatorView.setViewPager(mViewPager);

OUTPUT