I've looked at the samples and the only difference seems to be the name, but when I just switch all the names in my app to TabPageIndicator from TitlePageIndicator, the tabs are in a messed up alignment and the footer underline is gone.
Am I missing something? Is there something extra I need to do? I have
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter( getSupportFragmentManager() );
ViewPager pager =
(ViewPager)findViewById( R.id.viewpager );
TabPageIndicator indicator =
(TabPageIndicator)findViewById( R.id.indicator );
pager.setAdapter( adapter );
indicator.setViewPager( pager );
and
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp" >
<com.viewpagerindicator.TabPageIndicator
android:id="#+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</FrameLayout>
What are the differences between TabPageIndicator and TitlePageIndicator?
Try viewing that page and see if you find the answer.
I did, that's why I posted to begin with.
Title Indicator
Displays the title of the selected page in the center with the titles
of the adjacent pages (if available) in a more subtle style.
Tab Indicator
Similar to the title indicator but displays as many titles as possible
in scrolling and animated horizontal tabs.
TitlePagerIndicator example:
Adapter
class TestFragmentAdapter extends FragmentPagerAdapter {
protected static final String[] CONTENT = new String[] { "This", "Is", "A", "Test", };
private int mCount = CONTENT.length;
public TestFragmentAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return TestFragment.newInstance(CONTENT[position % CONTENT.length]);
}
#Override
public int getCount() {
return mCount;
}
public void setCount(int count) {
if (count > 0 && count <= 10) {
mCount = count;
notifyDataSetChanged();
}
}
}
When you use TitlePagerIndicator you need to implement TitleProvider in your Adapter.
class TestTitleFragmentAdapter extends TestFragmentAdapter implements TitleProvider {
public TestTitleFragmentAdapter(FragmentManager fm) {
super(fm);
}
#Override
public String getTitle(int position) {
return TestFragmentAdapter.CONTENT[position % CONTENT.length];
}
}
Putting it all together
TestFragmentAdapter mAdapter = new TestTitleFragmentAdapter(getSupportFragmentManager());
ViewPager mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
PageIndicator mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
TabPagerIndicator example:
public class SampleTabsDefault extends FragmentActivity {
private static final String[] CONTENT = new String[] { "Recent", "Artists", "Albums", "Songs", "Playlists", "Genres" };
TestFragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.simple_tabs);
mAdapter = new GoogleMusicAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mIndicator = (TabPageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}
class GoogleMusicAdapter extends TestFragmentAdapter implements TitleProvider {
public GoogleMusicAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return TestFragment.newInstance(SampleTabsDefault.CONTENT[position % SampleTabsDefault.CONTENT.length]);
}
#Override
public int getCount() {
return SampleTabsDefault.CONTENT.length;
}
#Override
public String getTitle(int position) {
return SampleTabsDefault.CONTENT[position % SampleTabsDefault.CONTENT.length].toUpperCase();
}
}
}
All of these examples and more can be found on Jake Wharton's Github repo for ViewPagerIndicator
Related
I'm creating an android application and I have an activity with a android.support.design.widget.TabLayout and a ViewPager in it .
here is my code
activity_main.xml
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="#+id/cards_grouping_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tabs" />
MainActivity.java
public class MainActivity extends AppCompatActivity {
#BindView(R.id.tabs)
TabLayout tabs;
#BindView(R.id.cards_grouping_pager)
ViewPager pager;
private ArrayList<Category> categories = new ArrayList<>();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_cards);
ButterKnife.bind(this);
categories = //getDataFromApi
doSomeWorks();
}
private void doSomeWorks() {
MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager(), categories);
pager.setAdapter(adapter);
tabs.setupWithViewPager(pager);
LinearLayout tabStrip = (LinearLayout) tabs.getChildAt(0);
for (int i = 0; i < tabStrip.getChildCount(); i++) {
final int finalI = i;
tabStrip.getChildAt(i).setOnLongClickListener(new View.OnLongClickListener() {
#Override
public boolean onLongClick(View v) {
//I SHOULD SHOW POPUP HERE
}
});
}
}
public class MyPagerAdapter extends FragmentPagerAdapter {
private final ArrayList<String> TITLES = new ArrayList<>();
MyPagerAdapter(FragmentManager fm, ArrayList<Category> categories) {
super(fm);
for (int i = 0; i < categories.size(); i++) {
TITLES.add(categories.get(i).name);
}
}
#Override
public CharSequence getPageTitle(int position) {
return TITLES.get(position);
}
#Override
public int getCount() {
return TITLES.size();
}
#Override
public Fragment getItem(int position) {
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
return HorizontalTabsAdapter.newInstance(position, categories, displayMetrics.widthPixels,
displayMetrics.heightPixels);
}
}
}
I want to when user long click on each tab a popup appear exactly in selected position .
like below picture
How can I do that?
(not enough credits to comment, so posting as answer)
To implement long press clicklistener on each tab of tablayout, follow these answers
https://stackoverflow.com/a/43522131/6387236
https://stackoverflow.com/a/34982710/6387236
For the implementation of Popup Window at the location of long press, follow this nice blog,
https://rajeshandroiddeveloper.blogspot.in/2013/07/android-popupwindow-example-in-listview.html
Hope this helps
I'm following a tutorial to get icons in a tab bar made by the ViewPagerIndicator library, but they don't show up. The titles appear, and the getIconsResId method gets called, but nevertheless the icons can't be seen.
This is the code I use for my PageAdapter class. It is almost an exact copy of the sample file in the library.
public class IconsPagerAdapter extends FragmentPagerAdapter implements IconPagerAdapter {
protected static final String[] CONTENT = new String[] { "This", "Is", "A", "Test", };
protected static final int[] ICONS = new int[] {
R.drawable.guest,
R.drawable.home,
R.drawable.group,
R.drawable.leaderboard
};
private int mCount = CONTENT.length;
public IconsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return ViewItemTabsActivity.PlaceholderFragment.newInstance(position+1);
}
#Override
public int getCount() {
return mCount;
}
#Override
public CharSequence getPageTitle(int position) {
System.out.println("Got called");
return IconsPagerAdapter.CONTENT[position % CONTENT.length];
}
#Override
public int getIconResId(int index) {
System.out.println("This one also got called");
return ICONS[index % ICONS.length];
}
public void setCount(int count) {
if (count > 0 && count <= 10) {
mCount = count;
notifyDataSetChanged();
}
}
}
This is the code I have written to create the adapter and the indicator:
mSectionsPagerAdapter = new IconsPagerAdapter(faActivity.getSupportFragmentManager());
mViewPager.setAdapter((PagerAdapter) mSectionsPagerAdapter);
TabPageIndicator titleIndicator = (TabPageIndicator)llLayout.findViewById(R.id.titles);
titleIndicator.setViewPager(mViewPager);
Any help would be much appreciated.
EDIT
Here is the XML for the llLayout variable. Note that it isn't actually a linear layout, but a ViewPager (I know that it isn't a brilliant name for the variable).
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/container"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context="com.groupproject.sharingapp.ViewItemTabsActivity">
<com.viewpagerindicator.TabPageIndicator
android:id="#+id/titles"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
</android.support.v4.view.ViewPager>
I'm following this example..
I'm having one issue, when I swipe on ViewPager respective fragment appear but when I swipe from from left to right or right to left and select previous Tab the Tab indicator appear on new selected Tab but respective fragment not appear on ViewPager.
Please help me, where I'm getting wrong?
It was bug in support lib 23.0.0 but it is solved in 23.0.1. First of all update your suppory library using SDK manager from the extras section.
and write the following line in app gradle file.
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'
for your reference
https://developer.android.com/topic/libraries/support-library/revisions.html
and read the Changes for Design Support library in Android Support Library, revision 23.0.1 section
This is what i use and works fine.
Adapter:
public class SCFragmentPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragments = new ArrayList<>();
private final List<String> mFragmentTitles = new ArrayList<>();
private Context mContext;
private FragmentManager mFragmentManager;
public SCFragmentPagerAdapter(FragmentManager fm, Context context) {
super(fm);
this.mFragmentManager = fm;
this.mContext = context;
}
#Override
public int getCount() {
return mFragments.size();
}
// Return the correct Fragment based on index
#Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
public void addFragment(Fragment fragment, String title) {
mFragments.add(fragment);
mFragmentTitles.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
// Return the tab title to SlidingTabLayout
return mFragmentTitles.get(position);
}
public Fragment getActiveFragment(ViewPager container, int position) {
String name = makeFragmentName(container.getId(), position);
return mFragmentManager.findFragmentByTag(name);
}
private static String makeFragmentName(int viewId, int index) {
return "android:switcher:" + viewId + ":" + index;
}
}
Activity:
public class SCWelcomeActivity extends AppCompatActivity implements
SCWelcomeFragment.OnFragmentInteractionListener,
SCSyncFragment.OnFragmentInteractionListener,
SCRegisterFragment.OnFragmentInteractionListener,
SCConfirmationFragment.OnFragmentInteractionListener {
private static final String TAG = SCWelcomeActivity.class.getSimpleName();
private ViewPager viewPager = null;
private TabLayout tabLayout = null;
private Toolbar toolbar = null;
private SCFragmentPagerAdapter adapter = null;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scwelcome);
// Layout manager that allows the user to flip through the pages
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
// Initialize the Sliding Tab Layout
tabLayout = (TabLayout) findViewById(R.id.tablayout);
// Connect the viewPager with the sliding tab layout
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
#Override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
}
#Override
public void onFragmentInteraction(Uri uri) {
}
private void setupViewPager(ViewPager viewPager) {
adapter = new SCFragmentPagerAdapter(getSupportFragmentManager(), SCWelcomeActivity.this);
adapter.addFragment(SCWelcomeFragment.newInstance(), getString(R.string.title_tab1));
adapter.addFragment(SCSyncFragment.newInstance(), getString(R.string.title_tab2));
adapter.addFragment(SCRegisterFragment.newInstance(), getString(R.string.title_tab3));
adapter.addFragment(SCConfirmationFragment.newInstance(), getString(R.string.title_tab4));
viewPager.setAdapter(adapter);
viewPager.setOffscreenPageLimit(4);
}
public interface OnFragmentInteractionListener {
// TODO: Update argument type and name
public void onFragmentInteraction(Uri uri);
}
}
Fragment Example :
public class SCWelcomeFragment extends Fragment {
private OnFragmentInteractionListener mListener;
public static SCWelcomeFragment newInstance() {
SCWelcomeFragment fragment = new SCWelcomeFragment();
return fragment;
}
public SCWelcomeFragment() {
super();
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_scwelcome, container, false);
}
#Override
public void onAttach(Activity activity) {
super.onAttach(activity);
try {
mListener = (OnFragmentInteractionListener) activity;
} catch (ClassCastException e) {
throw new ClassCastException(activity.toString()
+ " must implement OnFragmentInteractionListener");
}
}
#Override
public void onDetach() {
super.onDetach();
mListener = null;
}
public interface OnFragmentInteractionListener {
// TODO: Update argument type and name
public void onFragmentInteraction(Uri uri);
}
}
Layout:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="130dp"
android:fitsSystemWindows="true"
android:gravity="bottom"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:layout_gravity="center"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Please try to implement the adapter as i do. Pay close attention that in mine Adapter all instances are saved in the
private final List<Fragment> mFragments = new ArrayList<>();
In your case you are always returning a new instance. So that's why a set the setOffscreenPageLimit(4). to 4 so they are kept in memory as well.
In your activity, after find Views by Id, you should "config" your ViewPager and TabLayout. Some necessary features maybe: "addOnPageChangeListener" for ViewPager and "setOnTabSelectedListener" for your TabLayout like this:
public class MainActivity extends AppCompatActivity {
private final int numOfPages = 4; //viewpager has 4 pages
private final String[] pageTitle = {"Food", "Movie", "Shopping", "Travel"};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
for (int i = 0; i < numOfPages; i++) {
tabLayout.addTab(tabLayout.newTab().setText(pageTitle[i]));
}
//set gravity for tab bar
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
final PagerAdapter adapter = new PagerAdapter
(getSupportFragmentManager(), numOfPages);
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(onTabSelectedListener(viewPager));
}
private TabLayout.OnTabSelectedListener onTabSelectedListener(final ViewPager pager) {
return new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
pager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
};
}
I have a tutorial post about this and it works well! There is no error like yours.
Hope it help:
http://www.devexchanges.info/2015/08/android-material-design-viewpager-with.html
None of the above answers worked for me AS of end of 2016 the bug still exists in design support library 24+.
I was able to fix this issue by wrapping the tab layout inside a
co-ordinator layout
I have more shorter variant to fix this bug (android support design lib v.23.0.0):
...
//initialize views
mViewPager.setAdapter(pagerAdapter);
mTabLayout.setupWithViewPager(mViewPager);
mViewPager.clearOnPageChangeListeners();
mViewPager.addOnPageChangeListener(new WorkaroundTabLayoutOnPageChangeListener(mTabLayout));
...
And class WorkaroundTabLayoutOnPageChangeListener:
public class WorkaroundTabLayoutOnPageChangeListener extends TabLayout.TabLayoutOnPageChangeListener {
private final WeakReference<TabLayout> mTabLayoutRef;
public WorkaroundTabLayoutOnPageChangeListener(TabLayout tabLayout) {
super(tabLayout);
this.mTabLayoutRef = new WeakReference<>(tabLayout);
}
#Override
public void onPageSelected(int position) {
super.onPageSelected(position);
final TabLayout tabLayout = mTabLayoutRef.get();
if (tabLayout != null) {
final TabLayout.Tab tab = tabLayout.getTabAt(position);
if (tab != null) {
tab.select();
}
}
}
}
Are you using support library version 23.0.0. There was an issue https://code.google.com/p/android/issues/detail?id=183123 which looks similar to yours. If that is the case indeed, update your support library version to 23.0.1. This issue has been fixed.
I've created a tab and trying to put icons and text in my tab layout but it always display text only. I tried displaying icons only as well but i'm having problem regarding getResource().getDrawable() and tried putting Context as well for the getDrawable() but i'm still having problem.
Here is my code for my ViewPagerAdapter
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
CharSequence Titles[];
int NumbOfTabs;
Context mContext;
private int[] icons = {
R.drawable.abouttab,
R.drawable.programmetab,
R.drawable.speakerstab,
R.drawable.mapstab,
R.drawable.twittertab
};
public ViewPagerAdapter(FragmentManager fm,CharSequence mTitles[], int mNumbOfTabsumb, Context context) {
super(fm);
this.Titles = mTitles;
this.NumbOfTabs = mNumbOfTabsumb;
this.mContext = context;
}
#Override
public Fragment getItem(int position) {
if(position == 0)
{
Tab_About tab_about = new Tab_About();
return tab_about;
}
else if(position == 1)
{
Tab_one tab_one = new Tab_one();
return tab_one;
}else if(position == 2){
Tab_two tab_two = new Tab_two();
return tab_two;
}else if(position == 3){
Tab_three tab_three = new Tab_three();
return tab_three;
}else{
Tab_four tab_four = new Tab_four();
return tab_four;
}
}
#Override
public CharSequence getPageTitle(int position) {
return Titles[position];
}
// This method return the Number of tabs for the tabs Strip
#Override
public int getCount() {
return NumbOfTabs;
}
}
for the getPageTitle() function i also tried this code to display icons only but like i said above i'm having problem with getDrawable()
#Override
public CharSequence getPageTitle(int position) {
Drawable image = mContext.getResources().getDrawable(icons[position], null);
image.setBounds(0, 0, 48, 48);
SpannableString sb = new SpannableString(" ");
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}
In my MainActivity
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private ViewPager mPager;
private ViewPagerAdapter adapter;
private SlidingTabLayout mTabs;
private Context mContext;
CharSequence Titles[] = {"One", "Two", "Three", "Four", "Five"};
int Numboftabs = 5;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
getSupportActionBar().setElevation(0);
adapter = new ViewPagerAdapter(getSupportFragmentManager(), Titles, Numboftabs, mContext);
// Assigning ViewPager View and setting the adapter
mPager = (ViewPager) findViewById(R.id.pager);
mPager.setAdapter(adapter);
// Assigning the Sliding Tab Layout View
mTabs = (SlidingTabLayout) findViewById(R.id.tabs);
mTabs.setDistributeEvenly(true); // To make the Tabs Fixed set this true, This makes the tabs Space Evenly in Available width
// Setting Custom Color for the Scroll bar indicator of the Tab View
mTabs.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
#Override
public int getIndicatorColor(int position) {
return getResources().getColor(R.color.tabsIndicator);
}
});
mTabs.setSelectedIndicatorColors(getResources().getColor(R.color.tabsIndicator));
mTabs.setViewPager(mPager);
}
can anyone help me? thank you so much...
Create a custom layout like below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="#+id/tabIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="2dp" />
<TextView
android:id="#+id/tabText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="#FFFFFF" />
</LinearLayout>
Set custom layout to action bar tab
Tab tab = actionBar.newTab().setCustomView(R.layout.yourView)
Heu guys i am building an app and i have implemented scrollable tabs. i would like to make it google play style like when the viewpager is scrolling i want the tabpagerindicator to move with it. is this possible?? i have tried to use this example but i failed.
Make TabPagerIndicator Like Google Play
My code so far.
public class TabsActivity extends FragmentActivity implements
ActionBar.TabListener {
private ViewPager mViewPager;
private ActionBar actionBar;
#SuppressLint({ "NewApi" })
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabs);
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager
.setAdapter(new TabsPagerAdapter(getSupportFragmentManager()));
mViewPager
.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int arg0) {
actionBar.setSelectedNavigationItem(arg0);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
});
actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
ActionBar.Tab tab1 = actionBar.newTab();
ActionBar.Tab tab2 = actionBar.newTab();
tab1.setText(R.string.info);
tab1.setTabListener(this);
tab2.setText(R.string.graph);
tab2.setTabListener(this);
actionBar.addTab(tab1);
actionBar.addTab(tab2);
}
class TabsPagerAdapter extends FragmentPagerAdapter {
public TabsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int arg0) {
Fragment fragment = null;
if (arg0 == 0) {
fragment = new InfoFragment();
}
if (arg0 == 1) {
fragment = new GraphFragment();
}
return fragment;
}
#Override
public int getCount() {
return 2;
}
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
mViewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
}
I'm a little confuse by your words: "the tabs activity has 2 fragments inside which everyone of them extends FragmentActivity". They (the Fragments) should extends Fragment and not FragmentActivity..
The right way to have this library is to create (in your case) one FragmentActivity (extends FragmentActivity) and two Fragments (extends Fragment). Your FragmentActivity will have an FragmentPagerAdapter setting with your ViewPager and your PagerTabStrip to display the two Fragments.
All is explain on the GitHub page in Usage section:
Firstly, include the library as local library project:
Download the zip > Copy/paste the Library to your application (PagerSlidingTabStrip Library: you will need PagerSlidingTabStrip.java and also the res folder as everything in attrs file, the background_tab.xml drawable, etc. copy/paste it to yours).
Then, your layout with ViewPager will be:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myappname="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.mypackagename.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"
android:background="#drawable/background_tabs" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tabs"
tools:context=".TabsActivity" />
</RelativeLayout>
Finally, your FragmentActivity will be:
import com.mypackagename.PagerSlidingTabStrip;
public class TabsActivity extends FragmentActivity {
private ActionBar actionBar;
private ViewPager pager;
private PagerSlidingTabStrip tabs;
private MyPagerAdapter adapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabs);
// ActionBar settings
actionBar = getActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeButtonEnabled(true);
// ViewPager, Tab, Adapter init
tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
pager = (ViewPager) findViewById(R.id.pager);
adapter = new MyPagerAdapter(getSupportFragmentManager());
// Adapter settings
pager.setAdapter(adapter);
tabs.setViewPager(pager);
}
public class MyPagerAdapter extends FragmentPagerAdapter {
private final String[] tab_titles = { "InfoFragment", "GraphFragment" };
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public CharSequence getPageTitle(int position) {
return tab_titles[position];
}
#Override
public int getCount() {
return tab_titles.length;
}
#Override
public Fragment getItem(int position) {
Fragment fragment = null;
if (position == 0) {
fragment = new InfoFragment();
} else {
fragment = new GraphFragment();
}
return fragment;
}
}
}
You don't need to implements ActionBar.TabListener, to set NavigationMode to MODE_TABS and adding Tab dynamically with actionBar.addTab.
As you can read on the project page: compatible with the ViewPager from the Android Support Library, this is not related with the ActionBar but with the ViewPager. Your tabs are added in the Adapter..
Finally, you can customize your Tabs with xml attributes. These attributes are handled via your attrs file and all are visible in Customization section on home page:
<com.mypackagename.PagerSlidingTabStrip
myappname:pstsIndicatorColor="#FFFF0000"
myappname:pstsUnderlineColor="#FFFF0000"
myappname:pstsIndicatorHeight="2dp"
... />
Hope this helps.