How do i put a tabbed layout in my bottom navigation view?

Question

Ive tried using view pager code below but code crashes. I essentially need a tabbed activity in 5 of the bottom navigation. Can you also tell me how i would use the tabbed layout code in the fragments. Thankyou

public class client_interface_start extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       setContentView(R.layout.client_interface_start);
        BottomNavigationView bottomNav = findViewById(R.id.client_bottom_navigation);
        bottomNav.setOnNavigationItemSelectedListener(navlistener1);

SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(this, getSupportFragmentManager());
ViewPager viewPager = findViewById(R.id.client_viewpager);
viewPager.setAdapter(sectionsPagerAdapter);
TabLayout tabs = findViewById(R.id.client_tablayout_listings);
tabs.setupWithViewPager(viewPager);SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(this, getSupportFragmentManager());
ViewPager viewPager = findViewById(R.id.client_viewpager);
viewPager.setAdapter(sectionsPagerAdapter);
TabLayout tabs = findViewById(R.id.client_tablayout_listings);
tabs.setupWithViewPager(viewPager);

        getSupportFragmentManager().beginTransaction().replace(R.id.fragment_containerclient,
                new fragment_client_listings()).commit();

        }


    private BottomNavigationView.OnNavigationItemSelectedListener navlistener1 =
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    Fragment selectedFragment = null;
                    switch (item.getItemId()) {

                        case R.id.nav_clientlistings:
                            selectedFragment = new fragment_client_listings();
                            break;

                        case R.id.nav_clientrequest:
                            selectedFragment = new fragment_client_request();
                            break;
                        case R.id.nav_clientorders:
                            selectedFragment = new fragment_client_orders();
                            break;
                     case R.id.nav_clientprofile:
                            selectedFragment = new fragment_client_profile();
                           break;
                        case R.id.nav_clientnotifications:
                            selectedFragment = new fragment_client_notifications();
                            break;
                    }
                    getSupportFragmentManager().beginTransaction().replace(R.id.fragment_containerclient,
                            selectedFragment).commit();
                    return true;
                }
            };

    }

Here is the XML File, I have 3 tabs in it, listings favorites and appointments. I want to be able to click through them all and show different layout fragments for each TabItem.

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

<com.google.android.material.appbar.AppBarLayout
  android:id="@+id/client_appbar_listings"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/client_tablayout_listings"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabItem
            android:id="@+id/client_listings_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Listings" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/client_favorites_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Favorites" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/client_appointments_tab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Appointments" />
    </com.google.android.material.tabs.TabLayout>

</com.google.android.material.appbar.AppBarLayout>


    <FrameLayout
        android:id="@+id/alerts_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/client_bottom_navigation"
        android:layout_marginTop="50dp" >

        <Button
            android:id="@+id/placement"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Placement profile " />

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/client_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/black"/>


    </FrameLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Client Listings"/>




</RelativeLayout>