Copies of RecyclerView appearing when switching fragments, overlapping (Android, Kotlin)

Question

I currently have a RecyclerView in my app that makes boxes with text from a room database. However, whenever I go to my entry creation fragment and back using a button, there seem to be overlapping copies of the same recyclerview. Does anyone know how I could solve this?

This is the code related my the back/fragment switch button:

private fun saveEntry() {
        if (EntryTitle.text.isNullOrEmpty()) {
            Toast.makeText(context, "Your title field is empty", Toast.LENGTH_SHORT).show()
        }
        if (EntrySubtitle.text.isNullOrEmpty()) {
            Toast.makeText(context, "Your subtitle field is empty", Toast.LENGTH_SHORT).show()
        }
        if (EntryText.text.isNullOrEmpty()) {
            Toast.makeText(context, "Your main content field is empty", Toast.LENGTH_SHORT).show()
        }

        launch {
            val journal = Journal()
            journal.title = EntryTitle.text.toString()
            journal.subTitle = EntrySubtitle.text.toString()
            journal.journalText = EntryText.text.toString()
            journal.dateTime = currentDate
            context?.let {
                JournalDatabase.getDatabase(it).JournalDao().insertJournal(journal)
                EntryTitle.setText("")
                EntrySubtitle.setText("")
                EntryText.setText("")
            }
        }
    }

    fun replaceFragment(fragment: Fragment, istransition: Boolean) {
        val fragmentTransition = requireActivity().supportFragmentManager.beginTransaction()

        if (istransition) {
            fragmentTransition.setCustomAnimations(android.R.anim.slide_out_right, android.R.anim.slide_in_left)
        }
        fragmentTransition.replace(R.id.nav_host_fragment, fragment).addToBackStack(fragment.javaClass.simpleName).commit()
    }

And this is my MainActivity:

package com.google.gradient.red

import android.os.Bundle
import android.view.Menu
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar
import androidx.drawerlayout.widget.DrawerLayout
import androidx.navigation.findNavController
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.navigateUp
import androidx.navigation.ui.setupActionBarWithNavController
import androidx.navigation.ui.setupWithNavController
import com.google.android.material.navigation.NavigationView

class MainActivity : AppCompatActivity() {

    private lateinit var appBarConfiguration: AppBarConfiguration

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)

        val drawerLayout: DrawerLayout = findViewById(R.id.drawer_layout)
        val navView: NavigationView = findViewById(R.id.nav_view)
        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.
        appBarConfiguration = AppBarConfiguration(setOf(R.id.nav_home, R.id.nav_settings, R.id.nav_about), drawerLayout)
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        // Inflate the menu; this adds items to the action bar if it is present.
        menuInflater.inflate(R.menu.main, menu)
        return true
    }

    override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.nav_host_fragment)
        return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
    }
}

I have read some other stackoverflow questions and resources online that say to set a background color (which covers up what's underneath), but this doesn't seem like the right solution to me and causes other issues in my app.

I'm not sure how I could solve my problem, so any help would be greatly appreciated!

Answer 1

The issue was fragment overlap, as Bogdan suggested. I ended up solving it by only using the navigation component for navigation in my app, instead of 2 different methods.