Different content within tabs

Question

I want to set up different content in every tab. I'm new to android. How can I change code so it would be easy to manage content of every tab?

that what I have:

The problem is that I have the same content at each tab.

Here's MainActivity:

public class MainActivity extends ActionBarActivity 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);

    // Here we load the xml layout we created above
    setContentView(R.layout.activity_main);

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

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

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

Rest of code is inner within MainActivity:

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

Class SectionPagerAdapter:

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 new PlaceholderFragment();
    }

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

PlaceholderFragment contains gridview:

public class PlaceholderFragment extends Fragment
{
    /**
     * The fragment argument representing the section number for this
     * fragment.
     */
    private static final String ARG_SECTION_NUMBER = "section_number";

    public PlaceholderFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);

        // Here we inflate the layout we created above
        GridView gridView = (GridView) rootView.findViewById(R.id.gridview);
        gridView.setAdapter(new MyAdapter(MainActivity.this.getApplicationContext()));

        return rootView;
    }
}

and MyAdapter where I added items to content:

private class MyAdapter extends BaseAdapter
{
    private List<Item> items = new ArrayList<Item>();
    private LayoutInflater inflater;

    public MyAdapter(Context context)
    {
        inflater = LayoutInflater.from(context);

        items.add(new Item("APO Supreme", R.drawable.snb_apo_supreme));
        items.add(new Item("Arbor Blacklist", R.drawable.snb_arbor_blacklist));
        items.add(new Item("Arbor Draft", R.drawable.snb_arbor_draft));
        items.add(new Item("Arbor Relapse", R.drawable.snb_arbor_relapse));
        items.add(new Item("Capita Defenders of Awesome", R.drawable.snb_capita_defenders_of_awesome));
        items.add(new Item("Capita Outsiders", R.drawable.snb_capita_outsiders));
        items.add(new Item("Capita Ultrafear", R.drawable.snb_capita_ultrafear));
        items.add(new Item("DC Focus", R.drawable.snb_dc_focus));
        items.add(new Item("DC Mega", R.drawable.snb_dc_mega));
        items.add(new Item("DC Tone", R.drawable.snb_dc_tone));
        items.add(new Item("ROME Agent", R.drawable.snb_rome_agent));
        items.add(new Item("ROME Agent Rocker", R.drawable.snb_rome_agent_rocker));
        items.add(new Item("ROME Hammerhead", R.drawable.snb_rome_hammerhead));

    }

    @Override
    public int getCount() {
        return items.size();
    }

    @Override
    public Object getItem(int i)
    {
        return items.get(i);
    }

    @Override
    public long getItemId(int i)
    {
        return items.get(i).picId;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup)
    {
        View v = view;
        ImageView picture;
        TextView name;

        if(v == null)
        {
            v = inflater.inflate(R.layout.gridview_item, viewGroup, false);
            v.setTag(R.id.picture, v.findViewById(R.id.picture));
            v.setTag(R.id.text, v.findViewById(R.id.text));
        }

        picture = (ImageView)v.getTag(R.id.picture);
        name = (TextView)v.getTag(R.id.text);

        Item item = (Item)getItem(i);

        picture.setImageResource(item.picId);
        name.setText(item.name);

        return v;
    }

    private class Item
    {
        final String name;
        final int picId;

        Item(String name, int drawableId)
        {
            this.name = name;
            this.picId = drawableId;
        }
    }
}

I know its quite messy and a lot of code so here's folder with project

P.S. I'm working in Android Studio

Thanks for help

Answer 1

I think your problem is

@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 new PlaceholderFragment();
    }

ViewPager must to return different fragments from each page item.

Create three fragments and use the same layout for each. Then put this fragments into ArrayList and return fragment that you need in getItem method depends of position number.

EDIT: Example:

private List<Fragment> mFragments = new Vector<Fragment>();

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_fragment_activity_layout);        
    mFragments.add(new FirstFragment());
    mFragments.add(new SecondFragment());
    ...
    ...
}

In your SectionsPagerAdapter use

    @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 mFragments.get(position);
    }

Then in FirstFragment and SecondFragment and other fragments use R.layout.activity_main

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle    savedInstanceState) {
    View v = inflater.inflate(R.layout.activity_main, container, false);
    GridView gridView = (GridView) v.findViewById(R.id.gridview);
    return v;
}

And now in onResume() method in every fragment use different custom content in adapter

public void onResume(){
   gridView.setAdapter(new MyAdapter(getActivity())); 
   }

You should use custom adapter for each gridView to show different information or you can pass to adapter different content. Read more about adapters and how to pass data content into it.