Android - ViewPager is not showing the fragments

I am using a tablayout inside a fragemnt, the TabLayout has two fragments: one is showing a calendar and the other is just a simple plain text, I can switch between tabs correctly with out triggering any error, the problem is the content (inner fragments) are not showing, they are just "not there"!

• I tried looking into other threads on StackoverFlow that has the same issue, but most of them they are facing problems with NPEs (Null pointer exceptions) errors, which is not my case.

• I tried using: getChildFragmentManager() and getFragmentManager() instead of getSupportFragmentManager()

• Please keep in mind that I am working with Nested fragments(fragments in a fragment)

• I am using the documentation of AndroidHive and I have used it before but with simple fragments not nested one, it works perfectly

• I tried using the Layout Inspector tool.

Q: What am I missing and what should I do to get it up and running?!

Here's my code so far:

XML: MainFragment

<LinearLayout
   android:orientation="vertical"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">
   <android.support.design.widget.TabLayout
       android:id="@+id/tabs"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabMode="fixed"
       app:tabGravity="fill"/>
       <android.support.v4.view.ViewPager
           android:id="@+id/viewpager"
           android:layout_height="match_parent"
           android:layout_width="match_parent"
           app:layout_behavior="@string/appbar_scrolling_view_behavior">
       </android.support.v4.view.ViewPager>
</LinearLayout>

XML: Calendar fragment

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:animateLayoutChanges="true"
    android:id="@+id/main_content"
    tools:context=".Tabs.CalendarTab">
    <com.github.sundeepk.compactcalendarview.CompactCalendarView
        android:visibility="visible"
        android:id="@+id/compact_calendar"
        android:layout_width="match_parent"
        android:paddingRight="6dp"
        android:paddingLeft="6dp"
        android:layout_height="250dp"
        app:compactCalendarTargetHeight="250dp"
        app:compactCalendarTextSize="12sp"
        app:compactCalendarBackgroundColor="@color/colorWhite"
        app:compactCalendarTextColor="@color/colorDarkGrey"
        app:compactCalendarCurrentDayBackgroundColor="@color/color13"
        app:compactCalendarMultiEventIndicatorColor="@color/textColor2"
        app:compactCalendarShouldSelectFirstDayOfMonthOnScroll="true"
        app:compactCalendarCurrentDayIndicatorStyle="fill_large_indicator"/>
</RelativeLayout>

XML List fragment

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".Tabs.FullListTab">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="You Are In Tab 2"
        android:id="@+id/textView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

MainFragment JAVA

private TabLayout tabLayout;
private ViewPager viewPager;

//onCreate Method:
viewPager = (ViewPager) view.findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) view.findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
/*** end onCreate() ***/

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
    adapter.addFragment(new CalendarTab(), "Calendar");
    adapter.addFragment(new FullListTab(), "List");
    viewPager.setAdapter(adapter);
}

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

from Android - ViewPager is not showing the fragments