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;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,
Landscape,
I hope code is self explanatory. You can find complete source code of this project at github.
Enjoy ..! Happy Coding …!
how do i change the text to image
LikeLike
Hi, its simple just replace the TextView to ImageView or anything else of view_pager_item.xml. Since it is the layout I am using for the children of ViewPager.
LikeLike
how do you create MyViewPagerAdapter under MainActivity?
LikeLike
Hi,
No issue with that, try exploring more.
LikeLike
hi, i did everything the same but when i launch the app it say ‘Unfortunately ‘appname’ has stop working’
LikeLike
Hi, can you post me Logs of your crash. You can get it from LogCat of your development tool.
LikeLike
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
LikeLike
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]);
}
LikeLike
and which code should be change to add images
LikeLike
Reblogged this on prassypro.
LikeLike
Nice one article.
LikeLike
Thank you so much for your code. It was really helpful to me.
LikeLike
Thanks you…..for your code
LikeLike