Как использовать навигацию с помощью TabLayout

Question

Я создаю вид ниже.Я пытаюсь использовать навигацию Jetpack.Я создал навигацию и поместил в нее все необходимые фрагменты.При нажатии на каждую вкладку, я должен загрузить соответствующий фрагмент.

Я создал четыре фрагмента для Дом , Друзья , Временная шкала и Профиль .И создал навигацию, как показано ниже

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools" android:id="@+id/home_navigation"
        app:startDestination="@id/homePosts">

<fragment android:id="@+id/homePosts" android:name="com.mydogoodapp.android.ui.fragments.HomePosts"
          android:label="home_posts_fragment" tools:layout="@layout/home_posts_fragment">
    <action android:id="@+id/action_to_myFriends" app:destination="@id/myFriends"/>
    <action android:id="@+id/action_to_timeline" app:destination="@id/timeline"/>
    <action android:id="@+id/action_to_userProfile" app:destination="@id/userProfile"/>
</fragment>
<fragment android:id="@+id/myFriends" android:name="com.mydogoodapp.android.ui.fragments.MyFriends"
          android:label="my_friends_fragment" tools:layout="@layout/my_friends_fragment">
    <action android:id="@+id/action_to_homePosts" app:destination="@id/homePosts"/>
    <action android:id="@+id/action_to_timeline" app:destination="@id/timeline"/>
    <action android:id="@+id/action_to_userProfile" app:destination="@id/userProfile"/>
</fragment>
<fragment android:id="@+id/timeline" android:name="com.mydogoodapp.android.ui.fragments.Timeline"
          android:label="timeline_fragment" tools:layout="@layout/timeline_fragment">
    <action android:id="@+id/action_to_homePosts" app:destination="@id/homePosts"/>
    <action android:id="@+id/action_to_myFriends" app:destination="@id/myFriends"/>
    <action android:id="@+id/action_to_userProfile" app:destination="@id/userProfile"/>
</fragment>
<fragment android:id="@+id/userProfile" android:name="com.mydogoodapp.android.ui.fragments.UserProfile"
          android:label="user_profile_fragment" tools:layout="@layout/user_profile_fragment">
    <action android:id="@+id/action_to_homePosts" app:destination="@id/homePosts"/>
    <action android:id="@+id/action_to_myFriends" app:destination="@id/myFriends"/>
    <action android:id="@+id/action_to_timeline" app:destination="@id/timeline"/>
</fragment>

Я создал XML действия, как показано ниже

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.activity.HomeContainer"
    android:background="#cccccc">
<fragment
        android:id="@+id/home_navigation"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="80dp"
        app:startDestination="@navigation/home_navigation"
        app:defaultNavHost="true"
        app:navGraph="@navigation/home_navigation"
        android:name="androidx.navigation.fragment.NavHostFragment"/>
<FrameLayout
        android:id="@+id/bottomNavigationContainer"
        android:layout_width="match_parent"
        android:layout_height="110dp"
        android:foregroundGravity="bottom"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="@android:color/transparent"
        android:translationZ="30dp">
    <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabNavigation"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_gravity="bottom"
            android:background="@drawable/navigation_tab_border"
            android:theme="@style/Theme.AppCompat.Light.DarkActionBar">
        <com.google.android.material.tabs.TabItem
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"/>
        <com.google.android.material.tabs.TabItem
                android:id="@+id/tab1"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"/>
        <com.google.android.material.tabs.TabItem
                android:layout_height="1dp"
                android:layout_width="1dp"
                android:clickable="false"
                android:visibility="invisible"/>
        <com.google.android.material.tabs.TabItem
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"/>
        <com.google.android.material.tabs.TabItem
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"/>
    </com.google.android.material.tabs.TabLayout>
    <LinearLayout android:layout_width="80dp"
          android:layout_height="match_parent"
          android:layout_gravity="center_horizontal"
          android:clickable="true">
    <ImageButton
            android:id="@+id/ibAddPost"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/add_comment"
            android:background="@android:color/transparent"
            android:scaleType="fitXY"/>
    </LinearLayout>
</FrameLayout>

Я хочу загрузить каждый фрагмент при нажатиина вкладках.