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

You can access parent view's id and hide the bottom navigation by setting its visibility to gone and again have to make it visible in On Destroy view

BottomNavigationView navView;

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View root = inflater.inflate(R.layout.fragment_add_standard, container, false);
    navView = container.getRootView().findViewById(R.id.nav_view);
    navView.setVisibility(View.GONE);
    return root;
}

@Override
public void onDestroyView() {
    super.onDestroyView();
    navView.setVisibility(View.VISIBLE);
}

Answer 2

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

Answer 3

It seems that there's no simple solution currently implemented in NavigationUI.

What I ended up doing is adding a hideBottomBar method in MainActivity like so:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ...
        hideBottomBar(false); // to have it visible by default
    }

    public void hideBottomBar(boolean isHidden){
         bottomBar.setVisibility(isHidden ? View.GONE : View.VISIBLE);
    }

And then, in the fragments where the bottom bar needs to be hidden:

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // layout inflating and stuff...

        MainActivity activity = (MainActivity) getActivity();
        if (activity != null)
            activity.hideBottomBar(true);

        return view;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();

        MainActivity activity = (MainActivity) getActivity();
        if (activity != null)
            activity.hideBottomBar(false);    // to show the bottom bar when
                                              // we destroy this fragment
    }

Answer 4

I'll be honest, I just read the title to this question but.. Can't you just toggle the visibility? Put this in your MainActivity.

fun toggleBottomNavigation(visible: Boolean) {
    bottomNavigationView.visibility = if (visible) {
        View.VISIBLE
    } else {
        View.GONE
    }
}

and do the same for the toolbar.