Add content to fixed swipe tabs in android

Question

I've used the Eclipse template to generate a swiping layout. I've extended the pages from 3 to 5 with switch/case. I've also put an imageview into the dummy fragment. Now I have 5 fragments with the same image. How do I manage the single instances, so that I can put different content into them?

public class MainActivity extends FragmentActivity implements
    ActionBar.TabListener {

SectionsPagerAdapter mSectionsPagerAdapter;

/**
 * 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);

    // Set up the action bar.
    final ActionBar actionBar = getActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

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

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

    // When swiping between different sections, select the corresponding
    // tab. We can also use ActionBar.Tab#select() to do this if we have
    // a reference to the Tab.
    mViewPager
            .setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    actionBar.setSelectedNavigationItem(position);
                }
            });

    // For each of the sections in the app, add a tab to the action bar.
    for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
        // Create a tab with text corresponding to the page title defined by
        // the adapter. Also specify this Activity object, which implements
        // the TabListener interface, as the callback (listener) for when
        // this tab is selected.
        actionBar.addTab(actionBar.newTab()
                .setText(mSectionsPagerAdapter.getPageTitle(i))
                .setTabListener(this));
    }
}

@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;
}

@Override
public void onTabSelected(ActionBar.Tab tab,
        FragmentTransaction fragmentTransaction) {
    // When the given tab is selected, switch to the corresponding page in
    // the ViewPager.
    mViewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(ActionBar.Tab tab,
        FragmentTransaction fragmentTransaction) {
}

@Override
public void onTabReselected(ActionBar.Tab tab,
        FragmentTransaction fragmentTransaction) {
}

/**
 * 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);
    }

    @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 = new DummySectionFragment();
        Bundle args = new Bundle();
        args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 1);
        fragment.setArguments(args);
        return fragment;
    }

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

    @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);
        case 3:
            return getString(R.string.title_section4).toUpperCase(l);
        case 4:
            return getString(R.string.title_section5).toUpperCase(l);
        }
        return null;
    }
}

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

    public DummySectionFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_main_dummy,
                container, false);
        TextView dummyTextView = (TextView) rootView
                .findViewById(R.id.section_label);
        dummyTextView.setText(Integer.toString(getArguments().getInt(
                ARG_SECTION_NUMBER)));
        return rootView;
    }
}

}

Answer 1

It depends on how different the data is going to be. If every fragment will only have an ImageView you could reuse the same fragment like what you are doing. You just need to check the position in your getItem method and send different data to that instance of the fragment through the bundle. Then inside your DummySectionFragment you can check the data you passed it, even if its just the position, and add a different image depending on the data/position.

If the content on each fragment is going to be different, then you should create a different fragment for each section. So instead of having just a DummySectionFragment you would have a different fragment per section and give each one a new layout depending on your needs.

Unless you will only use the position to modify the data in each fragment, your getItem should look like this:

@Override
public Fragment getItem(int position) {
    Fragment fragment = null;
    Bundle args = new Bundle();

    switch(position){
         case 0:
          fragment = new DummySectionFragment();
          args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 1);
          fragment.setArguments(args);
         break;
         case 1:
          fragment = new DummySectionFragment();
          args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 1);
          fragment.setArguments(args);
         break;
         case 2:
          fragment = new DummySectionFragment();
          args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 1);
          fragment.setArguments(args);
         break;
    }
    return fragment;
}

The only difference is that if you go with the second approach each case you will instantiate a different fragment and not the same one.

If you only want to change the image based on the position of the fragment you can keep your code the same and just check the position inside your DummySectionFragment like this:

 @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment_main_dummy,
            container, false);
    int position = Integer.toString(getArguments().getInt(
            ARG_SECTION_NUMBER))

    if(position == 1){
      //Your on the first tab..
    }
    return rootView;
}

Good Luck!