Fragments are stacking on top of each other

Question

In Android Studio, I started a new project with "BottomNavigationView" and now when I run the application in the emulator, the Home Fragment is there by default but then is never replaced when I switch to another fragment. Instead, the new fragments replace each other while still being on top of the first fragment. So if I had 3 fragments, fragment 1 stays stuck in the activity while fragment 1 (duplicate), fragment 2, and fragment 3 all replace each other on top of fragment 1 (original). I don't know how to get rid of the original fragment, or where it is even coming from. I'm new to Android development and learning Kotlin so I am struggling to find suggestions in Kotlin. Here is the code in my MainActivity:

package com.example.android.pointmax


import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import androidx.navigation.findNavController
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.setupActionBarWithNavController
import androidx.navigation.ui.setupWithNavController
import com.example.android.pointmax.ui.home.HomeFragment
import com.example.android.pointmax.ui.recommended.RecommendedFragment
import com.example.android.pointmax.ui.wallet.WalletFragment
import timber.log.Timber


class MainActivity : AppCompatActivity() {

    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_home-> {
                val fragment = HomeFragment.newInstance()
                replaceFragment(fragment)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_wallet -> {
                replaceFragment(WalletFragment())
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_recommended -> {
                replaceFragment(RecommendedFragment())
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Plant tree to enable Debugging with Timber
        Timber.plant(Timber.DebugTree())

        // Find the bottomNavigation bar
        val navView: BottomNavigationView = findViewById(R.id.nav_view)

        // Find the fragment that will host the different fragments
        val navController = findNavController(R.id.nav_host_fragment)

        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        val appBarConfiguration = AppBarConfiguration(setOf(
                R.id.navigation_home, R.id.navigation_wallet, R.id.navigation_recommended))
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)

        // Set click listeners to respond to bottom navigation selections
        navView.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)

    }

    private fun replaceFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction()
            .replace(R.id.nav_host_fragment,fragment)
            .commit()
    }
}

The MainActivity.xml is how it is created by default, with a constraintLayout, with a bottomNavigationView and nav_host_fragment nested underneath. I greatly appreciate any help. Thank you in advance.

Answer 1

The reason you are getting this weird navigation behavior is because you are trying two methods of navigation at the same time

1. Navigation component

2. Fragment Manager

While using Android Jetpack's Navigation component , you should create Navigation graphs and use them for navigating between fragments.

This link should help you learn more about the the Navigation graphs.

https://developer.android.com/guide/navigation/navigation-design-graph