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.
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 :).
Related
I would like the tab indicator to first expand and then contract when sliding from one side to the other, like in the image, any ideas? Thank you very much
Check out this question, it may be useful Smooth animation between tabs when using selector - Android.
Also, there are some libraries that may help you:
Android tab animation
SmartTabLayout
Dachshund Tab Layout
I'm developing an app that is using "tabs". I have successfully implemented a design that uses these tabs in conjunction with a number of fragments.
however, I believe that these tabs look pretty ugly. I want to customize how they appear! I prefer them to appear as plain text next to eachother with a "|" between them and underline the tab that the user is one. Rather than the way they are currently designed which is each text per tab is separated evenly with a blue bar underneath it representing that it is selected.
I am not sure where to start. how can I go about doing this?
Check out the PagerSlidingTabStrip
http://www.androidviews.net/2013/04/pager-sliding-tabstrip/
https://github.com/astuetz/PagerSlidingTabStrip
You can hook it up to your viewpager and customize your tabs in many different ways.
Hope it helps!
Firstly, I would like to mention that since i am not sure of the terminology of the view that i am looking for so I shall try and explain the behaviour.
I am looking for build a screen with multiple tabs where the tab indicators do not fit all inside the screen so it is scrollable. This is fine but i want that when the scrolling happens, after the last tab indicator, the tab widget automatically shows the first tab indicator right after it. So kind of like a circular tab widget.
Could someone please give pointers on how this could be achieved in android.
Thanks,
Sunny
I'm not sure, since you're not so clear...but i think you're looking for this:
https://github.com/astuetz/PagerSlidingTabStrip
Sliding tabs like the ones in Google Play.
I'm using a ViewPager to host multiple views, and I want something to visually show where the user is currently located. I don't want to use PagerTitleStrip or PagerTabStrip cause I don't want titles.
I want something similar to the horizontal line in the default launcher of the Nexus 4 shown in here:
When you swipe left or right, there is a slightly bigger rectangle that shows your position relative to the pages.
How can I do this?
PS: I can't use any library cause the code is going to be written in C# with Xamarin, also can't use any Xamarin component cause license won't let it have any more components.
Use the ViewPagerIndicator Library. This has an option for your desire.
ADDITION
I found this official Xamarin ViewPagerIndicator Library. Maybe this would help.
I'm using ActionBarSherlock in my application. I would like to use icons/images in the actionbar instead of the default tabs. But unfortunately the images/icons I used by using .setIcon(), I find that there is a lot of padding being applied before and after the image/icon on each tab, thus making it look ugly.
Current tabs image
Could any please guide as to what needs to be done for this?
Intended tabs image