View Pager Counter for Android

Welcome to my first android post about view pager counters. Have you ever tried to create a custom view pager counters? So here is my story that how I’ve created one for myself which I’m gonna share with you.

A view pager counter is nothing but a indication of how many pages (fragments to be shown) are left over in a view pager.

An example of View pager counter

You can customize this counters to anything you want, you can change the shapes or you can add click listeners and so on.

Let’s get started to create this view pager counter yourself, First create a simple android project from your Android studio or Eclipse. Then implement a simple view pager on your MainActivity keep some empty fragments. For example I’ve kept 3 fragments to show the view pager counters

Now let’s modify our MainActivity’s design section in XML.

<LinearLayout
android:id=”@+id/viewPagerCounter”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”bottom|center_horizontal”
android:layout_marginBottom=”30dp”
android:orientation=”horizontal” />

Add this piece of code to your Root layout where the your View Pager is placed. The above coding is just a LinearLayout (Horizontal) so that the counters can be added one by one to the layout.Your root layout can be anything. Here I’ve a FrameLayout in my case.

After adding the above snippet let’s move to our java section. Here we’re gonna do the view pager counter’s work.

As soon as the MainActivity gets started We’ve to add the counters to the pages. So I’m gonna add the number of counters to be shown on top the view pager. Place the following piece of code on the onCreate() of your MainActivity

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(required_size, required_size, 1);
params.rightMargin = 5;
params.leftMargin = 5;
/**
* I'm calculating the required_size with the help of screen width.To handle multiple screen sizes *we've to take the screen width and then calculate the percentage of it
*/
for (int i = 0; i < NUM_PAGES; i++) {
button = new Button(this);
int id = VIEW_ID + i;
button.setId(id);
counters[i] = VIEW_ID + i;
button.setLayoutParams(params);
button.setBackgroundColor(Color.parseColor(“#00ff00"));
ll.addView(button);
}

When I’m creating the view pager counters (buttons in my case you can keep any view you want) along with that I’m setting id for each button I’ve created. So that you can add click listeners to it. It’s mandatory to create ids for each view you’re creating If not you can’t identify the view later to change color or animate 


Now We’ve added the number of counters to be shown on top of the view pager. As you can see Now it’s time to make the counter to change the color or shape or anything to show us on which page are we in currently. To do that you’ve to setOnPageChangeListener() for your view pager’s instance. Place the following piece of code inside the OnPageScrolled() method

for (int i = 0; i < NUM_PAGES; i++) {
int id = VIEW_ID + i;
Button b = (Button) findViewById(id);
if (i == viewPagerPosition) { b.setBackgroundColor(Color.parseColor(“#00ff00"));
} else {
b.setBackgroundColor(Color.parseColor(“#0000ff”));
}
}

 

In this snippet I’m getting the ids myself which I know already then according to the view pager position i’m changing the color of the particular view which needs to be highlighted
Yeah we’re done. We’ve successfully added a view pager counter for our view pager. Please give your valuable comments. Suggestion are always welcome and sorry for the bad english : )

 

Grab this project on GitHub

View Pager Counter for Android