BottomNavigationView is not show though layout preview shows

Question

I intended to show BottomBar with three menus (dedicated fragments for each). The BottomBar doesn't show up in the UI, though the same previews perfectly below the fragment. An Android Studio screenshot of HomeActivity is pasted below.

Is there any restriction with ConstraintLayout since most of the examples are with CoordinatedLayout?

<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/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".home.HomeActivity">

    <fragment
        android:id="@+id/nav_host_home_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_home" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        style="@style/Widget.MaterialComponents.BottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/windowBackground"
        app:itemIconTint="@color/colorPrimary"
        app:itemTextColor="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_home_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

and setting up the BottomBar in HomeActivity as follows:

    private fun setupNavigation() {
        val navController = findNavController(R.id.nav_host_home_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_bookings, R.id.navigation_profile
            )
        )
        setupActionBarWithNavController(navController, appBarConfiguration)
        bottomNavigationView.setupWithNavController(navController)
    }

Answer 1

I consider the below Stack Overflow question as the answer (maybe, I'm wrong). The mistake I was doing, was calling the navigation graph whose starting points is a fragment. Instead, I am now calling the Activity directly using startActivity.

I am not sure about the solution; I'm concluding, though unsatisfied.

Android Navigation Component navigate between graphs

Answer 2

In your XML file, at the bottom navigation view, change android:layout_width="0dp" to android:layout_width="wrap_content".