This project is forked from Andreas Stuetz's PagerSlidingTabStrip project. What I've done is adding some smooth transition effects to the text and icon indicators in the tab bar. The current sliding strip in apps like Google Play Store looks well, but the texts in the tab bar are of the same color and don't respond to user's scroll gesture, which can be further improved.
You may want to focus on the tab bar area in the animation below.
The usage of this project is almost the same as the original PagerSlidingTabStrip project. Except that I'm not familiar with gradle, so if you are using eclipse or ADT as your building tool, just like me, you may need to download the code, import the project from library/ folder as a library project and use this project as library in your own project.
If gradle is your only building tool, you may refer to the sample project in the sample/ folder, which simply added the following code to the build script:
dependencies {
compile project(':library')
}
You may also need to download the source code first. Sorry for the inconvenience. I'm learning gradle recently, and will update the usage ASAP.
For your convenience, below is the usage from the original PagerSlidingTabStrip project:
For a working implementation of this project see the sample/ folder.
-
Include the library as local library project or add the dependency in your build.gradle.
dependencies { compile 'com.astuetz:pagerslidingtabstrip:1.0.1' }
-
Include the PagerSlidingTabStrip widget in your layout. This should usually be placed above the
ViewPagerit represents.<com.astuetz.PagerSlidingTabStrip android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="48dip" />
-
In your
onCreatemethod (oronCreateViewfor a fragment), bind the widget to theViewPager.// Initialize the ViewPager and set an adapter ViewPager pager = (ViewPager) findViewById(R.id.pager); pager.setAdapter(new TestAdapter(getSupportFragmentManager())); // Bind the tabs to the ViewPager PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs); tabs.setViewPager(pager); -
(Optional) If you use an
OnPageChangeListenerwith your view pager you should set it in the widget rather than on the pager directly.// continued from above tabs.setOnPageChangeListener(mPageChangeListener);
To not just look like another Play Store styled app, go and adjust these values to match your brand:
pstsIndicatorColorColor of the sliding indicatorpstsUnderlineColorColor of the full-width line on the bottom of the viewpstsDividerColorColor of the dividers between tabspstsIndicatorHeightHeight of the sliding indicatorpstsUnderlineHeightHeight of the full-width line on the bottom of the viewpstsDividerPaddingTop and bottom padding of the dividerspstsTabPaddingLeftRightLeft and right padding of each tabpstsScrollOffsetScroll offset of the selected tabpstsTabBackgroundBackground drawable of each tab, should be a StateListDrawablepstsShouldExpandIf set to true, each tab is given the same weight, default falsepstsTextAllCapsIf true, all tab titles will be upper case, default true
All attributes have their respective getters and setters to change them at runtime
- Andreas Stuetz - Author of PagerSlidingTabStrip
Copyright 2014 Sida Wang
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.