Android TabLayout not working in Fragment

Question

I use the code below to setup my TabLayout inside a Fragment. The problem is the tabs don't show at all and neither does the child Fragment. Instead I get a blank page. The same code works in the parent Activity, with a minor difference in line PostsFragment.ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager()); which instead is ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());. What am I doing wrong?

import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.google.android.material.tabs.TabLayout;
import com.google.firebase.quickstart.auth.R;
import com.google.firebase.quickstart.auth.social.Main_Chat_Activity;
import com.google.firebase.quickstart.auth.social.bottomnav.ui.dashboard.DashboardFragment;
import com.google.firebase.quickstart.auth.social.friends.ContactsFragment;
import com.google.firebase.quickstart.auth.social.messages.ChatFragment;
import com.google.firebase.quickstart.auth.social.profile.Profile_Fragment;

import org.jetbrains.annotations.NotNull;

import java.util.ArrayList;
import java.util.List;


public class PostsFragment extends Fragment {

    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private View curView;



    public PostsFragment() {
        // Required empty public constructor
    }


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

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

        mViewPager = curView.findViewById(R.id.postTabsViewPager);
        setupViewPager(mViewPager);
        mTabLayout = curView.findViewById(R.id.postsTabs);
        mTabLayout.setupWithViewPager(mViewPager);
        setupTabTexts();


        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_posts, container, false);
    }

    private void setupViewPager(ViewPager viewPager) {
        PostsFragment.ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
        adapter.addFrag(new FoundFragment(), "");
        adapter.addFrag(new FoundFragment(), "");
        adapter.addFrag(new FoundFragment(), "");
        viewPager.setAdapter(adapter);
    }


    private void setupTabTexts() {
        mTabLayout.getTabAt(0).setText("Tab 1");
        mTabLayout.getTabAt(1).setText("Tab 2");
        mTabLayout.getTabAt(2).setText("Tab 3");

    }

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

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

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

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

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


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

The fragment_posts.xml is;

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    tools:context=".social.posts.PostsFragment">





    <com.google.android.material.tabs.TabLayout
        android:id="@+id/postsTabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabSelectedTextColor="@color/black"
        app:tabInlineLabel="true"
        >
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/postTabsViewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/postsTabs"
        >

    </androidx.viewpager.widget.ViewPager>

</RelativeLayout>

Answer 1

When you are in a Fragment you should initialize and setup your ViewPager in onViewCreated() method instead in onCreateView().

Make the below changes:

1.In onCreateView() inflate only your layout like below:

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_posts, container, false);
  }

2.In onViewCreated() initialize and setup your Pager with TabLayout like below:

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
   super.onViewCreated(view, savedInstanceState);
   mViewPager = view.findViewById(R.id.postTabsViewPager);
   mTabLayout = view.findViewById(R.id.postsTabs);
   mTabLayout.setupWithViewPager(mViewPager);
   setupViewPager(mViewPager);
   setupTabTexts();
}