Android Tabbed Activity: Action Bar Tabs with ViewPager: different layout for each tab

Question

I have a total blackout, I am not familiar to work with fragments.

I created with the eclipse assistant a new Android project:

here a snippet of the created default class:

    /**
 * 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 PlaceholderFragment (defined as a static inner class
        // below).
        return PlaceholderFragment.newInstance(position + 1);
    }

    @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 placeholder fragment containing a simple view.
 */
public static class PlaceholderFragment extends Fragment {
    /**
     * The fragment argument representing the section number for this
     * fragment.
     */
    static int sec;
    private static final String ARG_SECTION_NUMBER = "section_number";

    /**
     * Returns a new instance of this fragment for the given section number.
     */
    public static PlaceholderFragment newInstance(int sectionNumber) {
        sec = sectionNumber;
        Log.i("ARG_SECTION_NUMBER"," "+sec);
        PlaceholderFragment fragment = new PlaceholderFragment();
        Bundle args = new Bundle();
        args.putInt(ARG_SECTION_NUMBER, sectionNumber);
        fragment.setArguments(args);
        return fragment;
    }

    public PlaceholderFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        int jjj = sec;

        Log.i("onCreateView"," "+sec);
        View rootView = inflater.inflate(R.layout.fragment_main, container,
                false);
        return rootView;
    }
}

the SectionsPagerAdapter is used as an adapter and is returning Fragments the 3 fragments are having all the same layout

fragment_main.xml

how can different layouts assigned to the 3 fragments?

the PlaceholderFragment contains a Bundle with the section_number:

args.putInt(ARG_SECTION_NUMBER, sectionNumber);

can I use this Info for determing wich layout to show in each fragment?

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

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

Answer 1

You need to make different classes for each page. A page extends from a Fragment. You can just load a different layout-xml for every fragment.

public class FirstFragment extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {


    View rootView = inflater.inflate(R.layout.<yourxmlhere>, container,
            false);
    return rootView;
}

}

You know have the fragment, but your adapter still needs to know which page (position) is which fragment. This is decided in the following function:

@Override
public Fragment getItem(int position) {
    switch (position){
    case 0:
    //page 1
    return new FirstFragment();
    break;

    case 1:
    //page 2
    return new SecondFragment();
    break;
    default:
    //this page does not exists
    return null;
}

Make sure you have set the correct amount of pages!

@Override
public int getCount() {
    //the amount of pages your adapter knows
    return <youramountofpages>;
}

This should get you up and running.

EDIT: You can just delete the whole placeholderfragment class. It is not needed anymore.