Android - ViewPager is not showing the fragments

Question

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

Answer 1

adapter.addFragment(new CalendarTab(), "Calendar");
adapter.addFragment(new FullListTab(), "List");

...

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

Don't do this, EVER. It can lead to VERY cryptic bugs. You MUST return the new Fragment instance from inside getItem(), and not from elsewhere.

---

---

As for your actual question,

XML: MainFragment

<LinearLayout
   android:orientation="vertical"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

Change this to match_parent, match_parent.

Answer 2

I had a similar problem to this in the past. I solved it by nesting the TabLayout in the ViewPager, as seen in the documentation:

<LinearLayout
  android:orientation="vertical"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <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.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>
</LinearLayout>

Answer 3

I managed to solve this issue by using a third party library called SPager here's the Github link for full documentation. SPager does not use an adapter and it's easier and faster to implement.

HOWEVER I AM STILL LOOKING FOR A ANOTHER WAY WITHOUT USING A THIRD PARTY LIBRARY

This is what I practically did (as mentioned in their Github):

Implementation

implementation 'com.github.alfianyusufabdullah:spager:1.2.0'

in the XML layout file

<com.alfianyusufabdullah.SPager
   android:id="@+id/mPager"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

in my JAVA class

private SPager myViewPager;

//...

myViewPager = view.findViewById(R.id.mPager);

//...

myViewPager.initFragmentManager(getChildFragmentManager());
myViewPager.addPages("Inner fragment 1", new IFragOne());
myViewPager.addPages("Inner fragment 2", new IFragTwo());
myViewPager.build();

IF you are using a tabLayout you can bind it with SPager like so:

myViewPager.addTabLayout(tabLayout);

I should also mention that SPager is compatible with Kotlin

I decided to post, it might be useful to others, for my case this is a temporary fix until, someone answers this thread!