Reputation: 4062

How to Add ViewPager Indicator Headings Like Google+ App

My goal is to create a screen similar in function to the Stream page in the Google+ app (picture below for those unfamiliar). For the paging, I am using a custom ViewGroup so that it has smooth transitions that "follow your finger" rather than just snapping to the destination after the fling gesture has been made.

Question

Currently, I am going the route of using some TranslateAnimations to move the headings ("Nearby," "All circles," and "Incoming" in the screenshot) once a new page has been selected. This creates a couple of problems: the center heading doesn't follow the user's finger (as you can see the "All circles" heading does in the screenshot), and if the user begins on a page other than the middle one, I have not found an easy way to offset all of the animations temporarily without running them first since the animations do not move the actual views.

Am I going about this the correct way, or is there a much simpler way of accomplishing this that I am overlooking?

Thanks

Upvotes: 15

Answers (4)

fones

Reputation: 181

Google has published his own solution in support library.

Check: PagerTitleStrip, PagerTabStrip

Upvotes: 5

Glendon Trullinger

Reputation: 4062

After hours of searching and a little luck with search terms, I came across A Google+ like ViewPager page indicator.

I also came across Android ViewPager Indicator, created by the same developer who wrote ActionBarSherlock. Has a ton of examples, and is pretty easy to integrate with the FragmentPagerAdapter.

Upvotes: 22

Kurru

Reputation: 14321

Have just used ViewPagerIndicator solution and its very nice and smooth. You can demo the effect by looking at the demo from the Android Market here

Upvotes: 3

OKA

Reputation: 1453

I am not 100% sure, but I think it uses the new ViewPager. Maybe you should look at the API 4+ Support Demos:

Upvotes: 0

How to Add ViewPager Indicator Headings Like Google+ App

Answers (4)

Related Questions