How do I use FragmentPagerAdapter to have tabs with different content?

Question

I want to have different tabs, where you can swipe through like in the android market. Each tab should use one fragment and use one method for it.

This is my FragmentPagerAdapter class:

public class SectionsPagerAdapter extends FragmentPagerAdapter {

    public SectionsPagerAdapter(FragmentManager fm) {
        super(fm);  
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment =null;
        switch (position) {
            case 0:
                fragment = new ConnectionFragment();
                break;
            case 1:
                fragment = new DataFragment();
                break;              
            case 2:
                fragment = new GraphFragment();
                break;          }
        return fragment;    
    }
    @Override
    public int getCount() {
        // Show 3 total pages.
        return 3;
    }
}

And I have three classes for each fragment type/tab:

public static class ConnectionFragment extends Fragment {
    public static final String ARG_SECTION_NUMBER = "section_number";
    public String stringConnectionStatus = "Offline";
    public String stringWiflyIp = "0.0.0.0";

    public ConnectionFragment() {}

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View connectionView = inflater.inflate(R.layout.fragment_connection,
                container, false);
        TextView statusView = (TextView) connectionView.findViewById(R.id.status_label);
        statusView.setText("Connection status: " + stringConnectionStatus);
        TextView ipView = (TextView) connectionView.findViewById(R.id.ip_label);
        ipView.setText("WiFly IP: " + stringWiflyIp);
        /**TextView sectionBarView = (TextView) connectionView
                .findViewById(R.id.section_label);
        sectionBarView.setText("pups");"*/

        return connectionView;
    }
}

public static class DataFragment extends Fragment {

    public DataFragment() {}

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View dataView = inflater.inflate(R.layout.fragment_data,
                container, false);
        TextView sectionBarView = (TextView) dataView
                .findViewById(R.id.section_label);
        sectionBarView.setText("pups2");
        return dataView;
    }
}

public static class GraphFragment extends Fragment {

    public GraphFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_graph,
                container, false);
        TextView sectionBarView = (TextView) rootView
                .findViewById(R.id.section_label);
        sectionBarView.setText("pups3");
        return rootView;
    }
}

Each Fragment should be customizable, thats why I have three classes.

Nevertheless, the app crashes in the getItem method. Any ideas? Thank you!

Edit: The complete MainActivity.java:

import ...
public class MainActivity extends FragmentActivity {

    /**
     * The {@link android.support.v4.view.PagerAdapter} that will provide
     * fragments for each of the sections. We use a
     * {@link android.support.v4.app.FragmentPagerAdapter} derivative, which
     * will keep every loaded fragment in memory. If this becomes too memory
     * intensive, it may be best to switch to a
     * {@link android.support.v4.app.FragmentStatePagerAdapter}.
     */
    SectionsPagerAdapter mSectionsPagerAdapter;
    public List<String> fragments = new Vector<String>();

    /**
     * The {@link ViewPager} that will host the section contents.
     */
    ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Create the adapter that will return a fragment for each of the three
        // primary sections of the app.
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.pager); //pager
        mViewPager.setAdapter(mSectionsPagerAdapter);


    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
     * one of the sections/tabs/pages.
     */


    public class SectionsPagerAdapter extends FragmentPagerAdapter {


        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
            fragments.add(ConnectionFragment.class.getName());
            fragments.add(DataFragment.class.getName());
            fragments.add(GraphFragment.class.getName());
            //fragmentsA = "fragments";

        }

        @Override
        public Fragment getItem(int position) {
            // getItem is called to instantiate the fragment for the given page.
            // Return a DummySectionFragment (defined as a static inner class
            // below) with the page number as its lone argument.
            /*Fragment fragment =null;
            switch (position) {
                case 0:
                    fragment = new ConnectionFragment();
                    break;
                case 1:
                    fragment = new DataFragment();
                    break;              
                case 2:
                    fragment = new GraphFragment();
                    break;          }
            return fragment;*/
            return Fragment.instantiate(getBaseContext(), fragments.get(position));

        }
        @Override
        public int getCount() {
            // Show 3 total pages.
            return 3;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            Locale l = Locale.getDefault();
            switch (position) {
            case 0:
                return getString(R.string.title_section1).toUpperCase(l);
            case 1:
                return getString(R.string.title_section2).toUpperCase(l);
            case 2:
                return getString(R.string.title_section3).toUpperCase(l);
            }
            return null;
        }
    }


    /**
     * A dummy fragment representing a section of the app, but that simply
     * displays dummy text.
     */
    public static class ConnectionFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        public static final String ARG_SECTION_NUMBER = "section_number";
        public String stringConnectionStatus = "Offline";
        public String stringWiflyIp = "0.0.0.0";

        public ConnectionFragment() {}

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View connectionView = inflater.inflate(R.layout.fragment_connection,container, false);
            TextView statusView = (TextView) connectionView.findViewById(R.id.status_label);
            statusView.setText("Connection status: " + stringConnectionStatus);
            TextView ipView = (TextView) connectionView.findViewById(R.id.ip_label);
            ipView.setText("WiFly IP: " + stringWiflyIp);
            /**TextView sectionBarView = (TextView) connectionView
                    .findViewById(R.id.section_label);
            sectionBarView.setText("pups");"*/

            return connectionView;
        }
    }
    public static class DataFragment extends Fragment {

        public DataFragment() {}

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View dataView = inflater.inflate(R.layout.fragment_data,
                    container, false);
            //TextView sectionBarView = (TextView) dataView.findViewById(R.id.section_label);
            //sectionBarView.setText("pups2");
            return dataView;
        }
    }
    public static class GraphFragment extends Fragment {

        public GraphFragment() {}

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_graph,
                    container, false);
            //TextView sectionBarView = (TextView) rootView.findViewById(R.id.section_label);
            //sectionBarView.setText("pups3");
            return rootView;
        }
    }
}

Answer 1

Create the adapter:

class MyPagerAdapter extends FragmentPagerAdapter {
        public List<String> fragmentsA; 

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
            fragmentsA = fragments;
        }

        @Override
        public Fragment getItem(int position) {
            //return MyFragment.newInstance();
            return Fragment.instantiate(context, fragmentsA.get(position));

        }

        @Override
        public CharSequence getPageTitle(int position) {
            //return CONTENT[position % CONTENT.length].toUpperCase();
            return mEntries.get(position % CONTENT.length).toUpperCase();
        }

        @Override
        public int getCount() {
           // return CONTENT.length;
            return mEntries.size();
        }

        @Override
        public int getItemPosition(Object object) {
            return POSITION_NONE;
        }
    }

Each fragment belongs to different classes.

So you have to define a fragment list (These go to the main FragmentActivity) :

static MyPagerAdapter adapter;

and fill it with the fragments:

fragments.add(ConnectionFragment.class.getName());
fragments.add(DataFragment.class.getName());
fragments.add(Tab3.class.getName());
//..etc

Then you have to add the fragments to the adapter like this:

 pager = (ViewPager)findViewById(R.id.viewpager);
 adapter = new MyPagerAdapter(getSupportFragmentManager());
 pager.setAdapter(adapter);

The MyPagerAdaper will go through all the fragments contained by the fragments list, then it will instantiate each of them.

Answer 2

In your FragmentPagerAdapter#getItem method, do not create object of the Fragments. You need to return the Fragment in the following way -

return Fragment.instantiate(context, ConnectionFragment.class.getName());

This means that the method will look like this -

public class SectionsPagerAdapter extends FragmentPagerAdapter {

  public SectionsPagerAdapter(FragmentManager fm) {
    super(fm);  
  }

  @Override
  public Fragment getItem(int position) {
    Fragment fragment =null;
    switch (position) {
        case 0:
            fragment = Fragment.instantiate(context, ConnectionFragment.class.getName());
            break;
        case 1:
            fragment = Fragment.instantiate(context, DataFragment.class.getName());
            break;              
        case 2:
            fragment = Fragment.instantiate(context, GraphFragment.class.getName());
            break;          }
    return fragment;    
  }

  @Override
  public int getCount() {
    // Show 3 total pages.
    return 3;
  }
}