android hide toolbar in specific fragment without flicker

Question

I would like to hide toolbar from activity on specific fragments in Navigation Component stack. Problem is that hiding is not in sync with fragment change so I have two options with similar problem when I click to navigate to second fragment

1. Toolbar is hidden, first fragment stretch for a moment and after that second fragment is shown.
2. Toolbar title is changed, the second fragment is shown and after that toolbar is hidden. This happens fast but it's visible

Stackoverflow offered 2 solutions

1. First problem occurs with this code:

navController.addOnDestinationChangedListener { _, destination, _ ->
    if(destination.getId() == R.id.full_screen_destination) {
        toolbar.setVisibility(View.GONE)
        bottomNavigationView.setVisibility(View.GONE);
    } else {
        toolbar.setVisibility(View.VISIBLE)
        bottomNavigationView.setVisibility(View.VISIBLE);
    }
}

2. Second problem occurs with this code:

@Override
public void onResume() {
    super.onResume();
    ((AppCompatActivity)getActivity()).getSupportActionBar().hide();
}
@Override
public void onStop() {
    super.onStop();
    ((AppCompatActivity)getActivity()).getSupportActionBar().show();
}

This is my current layout of Activity

<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=".domain.MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:theme="@style/ToolbarTheme">
    </androidx.appcompat.widget.Toolbar>

    <fragment
        android:id="@+id/nav_host"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        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_toBottomOf="@+id/toolbar"
        app:navGraph="@navigation/nav_graph_main"
        tools:ignore="FragmentTagUsage" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        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/bottom_navigation_menu"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Is there some solution with Navigation Controler to sync everything?

Answer 1

I think you have 2 ways how to solve it:

a) Placing the Toolbar into layout of each fragment where you want to have it, and removing it from layout of your Activity.

Disadvantage of this is that when navigating between two fragments with Toolbar, the fragment transition animation will be applied also to the Toolbar. For example you will see it fading-out and fading-in with the fragment content. Maybe it could be ok if you use no animation.

b) Having the Toolbar in Activity, as you have, but placing the NavHostFragment to be drawn under it. That means replacing

app:layout_constraintTop_toBottomOf="@+id/toolbar"

with

app:layout_constraintTop_toTopOf="parent"

Then applying top padding to layout of every fragment which will have toolbar shown. For example in fragment_test.xml:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize"  << adding this line
tools:context=".TestFragment">

This feels like better solution, but disadvantage is you have to place the padding possibly to many fragments. And it could be complicated when you have toolbar which can have dynamic height (for such fragments you may want to combine it with variant (a) - using different toolbar in their own layout).

Nice could be using animation for hiding/showing the toolbar to make the transition softer.