Android Jake Wharton ViewPager Indicator Tutorial
In this tutorial, you will learn how to implement Jake Wharton’s viewpager indicator in your Android application. ViewPager indicator allows you provide a clear indicator that there exists additional content which they can click or swipe. We will create a viewpager and on flip left or right will show different images and texts and an indicator at the bottom view. So lets begin…
Download Jake Wharton’s ViewPagerIndicator Library
Visit Jake Wharton’s ViewPagerIndicator website and download the Zip file provided. The extracted zip folder should contain the files shown below.
Rename the folder “library” to “ViewPagerIndicatorLibrary” and copy the folder into your workspace as shown on the screenshot below.
Import ViewPagerIndicator Library
To import ViewPagerIndicator Library into Eclipse, go to File > Import > Select Existing Android Code into Workspace.
Click on Browse button and locate ViewPagerIndicator Library in your workspace. Import ViewPagerIndicator Library into your workspace by ticking the check box as shown on the screenshot below.
Implement ViewPagerIndicator Library into Project
Create a new project in Eclipse File > New > Android Application Project. Fill in the details and name your project ViewPagerTutorial.
Application Name : ViewPagerTutorial
Project Name : ViewPagerTutorial
Package Name : com.androidbegin.viewpagertutorial
Next, import ViewPagerIndicator Library into your project. Go to your project properties by right clicking on your project > Properties> Android > Add > Select ViewPagerIndicatorLibrary > Apply > OK.
Open your MainActivity.java and paste the following code.
MainActivity.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
package com.androidbegin.viewpagerindicatortutorial; import android.os.Bundle; import android.app.Activity; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import com.viewpagerindicator.UnderlinePageIndicator; public class MainActivity extends Activity { // Declare Variables ViewPager viewPager; PagerAdapter adapter; String[] rank; String[] country; String[] population; int[] flag; UnderlinePageIndicator mIndicator; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Get the view from viewpager_main.xml setContentView(R.layout.viewpager_main); // Generate sample data rank = new String[] { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10" }; country = new String[] { "China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan" }; population = new String[] { "1,354,040,000", "1,210,193,422", "315,761,000", "237,641,326", "193,946,886", "182,912,000", "170,901,000", "152,518,015", "143,369,806", "127,360,000" }; flag = new int[] { R.drawable.china, R.drawable.india, R.drawable.unitedstates, R.drawable.indonesia, R.drawable.brazil, R.drawable.pakistan, R.drawable.nigeria, R.drawable.bangladesh, R.drawable.russia, R.drawable.japan }; // Locate the ViewPager in viewpager_main.xml viewPager = (ViewPager) findViewById(R.id.pager); // Pass results to ViewPagerAdapter Class adapter = new ViewPagerAdapter(MainActivity.this, rank, country, population, flag); // Binds the Adapter to the ViewPager viewPager.setAdapter(adapter); // ViewPager Indicator mIndicator = (UnderlinePageIndicator) findViewById(R.id.indicator); mIndicator.setFades(false); mIndicator.setViewPager(viewPager); } } |
In this activity, we have created string arrays with sample data and pass it into the ViewPagerAdapter class. In this tutorial, we are using an underline page indicator and disabled the indicator from fading.
We have prepared some sample images for this tutorial. Insert your downloaded sample images into your res > drawable-hdpi.
Sample Images
Next, create an XML graphical layout for your MainActivity. Go to res > layout > Right Click on layout > New > Android XML File
Name your new XML file viewpager_main.xml and paste the following code.
viewpager_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> <com.viewpagerindicator.UnderlinePageIndicator android:id="@+id/indicator" android:layout_width="fill_parent" android:layout_height="5dp" /> </LinearLayout> |
Next, create a custom viewpager adapter. Go to File > New > Class and name it ViewPagerAdapter.java. Select your package named com.androidbegin.viewpagerindicatortutorial and click Finish.
Open your ViewPagerAdapter.java and paste the following code.
ViewPagerAdapter.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
package com.androidbegin.viewpagerindicatortutorial; import android.content.Context; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.RelativeLayout; import android.widget.TextView; public class ViewPagerAdapter extends PagerAdapter { // Declare Variables Context context; String[] rank; String[] country; String[] population; int[] flag; LayoutInflater inflater; public ViewPagerAdapter(Context context, String[] rank, String[] country, String[] population, int[] flag) { this.context = context; this.rank = rank; this.country = country; this.population = population; this.flag = flag; } @Override public int getCount() { return rank.length; } @Override public boolean isViewFromObject(View view, Object object) { return view == ((RelativeLayout) object); } @Override public Object instantiateItem(ViewGroup container, int position) { // Declare Variables TextView txtrank; TextView txtcountry; TextView txtpopulation; ImageView imgflag; inflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); View itemView = inflater.inflate(R.layout.viewpager_item, container, false); // Locate the TextViews in viewpager_item.xml txtrank = (TextView) itemView.findViewById(R.id.rank); txtcountry = (TextView) itemView.findViewById(R.id.country); txtpopulation = (TextView) itemView.findViewById(R.id.population); // Capture position and set to the TextViews txtrank.setText(rank[position]); txtcountry.setText(country[position]); txtpopulation.setText(population[position]); // Locate the ImageView in viewpager_item.xml imgflag = (ImageView) itemView.findViewById(R.id.flag); // Capture position and set to the ImageView imgflag.setImageResource(flag[position]); // Add viewpager_item.xml to ViewPager ((ViewPager) container).addView(itemView); return itemView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { // Remove viewpager_item.xml from ViewPager ((ViewPager) container).removeView((RelativeLayout) object); } } |
In this custom viewpager adapter class, string arrays are passed into the ViewPagerAdapter and set into the TextViews and ImageViews followed by the positions.
Next, create an XML graphical layout for your listview item. Go to res > layout > Right Click on layout > New > Android XML File
Name your new XML file viewpager_item.xml and paste the following code.
viewpager_item.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:padding="10dp" > <TextView android:id="@+id/ranklabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/ranklabel" /> <TextView android:id="@+id/rank" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/ranklabel" /> <TextView android:id="@+id/countrylabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/ranklabel" android:text="@string/countrylabel" /> <TextView android:id="@+id/country" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/rank" android:layout_toRightOf="@+id/countrylabel" /> <TextView android:id="@+id/populationlabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/countrylabel" android:text="@string/populationlabel" /> <TextView android:id="@+id/population" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/country" android:layout_toRightOf="@+id/populationlabel" /> <ImageView android:id="@+id/flag" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:background="#000000" android:padding="1dp" /> </RelativeLayout> |
Next, change the application name and texts. Open your strings.xml in your res > values folder and paste the following code.
strings.xml
1 2 3 4 5 6 7 8 9 10 |
<resources> <string name="app_name">ViewPager Indicator Tutorial</string> <string name="hello_world">Hello world!</string> <string name="menu_settings">Settings</string> <string name="ranklabel">"Rank : "</string> <string name="countrylabel">"Country : "</string> <string name="populationlabel">"Population : "</string> </resources> |
In your AndroidManifest.xml, there are no changes to be made as we only have one activity in this application.
AndroidManifest.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.androidbegin.viewpagerindicatortutorial" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="15" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> |
Output:
Source Code