How to customize PagerTitleStrip android

Question

I must customize a PagerTitleStrip in ViewPager in this way:

I have to create circles with numbers corresponding to the inside pages, the circle in the middle has to be bigger. Anyone have any suggestions?

Answer 1

You can use Following code to create custom View Pager Indicator for your View Pager

 public class  SimpleViewPagerIndicator extends LinearLayout implements
        OnPageChangeListener {
    private static final String TAG = SimpleViewPagerIndicator.class
            .getSimpleName();

    private Context context;
    private ViewPager pager;
    private OnPageChangeListener onPageChangeListener;
    private LinearLayout itemContainer;
    private List<ImageView> items;
    private OnClickListener itemClickListener = new OnClickListener() {
        @Override
        public void onClick(View v) {
            int position = (Integer) v.getTag();

            pager.setCurrentItem(position);
        }
    };

    public SimpleViewPagerIndicator(Context context) {
        super(context);
        this.context = context;
        setup();
    }

    public SimpleViewPagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        setup();
    }

    public SimpleViewPagerIndicator(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);
        this.context = context;
        setup();
    }

    private void setup() {
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if (inflater != null) {
            inflater.inflate(R.layout.view_pager_indicator, this);

            itemContainer = (LinearLayout) findViewById(R.id.pager_indicator_container);

            items = new ArrayList<ImageView>();
        }
    }

    /**
     * Notifies the pager indicator that the data set has changed. Be sure to
     * notify the pager as well (though you may wish to place that call in here
     * yourself).
     */
    public void notifyDataSetChanged() {
        if (pager != null && pager.getAdapter() != null) {

            // remove the old items (if any exist)
            itemContainer.removeAllViews();

            // I'm sure this could be optimised a lot more, eg,
            // by reusing existing ImageViews, but it
            // does the job well enough for now.
            items.removeAll(items);

            // now create the new items.
            for (int i = 0; i < pager.getAdapter().getCount(); i++) {

                ImageView item = new ImageView(context);
                LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.WRAP_CONTENT,
                        LinearLayout.LayoutParams.WRAP_CONTENT);
                lp.setMargins(5, 5, 5, 5);
                item.setLayoutParams(lp);
                if (i == pager.getCurrentItem()) {
                    item.setImageResource(R.drawable.selected_dot);
                } else {
                    item.setImageResource(R.drawable.un_selected_dot);
                }

                item.setTag(i);
                item.setOnClickListener(itemClickListener);
                items.add(item);

                itemContainer.addView(item);
            }
        }
    }

    public ViewPager getViewPager() {
        return pager;
    }

    public void setViewPager(ViewPager pager) {
        this.pager = pager;
        this.pager.setOnPageChangeListener(this);
    }

    public OnPageChangeListener getOnPageChangeListener() {
        return onPageChangeListener;
    }

    public void setOnPageChangeListener(
            OnPageChangeListener onPageChangeListener) {
        this.onPageChangeListener = onPageChangeListener;
    }

    private void setCurrentItem(int position) {
        if (pager != null && pager.getAdapter() != null) {
            int numberOfItems = pager.getAdapter().getCount();

            for (int i = 0; i < numberOfItems; i++) {
                ImageView item = items.get(i);
                if (item != null) {
                    if (i == position) {
                        item.setImageResource(R.drawable.selected_dot);
                    } else {
                        item.setImageResource(R.drawable.un_selected_dot);
                    }
                }
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (this.onPageChangeListener != null) {
            this.onPageChangeListener.onPageScrollStateChanged(state);
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset,
            int positionOffsetPixels) {
        if (this.onPageChangeListener != null) {
            this.onPageChangeListener.onPageScrolled(position, positionOffset,
                    positionOffsetPixels);
        }
    }

    @Override
    public void onPageSelected(int position) {
        setCurrentItem(position);
        if (this.onPageChangeListener != null) {
            this.onPageChangeListener.onPageSelected(position);
        }
    }
}

You just have to change the drawables.