All CategoriesAndroid App Development

How to Use ViewPagerIndicator Library with Android Studio and Gradle

ViewPagerIndicator: An Introduction
Here we are going to see Jake Wharton’s ViewPagerIndicator in our Android application.
It is originally based on Patrick Akerfeldt’s ViewFlow.
It is nothing but an indicator which we will see at the bottom view. We can customize it by giving title, image according to the need of the application.
It is designed with Android support library. We can click or swipe to see the other content.
ViewPagerIndicator Library:
If we want to create ViewPagerIndicator application, then there is a need for a library which is available on the official website.
Download the zip file. Extract it. Select the library folder and import it into your workspace.
Add this as a library in your project.
Example with code:
Now, we will implement it programmatically.
⦁ Create an application ViewPagerIndicatorAndroidExample.
⦁ Add the library in this application.
Requirements:
MainActivity.java, ViewPagerAdapter.java, activity_main.xml, viewpager_item.xml.
Let’s do it one by one.
activity_main.xml:
Here we create this XML file for our MainActivity.
Add the code inside LinearLayout.

<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<com.viewpagerindicator.UnderlinePageIndicator
android:id="@+id/page_indicator"
android:layout_width="fill_parent"
android:layout_height="5dp" />

MainActivity.java:
Initialize variables

ViewPager viewPager;
PagerAdapter adapter;
String[] baby_number;
String[] baby_name;
String[] baby_age;
int[] baby_image;
UnderlinePageIndicator mIndicator;
Add the code in onCreate(){…}
Add the data in String array and integer array for baby_number, baby_name, baby_age and baby_image.
Take the reference of ViewPager and UnderlinePageIndicator.
viewPager = (ViewPager) findViewById(R.id.view_pager);
mIndicator = (UnderlinePageIndicator) findViewById(R.id.page_indicator);
Pass the results to ViewPagerAdapter class and set the adapter to ViewPager.
viewPager.setAdapter(adapter);

Set the properties of ViewPagerIndicator.

mIndicator.setFades(false);
mIndicator.setViewPager(viewPager);

ViewPager_item.xml:
Create this XML file for ViewPager item.
Add the code inside RelativeLayout:

<TextView
android:id="@+id/tv_numberlabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/numberlabel" />
<TextView
android:id="@+id/tv_Number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/tv_numberlabel" />
<TextView
android:id="@+id/tv_Namelabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_numberlabel"
android:text="@string/namelabel" />
<TextView
android:id="@+id/tv_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_Number"
android:layout_toRightOf="@+id/tv_Namelabel" />
<TextView
android:id="@+id/tv_Agelabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_Namelabel"
android:text="@string/agelabel" />
<TextView
android:id="@+id/tv_Age"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_Name"
android:layout_toRightOf="@+id/tv_Agelabel" />
<ImageView
android:id="@+id/iv_Image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#000000"
android:padding="1dp" />

Here, we will show Image of a baby, baby name, baby age, baby number.
ViewPagerAdapter.java:
Create a custom ViewPager Adapter in your application. Extend this with PagerAdapter and override its methods.
Initialize Variables:

Context context;
String[] baby_number;
String[] baby_name;
String[] baby_age;
int[] baby_image;
LayoutInflater inflater;

Create Constructor of ViewPagerAdapter here.
Add the code in instantiateItem(){..} method:
Here we will inflate the item view and set the baby name, number, age, image position in this method.

tv_babyNumber.setText(baby_number[position]);
tv_babyName.setText(baby_name[position]);
tv_babyAge.setText(baby_age[position]);
iv_babyImage.setImageResource(baby_image[position]);

Download Source Code: GitHub

Conclusion:
So, this was all about the ViewPagerIndicator in Android. It was just a simple example of, how to create this functionality in our application by adding ViewPagerIndicator library. We can customize it according to the need of an application. This feature is used in many application. It is a very popular feature in Android development.
Hope you find this blog section informative, keep visiting www.acadgild.com for more updates on the courses.

Android Programming

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close