Tag Archives: Design

The ViewPager

So this is the first on the series on android open source libraries that I have come across. The ViewPager is used in alot of apps. It allows you to swipe across the screen to change the layout or move to the next page, sort of like tabs but not really. Its used in alot of apps, Google play store app uses it.

Im going to use Jake Wharton ViewPagerIndicator. 

  1. Go over to Git here or at the site, then look for a download button. Its going to a zip folder, unzip somewhere you will remember (in your worlkspace is good).
  2. Open eclipse, in your workspace, go to file -> Import. A dialog box will appear prompting you, under android select ‘Existing Android Code into Workspace’
  3. Browse into the folder you just unzipped and select ‘library’
  4. (I kno I skipped a number). Click ok and ok again in the next dialog.
  5. Start up your android project if you havent already. Now at the Project Explorer on your left, Right click on the folder of your application and choose properties. It should take you to this dialog. Choose android on the left.
  6.  Click on the ‘Add’ button then choose Library – the folder we imported into your workspace.
  7. If you are getting an error – “Found 2 versions of android-support-v4.jar in the dependency list but not all the versions are identical (check is based on SHA-1 only at this time).”. Go over to your ‘libs’ folder and replace android-support-v4.jar file with that in the library project you imported. Go to Project -> Clean.

We are now good to go. There are two things involved here: a ViewPager and an Indicator. The ViewPager is the main page while the indicator is sort of like the tab (in this case).

    1. In your project add a new xml file. (main_activity.xml – it was the default)

    1. Also create xml file – one or more that will be the different pages that a user can swipe through
<!-- page.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
    android:orientation="vertical" >

        android:textAppearance="?android:attr/textAppearanceLarge" />
<a href=""><img src="" alt="" title="device-2012-09-27-204357" width="200" height="300" class="aligncenter size-medium wp-image-300" /></a>
        android:text="Description" />


On the java side we have

package com.gilo.viewpagerexample;

import android.content.Context;
import android.os.Bundle;
import android.os.Parcelable;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

import com.viewpagerindicator.TabPageIndicator;

public class MainActivity extends Activity{
        //these are the titles that will appear on the "tabs"
	final String[] page_titles = new String[]{"Home", "Me", "Apps", "Android", "About"};
	//this will go the description TextView
        final String[] desc = new String[]{
			"This is the homepage the first one you will see.",
			"I'm pretty much me for now I run this really cool blog you should check it out at",
			"I build appps mostly for fun. If you ever want an app just holla",
			"This is the android section",
			"This blog is my journal through life in code and development"
    public void onCreate(Bundle savedInstanceState) {

        //Instantiating the adapter
        GiloAdapter mAdapter = new GiloAdapter(this);

        //instantiate the Views
        ViewPager mPager = (ViewPager)findViewById(;

        TabPageIndicator mIndicator = (TabPageIndicator)findViewById(;

    private class GiloAdapter extends PagerAdapter{

    	Context context;

    	public GiloAdapter(Context c){
    		this.context = c;

    	//This is the number of pages -- 5
		public int getCount() {
			// TODO Auto-generated method stub
			return page_titles.length;

		public boolean isViewFromObject(View v, Object o) {
			// TODO Auto-generated method stub
			return v.equals(o);

		//This is the title of the page that will apppear on the "tab"
		public CharSequence getPageTitle(int position) {
            return page_titles[position];

		//This is where all the magic happen
		public Object instantiateItem(View pager, int position) {
			final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    		View v = inflater.inflate(, null, false);

    		TextView title = (TextView)v.findViewById(;
    		TextView description = (TextView) v.findViewById(;


    		//This is very important
    		( (ViewPager) pager ).addView( v, 0 );

    		return v;

    	public void destroyItem(View pager, int position, Object view) {
    		((ViewPager) pager).removeView((View) view);

    	public void finishUpdate(View view) {

    	public void restoreState(Parcelable p, ClassLoader c) {

    	public Parcelable saveState() {
    		return null;

    	public void startUpdate(View view) {



The ViewPage takes an Adapter in this case I’ve written GiloAdapter. The most important method is instantiateItem(View pager, int position) which selects which Layoout to use. I used a LayoutInflator but with only one Layout.(The current library uses fragments). If you are familiar with Adapters from ListViews then its almost the same idea. The destroyItem() is also important that you override or your app will force close with weird error messages.

Lastly we are going to use the default style in the library, so in the manifest add this in the manifest in your Activity tag:


The .MainActivity in my app

            android:label="@string/title_activity_main" >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

And we have

Thats it, next blogposts we’ll change the colors(customise), maybe look at another indicator.
Drop a comment if you found this helpful or if you got some error you can’t figure out, and I’ll try and have a look.


Posted by on September 27, 2012 in Android, Android tutorials, Code


Tags: , , , ,

Technosavvy Kenyans

This is an app I built for a friend of mine whose blog is at Its currently on its design stage. But i liked the iphone nav-bar on top.

Leave a comment

Posted by on September 7, 2012 in Android