Collapsing Toolbar only for one Fragment in Navigation View

Question

The Problem

I have a navigation drawer with different fragments. There is a default toolbar every Fragment should use, except of one Fragment which needs a collapsing Toolbar.

My Question

How can I switch between the toolbars for the fragments ?

Herakleion

For that item of your navigation view you can open a separate activity with collapsing toolbars. – Trellas

seems to be the only option so far, but i don't really like that option... – Herakleion

Did you find any good solutions for this @MayrTechnologies? – Theory

Answer 1

It seems you want to achieve something like this.

I have made an activity with common toolbar. when switching to the collapsing toolbar fragment I've made the toolbar transparent and fragment's toolbar takes over. The toolbar's color remains the same on switching to other fragments.

This allows you to manage complete collapsing toolbar's layout structure in xml and logic remains in Fragment.

Hope this will help. Refer the gif linked.

Gist for gif

Antlia

can you provide us with the code ? how you set toolbar transparent and when? – Steinbok

Gist is attached. You can access it at gist.github.com/groverankush/9d09fbba07879790d5395434fda1e2d4 – Antlia

i went through the gist and put it together and it does work, there is a comment on the gist suggesting this creates 2 toolbars but thats not the case this does work, however it does have an issue with collapsing toolbar titles not knowing where the drawer toggle is so ive set the title to collapse to the center, – Sordello

@Antlia i was tried this but my other fragment content is hide below toolbar – Myrwyn

Answer 2

The best solution that I found to easily collapse, lock it(keep it in collapsed mode) and unlock the collapsingToolbar.

private void collapseAppBar() {
    // Collapse the AppBarLayout with animation
    mAppBarLayout.setExpanded(false, true);
}

private void lockAppBar() {
    /* Disable the nestedScrolling to disable expanding the
     appBar with dragging the nestedScrollView below it */
    ViewCompat.setNestedScrollingEnabled(nestedScrollView, false);

    /* But still appBar is expandable with dragging the appBar itself
    and below code disables that too
     */
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
    AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
    behavior.setDragCallback(new AppBarLayout.Behavior.DragCallback() {
        @Override
        public boolean canDrag(AppBarLayout appBarLayout) {
            return false;
        }
    });
}

private void unLockAppBar() {
    ViewCompat.setNestedScrollingEnabled(nestedScrollView, true);

    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
    AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
    if (behavior != null) {
        behavior.setDragCallback(new AppBarLayout.Behavior.DragCallback() {
            @Override
            public boolean canDrag(AppBarLayout appBarLayout) {
                return true;
            }
        });
    }
}

And I use these functions in this way:

    Fragment fragment = null;
    Class fragmentClass;
    switch (menuItem.getItemId()) {
        case R.id.fragment1:
            unLockAppBar();
            fragmentClass = first_Fragment.class;
            break;
        case R.id.fragment2:
            collapseAppBar();
            lockAppBar();
            fragmentClass = second_Fragment.class;
            break;
        case R.id.fragment3:
            collapseAppBar();
            lockAppBar();
            fragmentClass = third_Fragment.class;
            break;

Femininity

Answer 3

You can easily get the Toolbar from your Fragment and then modify or change some property of that Toolbar inside the Fragment.

To get the Toolbar from your Activity you might consider using this.

Toolbar toolbar = (Toolbar) getActivity().findViewById(R.id.toolbar);

Now you need to make the changes on the Toolbar in the onResume function and then undo the changes each time you return from the Fragment inside onStop function. Otherwise the changes made in the Fragment will be carried on to other fragments as well when switched to other Fragment from the navigation drawer.

But in your case, I would recommend each Fragment should have their Toolbar so that it doesn't conflict with each other and can be modified as you need. And yes, remove the Toolbar from your Activity.

So add the Toolbar in the layout of your Fragment like this.

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimaryDark"/>

Then find it in the Fragment

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment, container, false);
    Toolbar toolbar = (Toolbar) view.findViewById(R.id.toolbar);

    // Modify your Toolbar here. 
    // ... 
    // For example. 
    // toolbar.setBackground(R.color.red);

    // Create home button
    AppCompatActivity activity = (AppCompatActivity) getActivity();
    activity.setSupportActionBar(toolbar);
    activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}

And Override the onOptionsItemSelected function.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch(item.getItemId()){
        case android.R.id.home:
            getActivity().onBackPressed();
    }
    return super.onOptionsItemSelected(item);
}

Chromosome

Thanks for your answer, but how can i make a normale toolbar to a collapsing toolbar programmatically ? – Herakleion

I think this is what you're looking for. https://mcmap.net/q/135464/-programmatically-collapse-or-expand-collapsingtoolbarlayout - Please accept and upvote the answer if that helped. – Chromosome

This solution doesn't account for the fact that you have to set the toolbar in the ActionBarDrawerToggle when you create that object in the Activity, which is an important part to make the navigation drawer open when the user clicks on the hamburger icon. – Theory

Answer 4

I'm using Jetpack's Navigation components with single Activity and different Fragments in my app.

Some Fragments are accessible from bottom navigation (and have Toolbar from Activity). Some others are "special" Fragments and have their own Collapsible Toolbar.

To achieve this, I'm hiding Toolbar from Activity in "special" Fragments with this code in Activity:

// Handle toolbar changes in different Fragments
val navController = findNavController(R.id.nav_host_fragment)
navController.addOnDestinationChangedListener { _, destination, _ ->
    when (destination.id) {
        R.id.my_special_fragment_with_collapsible_toolbar -> {
            binding.toolbarMain.visibility = View.GONE
        }
        else -> {
            binding.toolbarMain.visibility = View.VISIBLE
        }
    }
}

Dot

Answer 5

The recommend practice is to use toolbars in fragments instead of a common toolbar in activity. That way you can control the looks and behaviour of toolbar in fragment. Refer https://developer.android.com/guide/navigation/navigation-ui#support_app_bar_variations

Associative