Android Pager Sliding tab with icons

Question

I'm developing an android app and recently we decided to mix up the design and switch our main screen to a view pager with tabs on top (actually in the actionbar). To place the tabs on top I was thinking of using a custom actionbar layout and for the tabs to use the PagerSlidingTabStrip library but I also need that instead of text to have an icon that changes colour as you swipe (if the page is selected or not), as it is used on the Facebook app or Tinder

Does anyone have any suggestion for this? I saw that there was a branch made on the tab library that should have done exactly this, but I couldn't get it to work.

Answer 1

OK, found how to add the image to the tab, had to go a bit through the code of the PagerSlidingTab library.

The PagerSlidingTab contains an interface called IconTabProvider that needs to be implemented by your ViewPager's adapter. Implemented that and for each position you can provide a different icon.

My only problem now is that I need to have a different coloured icon based on if a tab is selected or not, with a slow transition between the two (just like on Tinder and on Facebook).

LE: Apparently got lucky and there is a fork of the tab strip library that can be found here. You just need a drawable resource created like this:

<item android:state_selected="true" android:drawable="@drawable/ic_twitter"/>
<item android:drawable="@drawable/ic_twitter_of"/>

It will change whenever you select a new page, but there is not smooth transition between the on and off icon.

LE 2:

Found another branch that has the smooth tab transition (uses the alpha property to show a nice transition) and it can be found here. The only problem is that it doesn't support a state switching icon, so I decided to combine the two forks. Thanks to both creators for the awesome work, saved me a huge amount of time :).