How to develop a step number showing Viewpager Indicator in android?

Question

I want to develop a step number ViewPager Indicator in android. When the user is on the first step the indicator will look like this.

And when he is on the last step, it should look like this.

So, as I go forward in the ViewPager, I want the step numbers to go forward one step at a time showing the step number and lines connecting them highlighted.

EDIT:

The code of the layout of the indicator I have tried is as follows. I programmatically change the drawables of the images on page slide. But the problem is that how do I create the line connecting two steps and increment the progress on the page slide? Is there a library available?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="horizontal"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
    >

<ImageView
        android:id="@+id/img_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/cb1"
        android:layout_weight="1"
        />

<ImageView
        android:id="@+id/img_two"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/cb2"
        android:layout_weight="1"
        />

<ImageView
        android:id="@+id/img_three"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/cb3"
        android:layout_weight="1"
        />

<ImageView
        android:id="@+id/img_four"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/cb4"
        android:layout_weight="1"
        />

<ImageView
        android:id="@+id/img_five"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/cb5"
        android:layout_weight="1"
        />

<ImageView
        android:id="@+id/img_six"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/cb6"
        android:layout_weight="1"
        />

Please help. Thanks.

Answer 1

there're better ways to achieve what you want (better performance and memory efficiency, but much more complicated to achieve), but to follow with your current attempted solution you must:

to create the lines you'll include the following view between each ImageView (change the color, height and width as you need):

<View 
   android:layout_height="1px" 
   android:layout_width="8dp" 
   android:background="#f99">

and to change status you'll call that on the ViewPager

pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
   @Override public void onPageSelected(int position) {
      /// change status here
   }
});