how to remove bottom navigation view and toolbar in some fragments if using navigation controller?

Question

I have MainActivity as the host of my Navigation Controller, it has toolbar and bottom navigation view

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:theme="?attr/actionBarTheme"
            android:minHeight="?attr/actionBarSize"
            app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>


    <fragment
            android:id="@+id/nav_host_fragment"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/bottom_nav"
            app:layout_constraintTop_toBottomOf="@+id/toolbar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:name="androidx.navigation.fragment.NavHostFragment"
            app:navGraph="@navigation/navigation_graph"
            app:defaultNavHost="true"
    />


    <android.support.design.widget.BottomNavigationView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:background="@color/colorPrimary"
            app:itemIconTint="@color/color_bottom_view_navigation"
            app:itemTextColor="@color/color_bottom_view_navigation"
            app:menu="@menu/menu_bottom_view"
            app:labelVisibilityMode="labeled"
            android:id="@+id/bottom_nav"/>




</android.support.constraint.ConstraintLayout>

it will host some fragments as the menu for bottom navigation view like HomeFragment, OrderFragment, FavouriteFragment, CartFragment, ProfileFragment.

like this :

let say there is logOut button in the HomeFragment, and if it is clicked then it will move to Login screen. as usual, the login screen or sign up screen doesn't have bottom navigation view and also doesn't have toolbar.

so what is the best way to remove that bottom navigation view and also the toolbar if using navigation controller ?

I have tried to use <Include> tag in my navigation controller graph,

so I make two navigation graph, then I make 2 activity to place fragment as the host. the first activity has bottom navigation view and toolbar (MainActivity, like the xml I share above) and the other activity doesn't have bottom navigation view and toolbar

the navigation graph are like the image below:

MainActivity as nav host fragment

AuthActivity as nav host fragment

but when I move from HomeFragment (that has logout button) to LoginFragment using this code:

logout_button.setOnClickListener {
            Navigation.findNavController(it).navigate(R.id.action_toAuthActivity)

        }

but in login screen the bottom navigation view and the toolbar is still there

I assume the auth_graph (AuthActivity as the host) can be used to host some screen that doesn't have bottom navigation view and toolbar like login screen, sign up screen or forgot password screen.

but....I can't remove that bottom navigation view and the toolbar using this way

so how to remove bottom navigation view and toolbar in some fragments if using navigation controller ?

Answer 1

More concise is to use a navigationlistener. This way you only need 1 function in your MainActivity and no code in all the fragments where you want to hide the bottomnavigation or any other UI element (like toolbar). Place this function inside your onCreate from your MainActivity.

My function looks like this:

private fun visibilityNavElements(navController: NavController) {
    navController.addOnDestinationChangedListener { _, destination, _ ->
        when (destination.id) {
            R.id.about_fragment, 
            R.id.settings_fragment, 
            R.id.detail_fragment, 
            R.id.missionPhotoFragment -> bottom_nav?.visibility = View.GONE
            else -> bottom_nav?.visibility = View.VISIBLE
        }
    }
}

I use Kotlin Android Extensions to directly access views by there id (no findViewById needed).