How to set up a tablayout with viewpager in a bottom navigation view fragment?

Question

I have a bottom Navigation view navigation view that contains 5 fragments, in one of those fragments I need to have a card slider (basically a view pager with a tab layout that slides between two cards back and forth) I have tried a lot of solutions but nothing worked, my most successful attempt is the app not crashing and the pager fragments are not showing.

Q: How to setup a view pager that has two tabs inside a fragment of a bottom Navigation View ?

This is my main fragment's XML and JAVA:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:calendarview="http://schemas.android.com/apk/res-auto"
    xmlns:weekview="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".Fragments.HealthRecordFragment">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="12dp"
        android:orientation="vertical">          
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">                
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <androidx.viewpager.widget.ViewPager
                    android:id="@+id/viewpager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <androidx.viewpager.widget.PagerTitleStrip
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom" />
                        <com.google.android.material.tabs.TabLayout
                            android:id="@+id/tabs"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="top" />
                   </androidx.viewpager.widget.ViewPager>
                </LinearLayout>              
        </LinearLayout>            
    </LinearLayout>
</FrameLayout>

.

private TabLayout tabLayout;
private ViewPager viewPager;
/*******/
viewPager = (ViewPager) view.findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) view.findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
/*******/
private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
    TabOne tabFirst = new TabFirst();
    TabTwo tabSecond = new TabSecond();
    adapter.addFragment(tabFirst, "tab title 1");
    adapter.addFragment(tabSecond, "tab title 2");
    viewPager.setAdapter(adapter);
}

This is my view pager's first tab (XML & JAVA):

<FrameLayout 
    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"
    tools:context=".Tabs.TabOne">

    <androidx.cardview.widget.CardView
        app:cardUseCompatPadding="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">         
        <TextView
            android:text="this is tab 1"              
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />          
    </androidx.cardview.widget.CardView>
</FrameLayout>

.

public class TabOne extends Fragment {
    public TabOne() {
        // Required empty public constructor
    }

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

        return view;
    }
}

This is my view pager's second tab (XML & JAVA):

<FrameLayout 
    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"
    tools:context=".Tabs.TabTwo">

    <androidx.cardview.widget.CardView
        app:cardUseCompatPadding="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">         
        <TextView
            android:text="this is tab 2"              
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />          
    </androidx.cardview.widget.CardView>
</FrameLayout>

.

public class TabTwo extends Fragment {
    public TabTwo() {
        // Required empty public constructor
    }

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

        return view;
    }
}