How to show different layouts in each Tab in a TabLayout using Fragments

Question

I have been trying to show different layouts in different tabs in the swipeable TabLayout using PagerTabStrip. Can anybody help?

I want to show one layout in first tab, second different layout in 2nd tab etc.

 public class MainActivity extends FragmentActivity {


// create object of FragmentPagerAdapter
SectionsPagerAdapter mSectionsPagerAdapter;

// viewpager to display pages
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 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);

}

/**
 * A FragmentPagerAdapter that returns a fragment corresponding to one of
 * the sections/tabs/pages.
 */
public class SectionsPagerAdapter extends FragmentPagerAdapter {

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

    @SuppressLint("NewApi")
    @Override
    public Fragment getItem(int position) {

        switch (position) {
        case 0: {
            //Show 1st Layout(Here I need HELP)

             //HELP HELP HELP

        }case 1:
        {
            //Show 2nd Layout(Here I need HELP)

             //HELP HELP HELP
        } 
        default:
        }
        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 5 total pages.
        return 6;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
        case 0:
            return "Section 1";
        case 1:
            return "Section 2";
        case 2:
            return "Section 3";
        case 3:
            return "Section 4";
        case 4:
            return "Section 5";
        case 5:
            return "Section 6";
        }
        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) {
        // Create a new TextView and set its text to the fragment's section
        // number argument value.
        TextView textView = new TextView(getActivity());
        textView.setGravity(Gravity.CENTER);
        textView.setTextSize(25);
        textView.setText(Integer.toString(getArguments().getInt(
                ARG_SECTION_NUMBER)));
        return textView;
    }
   }

 }

Answer 1

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

        switch (getArguments().getInt(ARG_SECTION_NUMBER))
        {
            case 1: {
                rootView = inflater.inflate(R.layout.fragment_bba, container, false);
                break;
            }
            case 2: {
                rootView = inflater.inflate(R.layout.fragment_bcom, container, false);
                break;
            }

            case 3: {
                rootView = inflater.inflate(R.layout.fragment_bca, container, false);
                break;
            }

        }
        return rootView;

Answer 2

Ok for the people who want to solve this problem using design patterns.
Find full working solution Here.

If u write the fragment based on if-else condition it may solve the problem

switch(fragmentId)
    {
    case 1:
    {
      fragment 1 related stuff
    }
    case 2:
    {
    fragment 2 related stuff
    }
    .......
    .......
    and so on

But the problem with this approach is if in future,

1) you decide to add more fragments

or

2) you decide to change some functionality of existing fragment

Then you will have to modify the existing code (inside if-else condition)
Not a preferred programming practice

Instead you can follow this approach

public abstract class BasicFragment extends Fragment {

public BasicFragment newInstance()
{
    Log.d("Rohit", "new Instance");
    Bundle args = new Bundle();
   // args.putInt(ARG_PAGE, page);
    BasicFragment fragment = provideYourFragment();
    fragment.setArguments(args);
    return fragment;

}

public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
}

public View onCreateView(LayoutInflater inflater,ViewGroup parent, Bundle savedInstanseState)
{
    View view = provideYourFragmentView(inflater,parent,savedInstanseState);
    return view;
}

public abstract BasicFragment provideYourFragment();

public abstract View provideYourFragmentView(LayoutInflater inflater,ViewGroup parent, Bundle savedInstanceState);
}

Your Fragment implementation

public class ImageFragment extends BasicFragment{
@Override
public BasicFragment provideYourFragment() {

    return new ImageFragment();
}

@Override
public View provideYourFragmentView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {

    View view = inflater.inflate(R.layout.image_fragment,parent,false);

    //Get your parent layout of fragment
    RelativeLayout layout = (RelativeLayout)view;

    //Now specific components here

    ImageView imageView = (ImageView)layout.findViewById(R.id.myImage);
    imageView.setImageResource(android.R.drawable.ic_media_play);

    return view;

}
}

Happy coding