How to open a new fragment in bottom navigation view

I am developing fitness android app in which i am using bottom navigation view there are three fragment like fragment:home , fragment:Discover , fragment:task, and profile in home fragment i has some button in home fragment i want to open it in new fragment but i doesn't know how to do that! please help me to solve this issue enter image description here

enter image description here

Please help me to solve this issue once i will completed the project i will upload it on github

> One way of doing this by FrameLayout and Bottom Navigation Bar.
>
>
> Create Fragment for each menu item.

//fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    tools:context=".HomeFragment">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Home Fragment" />

</FrameLayout>


//fragment_discover.xml

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    tools:context=".DiscoverFragment">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Discover Fragment" />

</FrameLayout>


//fragment_task.xml

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    tools:context=".TaskFragment">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Task Fragment" />

</FrameLayout>

> Main Activity

package com.example.harsh

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView


class MainActivity : AppCompatActivity() {

    lateinit var bottomNav : BottomNavigationView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        loadFragment(HomeFragment())
        bottomNav = findViewById(R.id.bottomNav) as BottomNavigationView
        bottomNav.setOnItemSelectedListener {
            when (it.itemId) {
                R.id.home -> {
                    loadFragment(HomeFragment())
                    true
                }
                R.id.discover -> {
                    loadFragment(DiscoverFragment())
                    true
                }
                R.id.task -> {
                    loadFragment(TaskFragment())
                    true
                }
            }
        }
    }
    private fun loadFragment(fragment: Fragment){
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.container,fragment)
        transaction.commit()
    }

}

> activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomNav"
        />


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/nav_menu"
        android:scrollIndicators="left"/>
</RelativeLayout>

> Nav Menu File nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/discover"
        android:icon="@drawable/ic_discover"
        android:title="Discover" />
    <item
        android:id="@+id/task"
        android:icon="@drawable/ic_task"
        android:title="Task" />
</menu>