View Pager Example In Android Development

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


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

2.) Write following into main.xml:




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




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




5.) Create and Write following into src/




6.) Create and Write following into src/




7.) Run for output.


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 file and write following code there:




3.) Compile and build the project.


Leave a Comment:

thomas says September 14, 2012

Nice list of blogs to follow!

abdullah ayyad says September 14, 2012

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

    anonymous says September 22, 2012

    the 2nd xml file should be image_layout.xml

christian says October 8, 2012

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

Niko says October 24, 2012

Very useful! Thanks a lot!

gabi says October 28, 2012

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 says November 5, 2012

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

gabi says November 5, 2012

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

Lesik Pidy says December 10, 2012

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 says December 15, 2012

Great, Thanx

Vishnu says December 17, 2012

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

John says December 24, 2012

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}:$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


ninjaboy says January 4, 2013

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

Andy Res says January 6, 2013

Very clean and nice example. thanks.

Katrina says January 17, 2013

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


Praveen Pandey says January 23, 2013

great tutorial …. Thanks ….

Raja Rajan says January 31, 2013

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

Mihai says February 8, 2013

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

Mihai says February 8, 2013

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

Combining Code in Main Activity : Android Community - For Application Development says March 12, 2013

[…] guess this tutorial might be helpful. It employs Android’s […]

VeeJay says March 20, 2013

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

Great post.

maddy says May 13, 2013

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 says May 20, 2013

i still got error ,

uncaught exception (group=0x4001d800)

can you help me?

Ricardo Santos says May 24, 2013

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:

I have this sample which is almost everything I want to do but lacks zoom:

And I also have this great sample which has pinch-zoom:

Now modified by me with a double tap listener zooming to image at 100%:
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 says July 15, 2013

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

Kamlesh Bobde says July 18, 2013

very good and useful example….Thanx a lot

Ahsan says July 30, 2013

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 says August 23, 2013

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

phanan says August 23, 2013

And can we build page4 with graphic?

Ajay B says October 31, 2013

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

Csxman says November 6, 2013

Thank Nice Exam !!

Add Your Reply