How to use TabLayout with Fragment and Navigation Drawer?

I'm trying to develop an application with a Navigation Drawer and Fragments, where each one represents a specific screen (Start, Events, Participations, Library & About), I initially thought of using an activity for each "theme", but after a research I found more feasible to use fragments as the screens, but specifically in the screen "Events" instead of just a Fragment, are three (Humanities Cycle, Colloquiums and Classes for Vestibular), and after a more long search I was able to put the three in a TabLayout within another Fragment, that is, three Fragments within a fourth. At first everything worked fine, but when trying to go to the "Events" screen the second time on, the contents of the screens begin to not load, as if the "Events" screen was overloaded.

MainActivity class code:

private FrameLayout frameLayout;
private DrawerLayout drawerLayout;
private ActionBarDrawerToggle toogle;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
    frameLayout = (FrameLayout) findViewById(R.id.frameLayout);

    NavigationView navigationView = findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);

    toogle = new ActionBarDrawerToggle(this, drawerLayout, R.string.open, R.string.close);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);

    drawerLayout.addDrawerListener(toogle);
    toogle.syncState();

    if(savedInstanceState == null)
    {
        getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, new HomeFragment()).commit();
        navigationView.setCheckedItem(R.id.home);

    }
}

@Override
public boolean onOptionsItemSelected(MenuItem item)
{
    if (toogle.onOptionsItemSelected(item))
    {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {

    if(menuItem.getItemId() == R.id.home)
    {

        getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, new HomeFragment()).commit();
    }
    else if (menuItem.getItemId() == R.id.eventos)
    {
                   getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, new EventsFragment()).commit();
    }

    else if (menuItem.getItemId() == R.id.participacao)
    {
        getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, new ParticipacoesFragment()).commit();
    }

    else if (menuItem.getItemId() == R.id.biblioteca)
    {

        getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, new BibliotecaFragment()).commit();
    }

    else if (menuItem.getItemId() == R.id.sobre)
    {

        getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, new AboutFragment()).commit();
    }
    drawerLayout.closeDrawer(GravityCompat.START);
    return true;
}

.XML from MainActivity:

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

<FrameLayout
    android:id="@+id/frameLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</FrameLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    app:headerLayout="@layout/header"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="@color/white"
    app:itemTextColor="@color/cinza"
    app:itemIconTint="@color/cinza"
    app:menu="@menu/drawermenu"
    android:layout_gravity="start">

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

Event Fragment Class:

private View view;
private TabLayout tabLayout;
private ViewPager viewPager;

@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {


        this.view =  inflater.inflate(R.layout.fragment_events, container, false);

        this.tabLayout = (TabLayout) view.findViewById(R.id.tabs);

        this.tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        this.viewPager = (ViewPager) view.findViewById(R.id.viewPager);

        this.viewPager.setAdapter(new PagerAdapter(getFragmentManager(), getResources().getStringArray(R.array.title_tab)));
        this.viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        this.tabLayout.setupWithViewPager(viewPager);
        this.tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        this.tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener()
        {
            @Override
            public void onTabSelected(TabLayout.Tab tab)
            {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab)
            {
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab)
            {
            }

        });

    return this.view;
}

In the .XML of the "Events" Fragment there is only one TabLayout and one ViewPager.

The classes of the three Fragments to be put in "Events" have a single method that is the same in all:

@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.ciclos_humanidade, container, false);
    return view;
}

The .XML of each has only one common textview, so I was able to identify this apparent overload. I'm new to Android and I'm not sure how to use the Fragments, I'll go through tutorials, forums, books & Etc. I really like programming and I like Android, but I have no idea how to solve this loading fault. It looks like it's like I've created the Fragments, tabLayout and ViewPager several times, but that's all I can figure out. Does anyone know how to fix this, so I always load the screens without this pseudo overhead?