How to create UIPageViewController(iOS) like in Android

In one of my app, there was in need of creating UIPageViewController like set up. It is nothing but dots which changes its colour based on navigation of pages in ViewPager. Un fortunately am not able to find any widgets in android SDK that can make my task simple. When I spoke about this to one of my colleague, he gave me a simple solution (Watta man!!!). I hope, I may use this same in my project too. Here it is, to help any of you.

I created simple ViewPager with 5 pages for demo purpose using PagerAdapter. More you can find in source code of this project. And trick begins now,

  1. I created a dummy layout below ViewPager in layout file which contains relative and linear layout without any respective child.
<RelativeLayout
android:id="@+id/viewPagerIndicator"
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
>

<LinearLayout
android:id="@+id/viewPagerCountDots"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal"
>

</LinearLayout>
</RelativeLayout>

2) Get number of pages in ViewPager, from its adapter

dotsCount = myViewPagerAdapter.getCount();

3) Create a TextView array as below

dots = new TextView[dotsCount];

4) Populate the TextView array with TextViews of gray colour and add them in dummy layout as shown below

dotsLayout.addView(dots[i]);
dots[0].setTextColor(getResources().getColor(R.color.app_green));

since 0th position of ViewPager is always selected, I made it green colour indicating as selected.

5) Now implementing PageChangeListeners,

@Override
public void onPageSelected(int position) {
for (int i = 0; i < dotsCount; i++) {
dots[i].setTextColor(getResources().getColor(android.R.color.darker_gray));
}
dots[position].setTextColor(getResources().getColor(R.color.app_green));
}

Screenshots,

Portrait,

Screenshot_2014-08-17-19-44-58

Landscape,

Screenshot_2014-08-17-19-44-21

I hope code is self explanatory. You can find complete source code of this project at github.

Enjoy ..! Happy Coding …!

--

--