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) {
    // making everything as un selected
    for (int i = 0; i &amp;amp;amp;amp;lt; dotsCount; i++){
     dots[i].setTextColor(getResources().getColor(android.R.color.darker_gray));
    }
    // only one selected
    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 …!

13 thoughts on “How to create UIPageViewController(iOS) like in Android

  1. here’s my error

    09-23 12:55:21.416: E/AndroidRuntime(617): FATAL EXCEPTION: main
    09-23 12:55:21.416: E/AndroidRuntime(617): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.ite.pageviewtext/com.ite.pageviewtext.MainActivity}: java.lang.ArrayIndexOutOfBoundsException: length=5; index=5
    09-23 12:55:21.416: E/AndroidRuntime(617): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2059)
    09-23 12:55:21.416: E/AndroidRuntime(617): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2084)
    09-23 12:55:21.416: E/AndroidRuntime(617): at android.app.ActivityThread.access$600(ActivityThread.java:130)
    09-23 12:55:21.416: E/AndroidRuntime(617): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1195)
    09-23 12:55:21.416: E/AndroidRuntime(617): at android.os.Handler.dispatchMessage(Handler.java:99)
    09-23 12:55:21.416: E/AndroidRuntime(617): at android.os.Looper.loop(Looper.java:137)
    09-23 12:55:21.416: E/AndroidRuntime(617): at android.app.ActivityThread.main(ActivityThread.java:4745)
    09-23 12:55:21.416: E/AndroidRuntime(617): at java.lang.reflect.Method.invokeNative(Native Method)
    09-23 12:55:21.416: E/AndroidRuntime(617): at java.lang.reflect.Method.invoke(Method.java:511)
    09-23 12:55:21.416: E/AndroidRuntime(617): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:786)
    09-23 12:55:21.416: E/AndroidRuntime(617): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:553)
    09-23 12:55:21.416: E/AndroidRuntime(617): at dalvik.system.NativeStart.main(Native Method)
    09-23 12:55:21.416: E/AndroidRuntime(617): Caused by: java.lang.ArrayIndexOutOfBoundsException: length=5; index=5
    09-23 12:55:21.416: E/AndroidRuntime(617): at com.ite.pageviewtext.MainActivity.setUiPageViewController(MainActivity.java:46)
    09-23 12:55:21.416: E/AndroidRuntime(617): at com.ite.pageviewtext.MainActivity.onCreate(MainActivity.java:36)
    09-23 12:55:21.416: E/AndroidRuntime(617): at android.app.Activity.performCreate(Activity.java:5008)
    09-23 12:55:21.416: E/AndroidRuntime(617): at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1079)
    09-23 12:55:21.416: E/AndroidRuntime(617): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2023)
    09-23 12:55:21.416: E/AndroidRuntime(617): … 11 more

    Like

  2. hi, just asking since im changing TextView to ImageView there is no need for this codes right?

    private void setUiPageViewController() {
    dotsLayout = (LinearLayout)findViewById(R.id.viewPagerCountDots);
    dotsCount = myViewPagerAdapter.getCount();
    dots = new TextView[dotsCount];

    for (int i = 0; i < dotsCount; i++) {
    dots[i] = new TextView(this);
    dots[i].setText(Html.fromHtml("•"));
    dots[i].setTextSize(30);
    dots[i].setTextColor(getResources().getColor(android.R.color.darker_gray));
    dotsLayout.addView(dots[i]);
    }

    Like

Leave a comment