I've added the PagerSlidingTabStrip library to my project, following the guide but the strip under the tabs doesn't slide (I'm referring to have something like what you can see in the Google Play app). Here is my MainActivity:
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mCollectionPagerAdapter);
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(mViewPager);
mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);
}
});
for (int i = 0; i < mCollectionPagerAdapter.getCount(); i++) {
actionBar.addTab(actionBar.newTab()
.setText(mCollectionPagerAdapter.getPageTitle(i))
.setTabListener(this));
}
EDIT:
activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"/>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity" />
</RelativeLayout>
MainActivity:
public class MainActivity extends FragmentActivity implements
ActionBar.TabListener, android.app.ActionBar.TabListener {
CollectionPagerAdapter mCollectionPagerAdapter;
ViewPager mViewPager;
SharedPreferences mPrefs;
final String welcomeScreenShownPref = "welcomeScreenShown";
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
setProgressBarIndeterminateVisibility(true);
setProgressBarIndeterminateVisibility(false);
setContentView(R.layout.activity_main);
mCollectionPagerAdapter = new CollectionPagerAdapter(
getSupportFragmentManager());
final android.app.ActionBar actionBar = getActionBar();
assert actionBar != null;
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setHomeButtonEnabled(false);
actionBar.setIcon(R.drawable.ic_action_icon3);
actionBar.setTitle(R.string.app_name2);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mCollectionPagerAdapter);
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(mViewPager);
}
EDIT2 tabs_background.xml:
<item android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_example" />
<item android:state_focused="true" android:drawable="@drawable/tab_selected_focused_example"/>
<item android:drawable="@color/tab_color"/>
MainActivity:
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setHomeButtonEnabled(false);
actionBar.setIcon(R.drawable.ic_action_icon3);
actionBar.setTitle(R.string.app_name2);
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mCollectionPagerAdapter);
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(mViewPager);
tabs.setIndicatorColor(android.R.color.white);
activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"
app:pstsIndicatorColor="@android:color/white"
app:pstsUnderlineColor="@color/tab_color"
app:pstsDividerColor="@color/tab_color"
app:pstsTabBackground="@drawable/tabs_background"/>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_below="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity" />
</RelativeLayout>
If you want to use PagerSlidingTabStrip
you don't need to add tabs to the actionBar. Just cut your code to:
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mCollectionPagerAdapter);
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(mViewPager);
The library automatically adds tabs to the actionbar, gets tabs texts from this method:
@Override
public CharSequence getPageTitle(int position) {
return TITLES[position];
}
EDIT:
Add the android:layout_below
property to the ViewPager
and it should work:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"/>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_below="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity" />
</RelativeLayout>
EDIT2:
Firstly, create a selector
in your drawable folder, called tabs_background.xml
for tabs background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@color/your_pressed_red_color" />
<item android:state_focused="true" android:drawable="@color/your_focused_red_color"/>
<item android:drawable="@color/your_red_color"/>
</selector>
Then you can customize tabs, by setting properties, you can see it here, as for your customization:
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"
app:pstsIndicatorColor="@android:color/white"
app:pstsUnderlineColor="@color/your_red_color"
app:pstsDividerColor="@color/your_red_color"
app:pstsTabBackground="@drawable/tabs_background">
Don't forget to add this line to the parent RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
And finally, to set text color, do it programmatically:
tabs.setTextColor(android.R.color.white);