View Pager Example in Android Development

This example shows how you can create an image pager in android.

Algorithm:

1.) Create a new project by File-> New -> Android Project name it ViewPagerExample.

2.) Write following into main.xml:


<?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="match_parent"
        android:layout_height="match_parent"
         />

</LinearLayout>

3.) Create and write following into res/layout/details.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/detailsText"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal|center_vertical"
        android:layout_marginTop="20dip"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="30dip" />

</LinearLayout>

4.) Create and write following into res/layout/details.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

5.) Create and Write following into src/DetailFragment.java:

package com.example.viewpagerexample;

import com.example.viewpagerexample.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class DetailFragment extends Fragment {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		Log.e("Test", "hello");
	}

	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);

	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.details, container, false);
		TextView textView = (TextView) view.findViewById(R.id.detailsText);
		textView.setText("Testing");
		return view;
	}
}

6.) Create and Write following into src/ImageFragment.java:

package com.example.viewpagerexample;

import com.example.viewpagerexample.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ImageFragment extends Fragment {
	private final int imageResourceId;

	public ImageFragment(int imageResourceId) {
		this.imageResourceId = imageResourceId;
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		Log.e("Test", "hello");
	}

	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);

	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.image_layout, container, false);
		ImageView imageView = (ImageView) view.findViewById(R.id.imageView1);
		imageView.setImageResource(imageResourceId);
		return view;
	}
}

7.) Run for output.

Steps:

1.) Create a project named ViewPagerExample and set the information as stated in the image.

Build Target: Android 4.0
Application Name: ViewPagerExample
Package Name: com. example. ViewPagerExample
Activity Name: ViewPagerExample
Min SDK Version: 8

2.) Open ViewPagerExample.java file and write following code there:

package com.example.viewpagerexample;

import com.example.viewpagerexample.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

public class ViewPagerExample extends FragmentActivity {
	private MyAdapter mAdapter;
	private ViewPager mPager;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		mAdapter = new MyAdapter(getSupportFragmentManager());

		mPager = (ViewPager) findViewById(R.id.pager);
		mPager.setAdapter(mAdapter);
	}

	public static class MyAdapter extends FragmentPagerAdapter {
		public MyAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public int getCount() {
			return 3;
		}

		@Override
		public Fragment getItem(int position) {
			switch (position) {
			case 0:
				return new DetailFragment();
			case 1:
				return new ImageFragment(R.drawable.ic_launcher);
			case 2:
				return new ImageFragment(R.drawable.thumb);

			default:
				return null;
			}
		}
	}
}

3.) Compile and build the project.

Output

About the Author

Leave a Reply 30 comments

thomas - September 14, 2012 Reply

Nice list of blogs to follow!

abdullah ayyad - September 14, 2012 Reply

wait , theirs two file of
details.xml , on this example , how this work ??

    anonymous - September 22, 2012 Reply

    the 2nd xml file should be image_layout.xml

christian - October 8, 2012 Reply

the example is not completed , where is the complete source ?

Niko - October 24, 2012 Reply

Very useful! Thanks a lot!

gabi - October 28, 2012 Reply

do you know how can I make a button that I have added to xml on the 1st fragment work or open a new page

gabi - November 5, 2012 Reply

Hello, thank you very much for the tutorial to add the buttons on each fragment you may use:
public class DetailFragment extends Fragment {

gabi - November 5, 2012 Reply

after that you can add the usual button code, however you have to be careful how the “intent” is defined

Lesik Pidy - December 10, 2012 Reply

THANK YOU!!!
Your Tutorial is so great!
I didn’t understand it for years of development!!!
THANKS for sharing this simple tutorial with us!
You are the best, love you!!

Thank you, again! I am so happy now!

Sean - December 15, 2012 Reply

Great, Thanx

Vishnu - December 17, 2012 Reply

Yeah, this was i looking for….. Great tutorial……..

John - December 24, 2012 Reply

This is very good, however when I change the orientation of my phone the app crashes. Anyone have any ideas why? Here is the logcat:

12-24 21:09:30.411: D/dalvikvm(18639): newInstance failed: no ()
12-24 21:09:30.421: D/AndroidRuntime(18639): Shutting down VM
12-24 21:09:30.421: W/dalvikvm(18639): threadid=1: thread exiting with uncaught exception (group=0x40028a00)
12-24 21:09:30.451: E/AndroidRuntime(18639): FATAL EXCEPTION: main
12-24 21:09:30.451: E/AndroidRuntime(18639): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.viewpagerexample/com.example.viewpagerexample.ViewPagerExample}: android.support.v4.app.Fragment$InstantiationException: Unable to instantiate fragment com.jacoblever.view.pager.example.MenuFragment: make sure class name exists, is public, and has an empty constructor that is public

Thanks

ninjaboy - January 4, 2013 Reply

why does the app stop working or crash when i tried it on the emulator

Andy Res - January 6, 2013 Reply

Very clean and nice example. thanks.

Katrina - January 17, 2013 Reply

Hi, very nice example, but how can I zoom and pan the images in this viewpager?
Thanks in advance!

Regards,
Katrina

Praveen Pandey - January 23, 2013 Reply

great tutorial …. Thanks ….

Raja Rajan - January 31, 2013 Reply

Nice tutorial..It’s help me so much..thank u.

Mihai - February 8, 2013 Reply

Crash if change to landscape mode. Any solution, without disabling orientation?

Mihai - February 8, 2013 Reply

OK, I’ve fixed it, removing arguments from ImageFragment fix the issue.

VeeJay - March 20, 2013 Reply

Thank you so much. I have been struggling like anything for the past 5 days to try this kind of example.

Great post.

maddy - May 13, 2013 Reply

Hi,
If i create i listview in one of the fragment and I want to refresh the listView after the fragment is created. how do i can do this. Thanks in advance.

anon - May 20, 2013 Reply

i still got error ,

uncaught exception (group=0x4001d800)

can you help me?

Ricardo Santos - May 24, 2013 Reply

Hi guys,

Thanks Sushant, for your sample.
It didn’t work at first but I managed to get it working.
I also included an image to replace that drawable.thumb I couldn’t find

For anyone asking for the complete source, here follows:
http://www.scottx.net/android_samples/ViewPagerExample.zip

I have this sample which is almost everything I want to do but lacks zoom:
http://developer.android.com/training/displaying-bitmaps/index.html

And I also have this great sample which has pinch-zoom:
https://github.com/sephiroth74/ImageViewZoom

Now modified by me with a double tap listener zooming to image at 100%:
http://www.scottx.net/android_samples/ImageViewTouch.zip
offtopic: The girl in the photo included in this sample is my neighbour :)

Now what I would like to do is either put the ImageViewTouch on a Pageviewer like the sample explained on this page so a user can swipe the image to see the next photo keeping the zooming capabilites, or use the first sample from Google but with zooming.

Could anyone give a little help here?

Thank you so much :)
Ricardo Santos

Nayeem - July 15, 2013 Reply

Thanks, it worked for me! Had to change few things though.

Kamlesh Bobde - July 18, 2013 Reply

very good and useful example….Thanx a lot

Ahsan - July 30, 2013 Reply

Hey , thanks for this. I have 2 problem, hope you can help. I want the pager to go from left to right(not sure how to do that) and when the screen orientation changes it closes out the page. Can you please help me with these 2 issue. Thanks in advance

phanan - August 23, 2013 Reply

How can we make TextView of details.xml show something from database?

phanan - August 23, 2013 Reply

And can we build page4 with graphic?

Ajay B - October 31, 2013 Reply

Nice post. I like the example.
In ImageFragment.java “imageResourceId” should not be defined as final.

Csxman - November 6, 2013 Reply

Thank Nice Exam !!

Leave a Reply: