Android Tablayout no tab titles after pairing with viewpager

Question

I am simply trying to pair up with TabLayout with a ViewPager. The pairing is almost working, however the Tabtexts are gone afterwards.

Layout:

            <android.support.design.widget.TabItem
                android:id="@+id/group_tab_orders"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:text="@string/orders"/>

            <android.support.design.widget.TabItem
                android:id="@+id/group_tab_members"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/members"/>

            <android.support.design.widget.TabItem
                android:id="@+id/group_tab_meals"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/meals"/>

        </android.support.design.widget.TabLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/group_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

Code:

tabLayout = (TabLayout) rootView.findViewById(R.id.group_tablayout);
    viewPager = (ViewPager) rootView.findViewById(R.id.group_viewpager);

    reference = FirebaseDatabase.getInstance().getReference("groups").child(getArguments().getString("key"));

    viewPager.setAdapter(new GroupContentAdapter(getFragmentManager(), reference));
    tabLayout.setupWithViewPager(viewPager);

I also realized, that removing by viewPager.setAdapter(new GroupContentAdapter(getFragmentManager(), reference));, the titles won't be modified, so here is the the code for the Adapter

GroupContentAdapter.java

public class GroupContentAdapter extends FragmentPagerAdapter {

public static int SIZE = 3;

private GroupContentFragment[] contents;
private DatabaseReference reference;


public class GroupContentAdapter extends FragmentPagerAdapter {

public static int SIZE = 3;

private GroupContentFragment[] contents;
private DatabaseReference reference;


public GroupContentAdapter(FragmentManager manager, DatabaseReference reference) {
    super(manager);
    this.reference = reference;
    contents = new GroupContentFragment[SIZE];
    contents[0] = GroupContentFragment.newInstance(reference.child(Utils.GROUPORDERS), ContentType.ORDERS);
    contents[1] = GroupContentFragment.newInstance(reference.child(Utils.GROUPMEMBERS), ContentType.MEMBERS);
    contents[2] = GroupContentFragment.newInstance(reference.child(Utils.GROUPMEALS), ContentType.MEALS);
}

@Override
public int getCount() {
    return SIZE;
}

@Override
public Fragment getItem(int position) {
    return contents[position];
}

}

Answer 1

Inside the adapter class add the following:

@Override
public CharSequence getPageTitle(int position) {
    if (position == 0)
        return "Text1";
    else
        return "Text2";
}

And Inside the MainActivity I have added the following inside onCreate:

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

    // Add a View Pager with its settings
    viewPager = (ViewPager) findViewById(R.id.pager);
    FragmentManager fragmentManager = getSupportFragmentManager();
    viewPager.setAdapter(new MyAdapter(fragmentManager));

    pageIndicatorView = (PageIndicatorView) findViewById(R.id.pageIndicatorView);
    pageIndicatorView.setViewPager(viewPager);

    // Add toolbar with its settings
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitle("Custom Title");
    setSupportActionBar(toolbar);

    // Add tabLayout and link it to the ViewPager.
    tabLayout = (TabLayout) findViewById(R.id.tablayout);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.getTabAt(0).setIcon(R.drawable.image1);
    tabLayout.getTabAt(1).setIcon(R.drawable.image2);
}

And this is how you would be adding the icons after they're gone with the text.

Wish this answer helps.

Answer 2

You need to override the getPageTitle() method of the FragmentPageAdapter. see here