Develop Reference

How does Navigation with BottomNavigation work? [duplicate]

I want to use the navigation and destination system in android so when a menu item in the bottom nav bar is clicked it goes to a fragment.
I created 3 empty fragments and followed this guide to tie the items to the fragments but when I click the menu items, nothing happens.
https://developer.android.com/guide/navigation/navigation-ui
I made sure that the item id from the menu has the same id as the fragment too.
how can I make this work?
Here is my Activity:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val navController = findNavController(R.id.nav_host_fragment)
bottom_navigation
.setupWithNavController(navController)
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
val navController = findNavController(R.id.nav_host_fragment)
return item.onNavDestinationSelected(navController) || super.onOptionsItemSelected(item)
}
}
This is the activity xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
android:id="#+id/coordinator"
tools:context=".MainActivity">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:itemIconTint="#color/colorPrimaryDark"
app:itemTextColor="#color/colorPrimaryDark"
app:menu="#menu/bottom_navigation_menu" />
And this is the bottom nav bar menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/fragment_home"
android:icon="#drawable/ic_home_24px"
android:title="Home" />
<item
android:id="#+id/nav_search"
android:icon="#drawable/ic_search_24px"
android:title="Search" />
<item
android:id="#+id/nav_profile"
android:icon="#drawable/ic_face_24px"
android:title="Profile" />
Navigation.xml code:
<?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/navigation"
app:startDestination="#id/homeFragment">
<fragment
android:id="#+id/homeFragment"
android:name="com.puntogris.herewego.home.HomeFragment"
android:label="fragment_home"
tools:layout="#layout/fragment_home" >
<action
android:id="#+id/action_homeFragment_to_profileFragment"
app:destination="#id/profileFragment" />
</fragment>
<fragment
android:id="#+id/profileFragment"
android:name="com.puntogris.herewego.profile.ProfileFragment"
android:label="fragment_profile"
tools:layout="#layout/fragment_profile" >
<action
android:id="#+id/action_profileFragment_to_searchFragment"
app:destination="#id/searchFragment" />
</fragment>
<fragment
android:id="#+id/searchFragment"
android:name="com.puntogris.herewego.search.SearchFragment"
android:label="fragment_search"
tools:layout="#layout/fragment_search" />

Your android:ids do not match.
Your menu XML uses android:id="#+id/fragment_home", but your navigation XML uses android:id="#+id/homeFragment".
These need to be the same name. For example, you could change your menu XML to be
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/homeFragment"
android:icon="#drawable/ic_home_24px"
android:title="Home" />
<item
android:id="#+id/searchFragment"
android:icon="#drawable/ic_search_24px"
android:title="Search" />
<item
android:id="#+id/profileFragment"
android:icon="#drawable/ic_face_24px"
android:title="Profile" />
</menu>

Android bottom navigation not changing destination

I was trying to implement a simple bottom navigation view using android's navigation, but I think I'm missing a step.
Here's what I did:
At first I created four fragments. These fragments contain only a text view.
Then I created a navigation graph. The code is as follows:
<?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/main_nav_graph"
app:startDestination="#id/homeFragment">
<fragment
android:id="#+id/homeFragment"
android:name="com.baba_abdullah.Project.fragment.HomeFragment"
android:label="fragment_home"
tools:layout="#layout/fragment_home" />
<fragment
android:id="#+id/addBooksFragment"
android:name="com.example.Project.fragment.AddBooksFragment"
android:label="fragment_add_books"
tools:layout="#layout/fragment_add_books" />
<fragment
android:id="#+id/chatFragment"
android:name="com.example.Project.fragment.ChatFragment"
android:label="fragment_chat"
tools:layout="#layout/fragment_chat" />
<fragment
android:id="#+id/profileFragment"
android:name="com.example.Project.fragment.ProfileFragment"
android:label="fragment_profile"
tools:layout="#layout/fragment_profile" />
</navigation>
Menu file:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/home_fragment"
android:icon="#drawable/ic_baseline_home_24"
android:title="#string/home_menu_title"/>
<item
android:id="#+id/add_book_fragment"
android:icon="#drawable/ic_baseline_add_circle_outline_24"
android:title="#string/add_book_menu_title"/>
<item
android:id="#+id/chat_fragment"
android:icon="#drawable/ic_baseline_chat_bubble_outline_24"
android:title="#string/chat_menu_title"/>
<item
android:id="#+id/profile_fragment"
android:icon="#drawable/ic_baseline_account_circle_24"
android:title="#string/profile_menu_title"/>
</menu>
Inside the layout file of MainActivity, I added a FragmentContainer that would serve as NavHostFragment and a BottomNavigationView in the following way:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/main_fragment_container"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#+id/bottom_nav_bar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/main_nav_graph" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/main_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
And in the MainActivity, I added the following lines to tie them up together:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
NavHostFragment navHostFragment = (NavHostFragment) getSupportFragmentManager().findFragmentById(R.id.main_fragment_container);
NavController navController = navHostFragment.getNavController();
BottomNavigationView bottomNav = findViewById(R.id.bottom_nav_bar);
NavigationUI.setupWithNavController(bottomNav, navController);
}
Now, when I click on other menu item, it doesn't get selected and the destination view isn't changed either.
You can check the screen recording of the bahaviour of the output app.
What am I missing here?

to connect bottom navigation id of fragments most be equal with menu id, here is how need to be your navigation graph
<?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/main_nav_graph"
app:startDestination="#id/home_fragment">
<fragment
android:id="#+id/home_fragment"
android:name="com.baba_abdullah.Project.fragment.HomeFragment"
android:label="fragment_home"
tools:layout="#layout/fragment_home" />
<fragment
android:id="#+id/add_book_fragment"
android:name="com.example.Project.fragment.AddBooksFragment"
android:label="fragment_add_books"
tools:layout="#layout/fragment_add_books" />
<fragment
android:id="#+id/chat_fragment"
android:name="com.example.Project.fragment.ChatFragment"
android:label="fragment_chat"
tools:layout="#layout/fragment_chat" />
<fragment
android:id="#+id/profile_fragment"
android:name="com.example.Project.fragment.ProfileFragment"
android:label="fragment_profile"
tools:layout="#layout/fragment_profile" />
</navigation>

In Menu file replace menu items id with fragment id's. e.g
<item
android:id="#+id/homeFragment"
android:icon="#drawable/ic_baseline_home_24"
android:title="#string/home_menu_title"/>

NavController in bottomNavigationView not showing the fragment associated with each menu Item

I have created my navigation and menu files in the res directory for a bottom navigation view using navigation UI.
I have also set my navigation host fragment within the activity main xml file and the nav controller for my bottom navigation view within the main activity class.
There are three navigation graphs and one main navigation file including the three graphs with the include tag which is referenced in the navigation host fragment in the nav graph property.
I tried switching the background color for each one of the fragments to check if the bottom navigation view is working but all fragments remain white.
Here is my code
Navigation files
First graph
<?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/nav_graph_home"
app:startDestination="#id/home_dest">
<fragment
android:id="#+id/home_dest"
android:name="io.keepcoding.mvvmarchitecture.ui.HomeFragment"
android:label="RecommendedTrips"
tools:layout="#layout/fragment_home">
<action
android:id="#+id/action_home_to_activities_and_points_of_interest"
app:destination="#+id/activities_and_points_of_interest_dest"
app:enterAnim="#anim/nav_default_enter_anim"
app:exitAnim="#anim/nav_default_exit_anim"
app:popEnterAnim="#anim/nav_default_exit_anim"
app:popExitAnim="#anim/nav_default_enter_anim"
/>
<action
android:id="#+id/action_home_to_cities"
app:destination="#+id/cities_dest"
app:enterAnim="#anim/nav_default_enter_anim"
app:exitAnim="#anim/nav_default_exit_anim"
app:popEnterAnim="#anim/nav_default_exit_anim"
app:popExitAnim="#anim/nav_default_enter_anim"
/>
</fragment>
<fragment
android:id="#+id/activities_and_points_of_interest_dest"
android:name="io.keepcoding.mvvmarchitecture.ui.ActivitiesAndPointsOfInterestFragment"
android:label="Activities and points of interest"
tools:layout="#layout/fragment_activities_and_points_of_interest"
>
<action
android:id="#+id/action_activities_and_points_of_interest_to_activities_detail"
app:destination="#+id/activity_detail_dest"
app:enterAnim="#anim/nav_default_enter_anim"
app:exitAnim="#anim/nav_default_exit_anim"
app:popEnterAnim="#anim/nav_default_exit_anim"
app:popExitAnim="#anim/nav_default_enter_anim"
/>
<action
android:id="#+id/action_activities_and_points_of_interest_to_point_of_interest_detail"
app:destination="#+id/point_of_interest_detail_dest"
app:enterAnim="#anim/nav_default_enter_anim"
app:exitAnim="#anim/nav_default_exit_anim"
app:popEnterAnim="#anim/nav_default_exit_anim"
app:popExitAnim="#anim/nav_default_enter_anim"
/>
</fragment>
<fragment
android:id="#+id/cities_dest"
android:name="io.keepcoding.mvvmarchitecture.ui.CitiesFragment"
android:label="Cities"
tools:layout="#layout/fragment_cities"
>
<action
android:id="#+id/cities_to_action_activities_and_points_of_interest"
app:destination="#+id/activities_and_points_of_interest_dest"
app:enterAnim="#anim/nav_default_enter_anim"
app:exitAnim="#anim/nav_default_exit_anim"
app:popEnterAnim="#anim/nav_default_exit_anim"
app:popExitAnim="#anim/nav_default_enter_anim"
/>
</fragment>
<fragment
android:id="#+id/activity_detail_dest"
android:name="io.keepcoding.mvvmarchitecture.ui.ActivityDetailFragment"
android:label="Activity"
tools:layout="#layout/fragment_activity_detail"
>
</fragment>
<fragment
android:id="#+id/point_of_interest_detail_dest"
android:name="io.keepcoding.mvvmarchitecture.ui.PointOfInterestDetailFragment"
android:label="Point of interest"
tools:layout="#layout/fragment_local_point_of_interest_detail"
>
</fragment>
</navigation>
Second graph
<?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/nav_graph_my_trips"
app:startDestination="#id/my_trips_dest">
<fragment
android:id="#+id/my_trips_dest"
android:name="io.keepcoding.mvvmarchitecture.ui.MyTripsFragment"
android:label="My trips"
tools:layout="#layout/fragment_my_trips"
>
<action
android:id="#+id/action_my_trips_to_local_activities_and_points_of_interest"
app:destination="#+id/local_activities_and_points_of_interest_dest"
app:enterAnim="#anim/nav_default_enter_anim"
app:exitAnim="#anim/nav_default_exit_anim"
app:popEnterAnim="#anim/nav_default_exit_anim"
app:popExitAnim="#anim/nav_default_enter_anim"
/>
</fragment>
<fragment
android:id="#+id/local_activities_and_points_of_interest_dest"
android:name="io.keepcoding.mvvmarchitecture.ui.LocalActivitiesAndPointsOfInterestFragment"
android:label="My activities and points of interest"
tools:layout="#layout/fragment_local_activities_and_points_of_interest"
>
<action
android:id="#+id/local_activities_and_points_of_interest_to_local_activity_detail"
app:destination="#+id/local_activity_detail_dest"
app:enterAnim="#anim/nav_default_enter_anim"
app:exitAnim="#anim/nav_default_exit_anim"
app:popEnterAnim="#anim/nav_default_exit_anim"
app:popExitAnim="#anim/nav_default_enter_anim"
/>
<action
android:id="#+id/local_activities_and_points_of_interest_to_local_point_of_interest_detail"
app:destination="#+id/local_point_of_interest_detail_dest"
app:enterAnim="#anim/nav_default_enter_anim"
app:exitAnim="#anim/nav_default_exit_anim"
app:popEnterAnim="#anim/nav_default_exit_anim"
app:popExitAnim="#anim/nav_default_enter_anim"
/>
</fragment>
<fragment
android:id="#+id/local_activity_detail_dest"
android:name="io.keepcoding.mvvmarchitecture.ui.LocalActivityDetailFragment"
android:label="Activity title"
tools:layout="#layout/fragment_local_activity_detail"
>
</fragment>
<fragment
android:id="#+id/local_point_of_interest_detail_dest"
android:name="io.keepcoding.mvvmarchitecture.ui.LocalActivityDetailFragment"
android:label="Activity title"
tools:layout="#layout/fragment_local_activity_detail"
>
</fragment>
</navigation>
Third graph
<?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:tool="http://schemas.android.com/tools"
android:id="#+id/nav_graph_settings"
app:startDestination="#id/settings_dest">
<fragment
android:id="#+id/settings_dest"
android:name="io.keepcoding.mvvmarchitecture.ui.SettingsFragment"
android:label="Settings"
tool:layout="#layout/fragment_settings"
>
</fragment>
</navigation>
Menu file for bottom navigation view
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/nav_graph_home"
android:icon="#drawable/ic_home"
android:title="Main" />
<item
android:title="My trips"
android:id="#+id/nav_graph_my_trips"
android:icon="#drawable/ic_my_trips" />
<item
android:title="Settings"
android:id="#+id/nav_graph_settings"
android:icon="#drawable/ic_settings"
/>
</menu>
Main graph file with include tags
<?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"
android:id="#+id/nav_graph"
app:startDestination="#+id/nav_graph_home"
>
<include app:graph="#navigation/nav_graph_home"/>
<include app:graph="#navigation/nav_graph_my_trips"/>
<include app:graph="#navigation/nav_graph_settings"/>
</navigation>
Activity main xml file
<?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=".ui.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.MVVMArchitecture.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/Theme.MVVMArchitecture.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/navHostContainer"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_marginTop="130dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="#id/bottomNavigation"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph"
/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:menu="#menu/tab_bar_menu" />
</RelativeLayout>
Activity main kotlin file
package io.keepcoding.mvvmarchitecture.ui
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import android.view.Menu
import android.view.MenuItem
import androidx.fragment.app.Fragment
import androidx.navigation.fragment.NavHostFragment
import androidx.navigation.ui.setupWithNavController
import io.keepcoding.mvvmarchitecture.R
import kotlinx.android.synthetic.main.activity_main.*
#Suppress("CAST_NEVER_SUCCEEDS")
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar)
val navHostFragment = supportFragmentManager.findFragmentById(R.id.navHostContainer) as NavHostFragment // We suppress cast never succeeds so the compiler does not complain
val navController = navHostFragment.navController
bottomNavigation.setupWithNavController(navController)
}
private fun loadFragment(fragment: Fragment){
supportFragmentManager.beginTransaction()
.replace(R.id.navHostContainer, fragment)
.commit()
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
// Inflate the menu; this adds items to the action bar if it is present.
menuInflater.inflate(R.menu.menu_main, menu)
return true
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
return when (item.itemId) {
R.id.action_settings -> true
else -> super.onOptionsItemSelected(item)
}
}
}

Clicking on the First Item on BottomTabBar Navigation Does Not Work on Android

I am using Android Jetpack with Kotlin to create this BottomBarNavigation UI using NavigationHostFragment, Navgraph and NavController.
I have 3 tabs and everything works as expected except when I try to click on the first tab, it does not do anything.
Got stuck for a few days. Can't find the issue. Any ideas?
bottom_tabbar_nav_graph.xml
<?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"
android:id="#+id/bottom_tabbar_nav_graph"
app:startDestination="#id/transactionFragment">
<fragment
android:id="#+id/transactionFragment"
android:name="com.example.project_budget_planner.main.transaction.TransactionFragment"
android:label="fragment_transaction" />
<fragment
android:id="#+id/statisticsFragment"
android:name="com.example.project_budget_planner.main.statistics.StatisticsFragment"
android:label="fragment_statistics" />
<fragment
android:id="#+id/settingsFragment"
android:name="com.example.project_budget_planner.main.settings.SettingsFragment"
android:label="fragment_settings" />
</navigation>
bottom_tabbar_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/trasactionFragment"
android:icon="#drawable/common_google_signin_btn_icon_dark"
android:orderInCategory="1"
app:showAsAction="always"
android:title="Transaction" />
<item
android:id="#+id/statisticsFragment"
android:icon="#drawable/common_google_signin_btn_icon_dark"
android:orderInCategory="2"
app:showAsAction="always"
android:title="Statistics" />
<item
android:id="#+id/settingsFragment"
android:icon="#drawable/common_google_signin_btn_icon_dark"
android:orderInCategory="3"
app:showAsAction="always"
android:title="Settings" />
</menu>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".main.MainActivity">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#id/bottom_navbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/bottom_tabbar_nav_graph" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ccc"
app:itemIconTint="#472B78"
app:itemTextColor="#472C67"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_tabbar_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.kt
private fun setupNavigation() {
val bottomNavigationView: BottomNavigationView = findViewById(R.id.bottom_navbar)
val navHostFragment: NavHostFragment =
supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
NavigationUI.setupWithNavController(bottomNavigationView, navHostFragment.navController)
}

You misspelled the ID on your menu item: android:id="#+id/trasactionFragment". It should be android:id="#+id/transactionFragment" (note the n).

Bottom navigation doesn't show fragments in android jet pack navigation graph

I have this app with two activities,one is the host for login,signup and ... fragments and if the user signs up it goes to another activity which holds a bottom navigation and 5 fragments to switch.The problem is that the first activity works fine but when I lunch the second activity,The bottom navigation shows up and works but the contents of fragments doesn't show up!
here is my nav graph:
<?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/main_nav_graph"
app:startDestination="#id/homeFragment">
<fragment
android:id="#+id/homeFragment"
android:name="com.prototype.nyx.HomeFragment"
android:label="fragment_home"
tools:layout="#layout/fragment_home" >
<action
android:id="#+id/action_homeFragment_to_walletFragment"
app:destination="#id/walletFragment" />
</fragment>
<fragment
android:id="#+id/walletFragment"
android:name="com.prototype.nyx.WalletFragment"
android:label="fragment_wallet"
tools:layout="#layout/fragment_wallet" >
<action
android:id="#+id/action_walletFragment_to_addProductFragment"
app:destination="#id/addProductFragment" />
</fragment>
<fragment
android:id="#+id/addProductFragment"
android:name="com.prototype.nyx.AddProductFragment"
android:label="fragment_add_product"
tools:layout="#layout/fragment_add_product" >
<action
android:id="#+id/action_addProductFragment_to_settingsFragment"
app:destination="#id/settingsFragment" />
</fragment>
<fragment
android:id="#+id/settingsFragment"
android:name="com.prototype.nyx.SettingsFragment"
android:label="fragment_settings"
tools:layout="#layout/fragment_settings" >
<action
android:id="#+id/action_settingsFragment_to_profileFragment"
app:destination="#id/profileFragment" />
</fragment>
<fragment
android:id="#+id/profileFragment"
android:name="com.prototype.nyx.ProfileFragment"
android:label="fragment_profile"
tools:layout="#layout/fragment_profile" />
</navigation>
and here is my main activity and its layout:
package com.prototype.nyx;
import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.fragment.NavHostFragment;
import androidx.navigation.ui.NavigationUI;
import android.os.Bundle;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx;
public class MainActivity extends AppCompatActivity {
private BottomNavigationView bottomNavigationView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setUpNavigation();
}
public void setUpNavigation() {
bottomNavigationView = findViewById(R.id.bottom_nav);
NavHostFragment navHostFragment = (NavHostFragment) getSupportFragmentManager()
.findFragmentById(R.id.main_nav_host_fragment);
System.out.println("number of fragments is:"+navHostFragment.getChildFragmentManager()
.getFragments().size());
NavigationUI.setupWithNavController(bottomNavigationView,
navHostFragment.getNavController());
}
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:background="#color/white"
tools:context=".MainActivity">
<fragment
android:id="#+id/main_nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:navGraph="#navigation/main_nav_graph" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
and the menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#id/homeFragment"
android:icon="#drawable/ic_home"
app:showAsAction="always"
android:title="">
</item>
<item
android:id="#id/walletFragment"
android:icon="#drawable/ic_wallet"
app:showAsAction="always"
android:title="">
</item>
<item
android:id="#id/addProductFragment"
android:icon="#drawable/ic_add"
app:showAsAction="always"
android:title="">
</item>
<item
android:id="#+id/settingsFragment"
android:icon="#drawable/ic_settings"
app:showAsAction="always"
android:title="">
</item>
<item
android:id="#id/profileFragment"
android:icon="#drawable/ic_person_black_24dp"
app:showAsAction="always"
android:title="">
</item>
</menu>
At first I thought it was the main activity layout so I tried frame layout and coordinator layout too.
but nothing worked.
one of my fragments:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".HomeFragment">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_blank_fragment" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="256dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.063"
tools:src="#tools:sample/avatars" />
</androidx.constraintlayout.widget.ConstraintLayout>
what is the problem?

try to check the package name of the fragment and fragment name attr in navgraph