Monday, 17 December 2012

Android: Setting up ViewPagerIndicator

Swami Gulagulaananda quoted:
"Everything is difficult before it's easy"

In Android applications, many times, you have a bunch of things that you want to show - that are shown one at a time, and you can slide your finger horizontally across for the existing pane to fly off and the new pane to fly in. To do this, you make use of Android's ViewPagers.

However, in order to let a user know that the sliding is possible and also to indicate how many such slides are available, there are some symbols that you might have noticed. Like hollow circles and a filled circle, for example.


To achieve this kind of effect, everyone over the Internet seems to suggest using a library called ViewPagerIndicator. And they are right. You can quickly set it up.

But if you are a novice, you will go through one hell of a time trying to set it up. You can get a host of issues that you might not know how to resolve. I found that there are a large number of people in various forums, including Stackoverflow, who sound terribly flustered trying to set this up. So I thought of posting a simple tutorial. It worked for me... Let me know if there's a better or different way of doing it.

Setting Up ViewPagerIndicator

  1. Download the project from the Github page of ViewPagerIndicator. Unzip if zipped.
  2. In your Eclipse, go to File -> Import -> Existing Android code into workspace
  3. In the next pane, browse and import the folder called 'library' which is in the ViewPagerIndicator project. Once you have imported it successfully, it should appear in your workspace
  4. Right click on 'library' in your workspace. Go to properties. Choose Android in the left pane. Uncheck the checkbox that says 'Is Library' - click on Apply
  5. In the left pane, click on Java Compiler. Change compiler compliance level to 1.6 and Apply
  6. Now, close the dialog, and run the Library project. This should generate a library.apk file.
  7. Again Right click on 'library' in your workspace. Go to properties. Choose Android in the left pane. Check the checkbox that says 'Is Library' - click on Apply
  8. Open your project in your file explorer (My Computer) and in the folder called libs, copy the file 'android-support-v4.jar' into the libs folder of 'library' project. Basically, both projects should have the same file
  9. Open the dependent project - that is, your project, where you want to use it. Go to properties. Choose Android in the left pane. In the library section, click on Add...
  10. In the popup, choose 'library'.
  11. Click on Apply.
  12. In the left pane of the project properties, choose Java Build Path. In the Projects tab, click on Add. Choose the 'library' folder. Click on OK!
  13. That's it! You have set it up. Now follow the instructions given on their Github page - it should work seamlessly.


I hope I saved you a lot of time. Do leave a comment :-)

3 comments:

Mizaan Shamaun said...

I have followed all the instruction and am nearly there of creating the android app i get an error under TestAdapter in my Java file on the website you lead me to any ideas?

Nikhil Baliga said...

You have to provide details like what error or problem you are facing. Simply saying that you have an issue makes it very hard to debug :-) It would be great if you can post some details.

Suman said...

I have followed your instruction..
my Layout file is





and circleindicator is used as
viewPager = (ViewPager) findViewById(R.id.pager);

CirclePageIndicator mIndicator = (CirclePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(viewPager);

but getting error for mIndicator - NULL pointer exception