Adding drawable to CirclePageIndicator

Question

How to add image to circle pageindicator instead of adding color.. I have tried to add iconpage indicator but on click method is not working but i can add Image.. In circlepageIndicator onclick method is working but HOW TO ADD DRAWABLE, IMAGE TO CIRCLEPAGE INDICATOR. BELOW IS MY CODE.

USED CirclePageIndicator

       indicator  = (CirclePageIndicator)findViewById(R.id.indicatorMenu);
    indicator.setViewPager(pagerMenu);

    final float density1 = getResources().getDisplayMetrics().density;
    indicator.setRadius(5 * density1);
    indicator.setPageColor(0xFF000000);
    indicator.setFillColor(0xFF888888);
  indicator.setStrokeColor(0x880000FF);
    indicator.setStrokeWidth(2 * density1);

    //We set this on the indicator, NOT the pager
    indicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {             
        @Override
        public void onPageSelected(int position) {
         //   Toast.makeText(HomeSpizzaView.this, "Changed to page " + position, Toast.LENGTH_SHORT).show();
        //  pagerMenu.setCurrentItem(position, false);            
        }
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
        @Override
        public void onPageScrollStateChanged(int state) {               
        }
    });

    indicator.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            int currentItem = pagerMenu.getCurrentItem();
               int totalItems = pagerMenu.getAdapter().getCount();
               int nextItem = (currentItem + 1) % totalItems;
               pagerMenu.setCurrentItem(nextItem);
         Log.i("kkkkk", "getCurrentItem"+  nextItem);
         Toast.makeText(HomeSpizzaView.this, "getCurrentItem"+  nextItem, Toast.LENGTH_SHORT).show();
        }
    });

USED IconPageIndicator

      mIndicator  = (IconPageIndicator)findViewById(R.id.indicator);
    mIndicator.setViewPager(mPager);
    mIndicator.setLongClickable(true);

    //We set this on the indicator, NOT the pager
    mIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {             
        @Override
        public void onPageSelected(int position) {
            Toast.makeText(HomeSpizzaView.this, "Changed to page " + position, Toast.LENGTH_SHORT).show();
            mPager.setCurrentItem(position, false);    
        }
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
        @Override
        public void onPageScrollStateChanged(int state) {               
        }
    });


    mIndicator.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v) {
            int currentItem = pagerMenu.getCurrentItem();
               int totalItems = pagerMenu.getAdapter().getCount();
               int nextItem = (currentItem + 1) % totalItems;
               pagerMenu.setCurrentItem(nextItem);
         Log.i("mmmmmmmmmmmm", "getCurrentItem"+  nextItem);
         Toast.makeText(HomeSpizzaView.this, "getCurrentItem"+  nextItem, Toast.LENGTH_SHORT).show();

        }

    });

Answer 1

You an use CirclePageIndicator object to customize page-indicator. you can set image or customize color. you can also customize these indicators using XML and you can find example from given link Android-ViewPagerIndicator's GitHub . If you want to use icon or image then you can use following class SampleIconsDefault.java . from given sample

Answer 2

I had the same problem and the only solution was to create my own library to do that.

https://github.com/augustopicciani/DrawablePageIndicator