I'm trying to implement 3 swapping tabs. I'm following some tutorials from YouTube. But my code's not running properly. I found many solutions, tried those solutions, did exactly same code but while running my project, it crushes. my codes below:
main java class
package io.github.hackimti.curiousity;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.app.FragmentTransaction;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
public class MainActivity extends FragmentActivity implements TabListener {
ActionBar actionBar;
ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager)findViewById(R.id.main_pager1);
viewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBar.addTab(actionBar.newTab().setText("Tab A").setTabListener(this));
actionBar.addTab(actionBar.newTab().setText("Tab B").setTabListener(this));
actionBar.addTab(actionBar.newTab().setText("Tab C").setTabListener(this));
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
}
}
class MyAdapter extends FragmentPagerAdapter{
public MyAdapter(android.support.v4.app.FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
Fragment fragment = null;
if(position == 0){
fragment = new FA();
}
if(position == 1){
fragment = new FB();
}
if(position == 2){
fragment = new FC();
}
return fragment;
}
#Override
public int getCount() {
return 3;
}
}
main xml file
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/main_pager1">
</android.support.v4.view.ViewPager>
I think the way you trying to achieve this is an old way.
For sliding pages with tabs do following.
Download or copy following two files on github and paste your project. this is same as on developers.google.com except setDistributeEvenly method.
https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/widget/SlidingTabLayout.java
https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/widget/SlidingTabStrip.java
activity_main.xml
<your.package.name.SlidingTabLayout
android:clickable="true"
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</your.package.name.SlidingTabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
MyAdapter.java (Here i used two pages only)
class MyPagerAdapter extends FragmentPagerAdapter
{
String[] title = {"All","Favourites"};
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
Fragment fragment=null;
if (position==0)
fragment= new All();
if (position==1)
fragment= new Favourites();
return fragment;
}
#Override
public int getCount() {
return 2;
}
#Override
public CharSequence getPageTitle(int position) {
return title[position];
}
}
tab_view.xml (view of tab only , if you want u can also use ImageView here)
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/tab_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text=""
android:padding="15dp"
android:textStyle="bold"
android:textSize="25dp"
/>
</FrameLayout>
MainActivity.java
private SlidingTabLayout tabLayout;
private ViewPager pager;
tabLayout= (SlidingTabLayout) findViewById(R.id.tabs);
pager = (ViewPager) findViewById(R.id.pager);
tabLayout.setCustomTabView(R.layout.tab_view,R.id.tab_title);
MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
pager.setAdapter(adapter);
tabLayout.setDistributeEvenly(true);
tabLayout.setViewPager(pager);
Above code is fine. but latest way to achive swiping tabs with pages is throug android support design library.
Related
I am trying to make a tab when swiped gives a padding between two fragment like this
I am making this with a support lib
compile 'com.astuetz:pagerslidingtabstrip:1.0.1'
My java code
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import com.astuetz.PagerSlidingTabStrip;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(new TestAdapter(getSupportFragmentManager()));
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(pager);
}
}
class TestAdapter extends FragmentPagerAdapter {
public TestAdapter (FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int i) {
Fragment fragment=null;
if (i==0){
fragment=new One();
}
if (i==1){
fragment=new Two();
}
if (i==2){
fragment=new Three();
}
return fragment;
}
#Override
public int getCount() {
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
String title = new String();
if (position==0){
return "tab1";
}
if (position==1){
return "tab2";
}
if (position==2){
return "tab3";
}
return title;
}
}
I tried to set the padding in viewpager but it is not working then I tried to set pstsTabPaddingLeftRight but it is also not working my xml code
LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"
app:pstsShouldExpand="true"
app:pstsTextAllCaps="true"
app:pstsScrollOffset="7dp"
app:pstsIndicatorColor="#color/dem"
app:pstsDividerPadding="10dp"
app:pstsTabPaddingLeftRight="40dp"
/>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pager">
</android.support.v4.view.ViewPager>
</LinearLayout>
is there any other way to set the padding between any two tabs
Since you are using ViewPager, the easiest way to achieve some space is to use setPageMargin() method of Viewpager, which in your case will be
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setPageMargin(200);
//200 is value in pixel
There is also a method setPageMarginDrawable() sets a drawable that will be used to fill the margin between pages (Android documentation).
i have tried several things to display the text in the tabs on "scroll tabs" in my activity but it never shows
any ideas what happened?
below is the code:
scrollabletabs.xml:
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/pager">
<android.support.v4.view.PagerTitleStrip
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:layout_gravity="top"
android:background="#color/material_deep_teal_500"
android:id="#+id/tabtitle"
style="#style/pagertitlestrip">
</android.support.v4.view.PagerTitleStrip>
</android.support.v4.view.ViewPager>
ScrolllableTabs.java:
package com.example.pc.learn_again;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
public class ScrollableTabs extends FragmentActivity {
//get the ViewPager//
ViewPager viewPager=null;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.scrollabletabs);
viewPager = (ViewPager) findViewById(R.id.pager);
//the connection between the ViewPager and the adapter is below//
FragmentManager fragmentManager = getSupportFragmentManager();
viewPager.setAdapter(new myadapter(fragmentManager));
}
}
class myadapter extends FragmentPagerAdapter
{
public myadapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
//as you see from the below this is how we tell the Viewpager which fragment (page) to be shown//
Fragment fragment=null;
if (position==0)
{
fragment = new ScrollableFragment1();
}
if (position==1)
{
fragment = new ScrollableFragment2();
}
if (position==2)
{
fragment = new ScrollableFragment3();
}
return fragment;
}
#Override
public int getCount() {
return 3;//this is the number of pages
}
//the below is for the titles//
#Override
public CharSequence getPageTitle(int position) {
if (position==0)
{
return "Login Screen";
}
if (position==1)
{
return " List View";
}
if (position==2)
{
return "Calculator";
}
return null;
}
}
let me point out that the fragments appear correctly and they work fine , but i do not know why the titles in the tabs do not show (is it possible that the method returns null?? and if yes....why??)
thx for the help guys :)
Use:
<android.support.v4.view.PagerTabStrip
android:id="#+id/strip"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:textColor="#fff"
android:background="#android:color/holo_blue_bright"></android.support.v4.view.PagerTabStrip>
instead of
<android.support.v4.view.PagerTitleStrip
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:layout_gravity="top"
android:background="#color/material_deep_teal_500"
android:id="#+id/tabtitle"
style="#style/pagertitlestrip">
The PageTabStrip worked for me.
I want to create a swipe application for this I am using ViewPager in Android. When I run the code below, it runs successfully and a blue colored Fragment is opened, but swipe is not working on this. Can you tell me why?
This is the my Activity:
package app.learn.com.learnapp;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import java.util.List;
import java.util.Vector;
import menulistFrag.blueColor;
import menulistFrag.greenColor;
import menulistFrag.redColor;
public class MenuActivityList1 extends FragmentActivity {
ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_menu_activity_list1);
viewPager = (ViewPager)findViewById(R.id.pager);
instantiateFrags();
}
public void instantiateFrags(){
List<Fragment> frags = new Vector<Fragment>();
frags.add(Fragment.instantiate(this, redColor.class.getName()));
frags.add(Fragment.instantiate(this, greenColor.class.getName()));
frags.add(Fragment.instantiate(this, blueColor.class.getName()));
PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(),frags);
viewPager.setAdapter(pagerAdapter);
viewPager.setCurrentItem(0);
}
}
This is my PagerAdapter:
package app.learn.com.learnapp;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
import menulistFrag.blueColor;
import menulistFrag.greenColor;
import menulistFrag.redColor;
/**
* Created by root on 13/9/15.
*/
public class PagerAdapter extends FragmentPagerAdapter {
List<Fragment> fragments;
public PagerAdapter(FragmentManager fm,List<Fragment> fragLists){
super(fm);
fragments =fragLists;
}
#Override
public Fragment getItem(int position) {
return fragments.get(position);
}
#Override
public int getCount() {
return 3;
}
}
I have three fragments:
redColor.java
greenColor.java
blueColor.java
And this is my layout file:
<LinearLayout 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"
android:orientation="vertical">
<android.support.v4.view.ViewPager 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"
android:id="#+id/pager">
</android.support.v4.view.ViewPager>
</LinearLayout>
Your instantiateFrags function is a bit strange - normally you should declare the fragments from within the PagerAdapter, and then instantiate the PagerAdapter itself from with the activity's onCreate method. Your code for the PagerAdapter could be something like the following:
public class PagerAdapter extends FragmentPagerAdapter {
int mNumOfTabs;
public PagerAdapter(FragmentManager fm, int NumOfTabs){
super(fm);
this.mNumOfTabs = NumOfTabs;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
blueColor tab1 = new blueColor();
return tab1;
case 1:
greenColor tab2 = new greenColor();
return tab2;
case 2:
redColor tab3 = new redColor();
return tab3;
default:
return null;
}
}
#Override
public int getCount() {
return mNumOfTabs;
}
}
And then in your onCreate method in the main activity initialise the PagerAdapter (I have used a TabLayout here):
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Blue"));
tabLayout.addTab(tabLayout.newTab().setText("Green"));
tabLayout.addTab(tabLayout.newTab().setText("Red"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
PagerAdapter adapter = new PagerAdapter(
getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(
new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
xml for the tab layout and pager:
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:theme="#style/YOUR_THEME_HERE"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tab_layout"/>
I have a problem I made it right but in my program swipping of tabs isnt working they are showing any pages.
Main Activity.java
public class MainActivity extends FragmentActivity implements TabListener {
ViewPager vp;
ActionBar actionbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vp=(ViewPager)findViewById(R.id.pager);
vp.setAdapter(new MyAdapter(getSupportFragmentManager()));
actionbar=getActionBar();
actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
ActionBar.Tab tab1=actionbar.newTab();
tab1.setText("MP3");
tab1.setTabListener(this);
ActionBar.Tab tab2=actionbar.newTab();
tab2.setText("MP4");
tab2.setTabListener(this);
actionbar.addTab(tab1);
actionbar.addTab(tab2);
}
#Override
public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
Log.d("Gul", "OntabReselected"+"postion"+arg0.getPosition()+"name"+arg0.getText());
}
#Override
public void onTabSelected(Tab arg0, FragmentTransaction arg1) {
Log.d("Gul", "onTabSelected"+"postion"+arg0.getPosition()+"name"+arg0.getText());
}
#Override
public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
Log.d("Gul", "onTabUnselected"+"postion"+arg0.getPosition()+"name"+arg0.getText());
}
}
class MyAdapter extends FragmentPagerAdapter{
public MyAdapter(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}
#Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
Fragment f=null;
if(arg0==0){
f=new Mp3list();
}
else{
f=new Mp4list();
}
return null;
}
#Override
public int getCount() {
// TODO Auto-generated method stub
return 2;
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
There is a problem I know but I couldn't find it and when I am clicking on tabs still they are not working? And mp3list and mp4list are two fragment classes.
Since Google introduce android support design library just do this:
Add the below dependencies to the gradle
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'
Modify the MainActivity as shown below:
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
if (viewPager != null) {
setupViewPager(viewPager);
}
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
// create an adapter
Adapter adapter = new Adapter(getSupportFragmentManager());
// add your fragments to the adapter
adapter.addFragment(new Mp3list() , "MP3");
adapter.addFragment(new Mp4list() , "MP4");
// set the adapter to the ViewPager
viewPager.setAdapter(adapter);
}
// adapter class
class Adapter extends FragmentPagerAdapter {
private final List<Fragment> mFragments = new ArrayList<>();
private final List<String> mFragmentTitles = new ArrayList<>();
public Adapter(FragmentManager fm) {
super(fm);
}
public void addFragment(Fragment fragment, String title) {
mFragments.add(fragment);
mFragmentTitles.add(title);
}
#Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
#Override
public int getCount() {
return mFragments.size();
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitles.get(position);
}
}
}
and finally change your activity_main.xml layout to this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:background="?attr/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
<!-- tabMode can be scrollable or fixedß -->
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
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.