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)
    }

score 0 · Answer 1 · edited Apr 23 '22 at 20:53

0

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

edited Apr 23 '22 at 20:53

Peter Mortensen

30,738
21
105
131

answered Oct 15 '19 at 04:55

dennisrufigill

379
1
3
14

Thanks, but didn't help! I suspect the usage of Jetpack's Navigation component and calling the nav_host_home_fragment rather the activity layout. The bottomNavBar is in the Activity layout. – Faisal Oct 15 '19 at 07:11

score 0 · Accepted Answer · edited Apr 23 '22 at 20:54

0

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

edited Apr 23 '22 at 20:54

Peter Mortensen

30,738
21
105
131

answered Oct 28 '19 at 11:59

Faisal

1,332
2
13
29

BottomNavigationView is not show though layout preview shows

2 Answers2