How to add bottom navigation listeners to fragments

Question

I used to have a single activity that included the navigation host and the BottomNavigationView that allowed switching views between the 3 fragments. I recently changed my design so that the initial activity now represents a single new fragment, and there exists a button that allows the user to navigate to another fragment which should hold the aforementioned 3 tabbed bottom navigation.

I've managed to implement the initial activity and the first fragment. But the issue that I am having is that when I navigate to the second fragment with the 3 tabbed bottom navigation bar, I don't know how to implement the onClickListener on the tabs. It used to be fairly straightforward when I had the bottom navigation inside the AppCompatActivity. I'm guessing that fragments are not supposed to be used for this case. I could easily use another activity class but I wanted to build a single activity application and wondered if there was another solution to this.

In the original method using an activity class, I was able to implement the bottom navigation like below:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)
        val navController = Navigation.findNavController(this, R.id.nav_host_fragment)

        setupBottomNavMenu(navController)
        setupActionBar(navController)
    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu_toolbar, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        val navController = Navigation.findNavController(this, R.id.nav_host_fragment)
        val navigated = NavigationUI.onNavDestinationSelected(item!!, navController)
        return navigated || super.onOptionsItemSelected(item)
    }

    override fun onSupportNavigateUp(): Boolean {
        return NavigationUI.navigateUp(Navigation.findNavController(this, R.id.nav_host_fragment), drawer_layout)
    }

    private fun setupBottomNavMenu(navController: NavController) {
        bottom_nav?.let {
            NavigationUI.setupWithNavController(it, navController)
        }
    }

    private fun setupActionBar(navController: NavController) {
        NavigationUI.setupActionBarWithNavController(this, navController, drawer_layout)
    }
}

The navigation looks like follows:

And finally the menu:

Similarly I tried to apply this on a fragment like below:


class MainFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater,
                              container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {

        var binding: FragmentMainBinding = DataBindingUtil.inflate(
                inflater,
                R.layout.fragment_main,
                container,
                false
        )

        val application = requireNotNull(this.activity).application
        val dataSource = UserProfileDatabase.getInstance(application).userProfileDao
        val viewModelFactory = MainViewModelFactory(dataSource, application)
        val navController = this.findNavController()
        NavigationUI.setupWithNavController(binding.bottomNav, navController)
        return binding.root
    }

    override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
        super.onCreateOptionsMenu(menu, inflater)
        inflater.inflate(R.menu.menu_toolbar, menu)
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        val navController = this.findNavController()
        val navigated = NavigationUI.onNavDestinationSelected(item, navController)
        return navigated || super.onOptionsItemSelected(item)
    }

    companion object {
        fun newInstance(): MainFragment = MainFragment()
    }
}

The xml is almost exactly the same as the one for activity.

I expected to invoke onOptionsItemSelected() when I clicked on the tab elements, but I wasn't able to do so. How can I implement the listeners on those tab elements so that I can navigate to the correct fragment destinations?

Ben Shmuel · Accepted Answer

Why don't you keep your first implementation for your BottomNavigationView which is good and combine it with your new implementation by using addOnDestinationChangedListener.

Your FirstFragment that hold the button will hide the BottomNavigationView and the SecondFragment with the 3 tabbed bottom navigation will show it.

For example :

navController.addOnDestinationChangedListener { _, destination, _ ->

 if(destination.id == R.id.first_fragment) {
    // your intro fragment will hide your bottomNavigationView
    bottomNavigationView.visibility = View.GONE
  } else if (destination.id == R.id.second_fragment){
   // your second fragment will show your bottomNavigationView
   bottomNavigationView.visibility = View.VISIBLE
 }
}

in that way you keep the control in your Activity instead of Fragment and by that interact better with your listeners and your NavController.

How to add bottom navigation listeners to fragments

Answers (2)

Related Questions