ViewPager fragments' layout not displayed

Question

I have a child activity that uses CollapsingToolbarLayout and TabLayout. I need to use the ViewPager to display the tabs' fragments, however the fragments are not displayed at all, even though onCreateView event is called correctly.

If I replace the ViewPager element for a simple TextView it is displayed correctly.

Here is the code I'm using:

Activity

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ui.ComicBookActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:background="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="210dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp"
            android:fitsSystemWindows="true"
            android:id="@+id/collapsing_toolbar">

            <com.facebook.drawee.view.SimpleDraweeView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_collapseMode="parallax"
                android:id="@+id/imageViewProfile"
                android:scaleType="fitStart"
                fresco:placeholderImageScaleType="centerCrop"
                android:fitsSystemWindows="true"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="pin">


            </android.support.v7.widget.Toolbar>


        </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:scrollbars="horizontal"
            android:layout_below="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/tabColor"
            app:layout_scrollFlags="scroll|enterAlways"
            app:tabMode="scrollable"/>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_comic_book" />


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

content_comic_book.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:scrollbars="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <include layout="@layout/content_chapters" />

</android.support.v4.widget.NestedScrollView>

content_chapters.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".ui.ComicBookActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/light_background"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

And my Activity class:

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

// Configuring the toolbar as the actionbar
        setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        setupTabLayout(tabLayout);

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new AboutComicBookFragment(), getString(R.string.label_about));
        adapter.addFragment(new ComicBookChaptersFragment(), getString(R.string.label_chapters));
        viewPager.setAdapter(adapter);
    }

    private void setupTabLayout(TabLayout tabLayout) {
        tabLayout.setupWithViewPager(viewPager);
    }


    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

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

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }

What is wrong with my code?

Answer 1

From a quick look at your code it would seem to me that wrapping your ViewPager in a NestedScrollView and a RelativeLayout is unnecessary. You should be able to at least remove the NestedScrollView and possibly also the RelativeLayout by moving any necessary attributes to the ViewPager instead.

So here's what you could quickly try to verify:

• Replace your include reference to content_comic_book with content_chapters in your activity layout
• Remember to move the app:layout_behaviour attribute to the ViewPager

Answer 2

Make sure that your activity layout has the tab views and the view pager only! Then in the fragment class inflate the fragments own layout inside the fragments class. Handle all fragment stuff in the fragment class or its layout. Only time where you want to be doing fragment work is when transacting or replacing fragments in Java or initializing the pager adapter. With UI/UX stuff, try and do it as much in the XML files as possible. It gets to be a mess otherwise.

Do something like this for your viewpager adapter:

 @Override
public Fragment getItem(int i) {
    switch(i) {
        case 0: 
           //viewpager's page 1 (first tab)
           return new XFragment(); break; //fragment class
        case 1: 
           //viewpager's page 2 (second tab)
           return new YFragment(); break;
        defualt: return null; break;
    }
}

This assumes that all these fragements are wanted on app launch (or the first two like the default viewpager setting). My app uses what you see below. It does all the work on launch. All you have to do is define the adapter:

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

    @Override
    public Fragment getItem(int position) {
        // getItem is called to instantiate the fragment for the given page.
        switch (position) {
            case 0:
                return new WriteFragment();
            case 1:
                return new PreviewFragment();
            case 2:
                return new ListFragment();
            case 3:
                return new RhymeFragment();
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        // Show tab pages count.
        return TAB_PAGE_COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return getString(R.string.save_btn);
            case 1:
                return getString(R.string.preview_btn);
            case 2:
                return getString(R.string.find_btn);
            case 3:
                return getString(R.string.rhyme_btn);
        }
        return null;
    }