Navigation Architecture Component - Detail View with CollapsingToolbar

Question

The proposed practise for the new navigation components were presented at I/O with the following template and proposed philosophy:

1. One Activity for an App
2. Activity contains Toolbar and Bottom Navigation Bar

A typical app often has a detail view with a CollapsingToolbar in it. How would one build that under that architecture?

• Move Toolbar to each Fragment XML?
• Implement the collapsing toolbar programmatically?
• Move the detail fragment to its own activity (it may use its own deeplink anyway) and 'break' the philosophy?

Answer 1

A typical app often has a detail view with a CollapsingToolbar in it. How would one build that under that architecture?

Great question! I struggled with this for a bit as well and came to the conclusion that there should be one Activity with a NavHostFragment and, ideally, nothing else. This gives you ultimate flexibility to display (or not display) whatever you need for each screen. Importantly, make sure your theme removes the ActionBar:

<item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> 

Which leads to your next question...

Move Toolbar to each Fragment XML?

In my opinion, yup! Everything you'd typically use the ActionBar for can be done via a Toolbar. Here's a quick snippet that shows how a Toolbar can be used to do the most important things you've used ActionBar for in the past (up navigation, title, options menu, etc...):

toolbar.apply {     setNavigationOnClickListener { findNavController().navigateUp() }     setTitle(R.string.toolbar_title)     inflateMenu(R.menu.fragment_menu)     setOnMenuItemClickListener(::onMenuItemClick) } 

Implement the collapsing toolbar programmatically?

It depends on what exactly you are trying to do, but most likely, there's no need for that. You can drop an AppBarLayout, CollapsingToolbarLayout, and Toolbar into your layout and use them just like normal. Give your AppBarLayout an ActionBar theme overlay. Here's an example:

<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout 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/coordinatorLayout"     android:layout_width="match_parent"     android:layout_height="match_parent">      <com.google.android.material.appbar.AppBarLayout         android:id="@+id/appBarLayout"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">          <com.google.android.material.appbar.CollapsingToolbarLayout             android:id="@+id/collapsingToolbarLayout"             android:layout_width="match_parent"             android:layout_height="wrap_content"             app:contentScrim="@color/primary"             app:layout_scrollFlags="scroll|exitUntilCollapsed">              <androidx.appcompat.widget.Toolbar                 android:id="@+id/toolbar"                 android:layout_width="match_parent"                 android:layout_height="?attr/actionBarSize"                 app:layout_collapseMode="pin"                 app:navigationIcon="@drawable/ic_up_white"/>              ... 

Move the detail fragment to its own activity (it may use its own deeplink anyway) and 'break' the philosophy?

No need for that with the above, right? It's an approach that's flexible enough to accommodate multiple levels easily in one nav graph and still be able to customize the appearance and behavior of every destination in the graph (including ActionBar-like functionality).

Answer 2

try

appBarLayout = (AppBarLayout) findViewById(R.id.appbar);   if(expandToolbar){                 appBarLayout.setExpanded(true,true);             }else{                 appBarLayout.setExpanded(false,true);             } 

Here is a usufal link disable expand on CollapsingToolbarLayout for certain fragments

also for other people inteasing of changing some parts of their toolBar you should write your custom toolbar view in separate XML and try to inflate the custom view in your details Fragment grammatically then hide the unused elements of the old toolbar if there are any.

setSupportActionBar(toolbar); View logo = getLayoutInflater().inflate(R.layout.view_logo, null); toolbar.addView(logo); 

and here is how u can hide unwanted Views

for (int i = 0; i < toolbar.getChildCount(); ++i) {         View child = toolbar.getChildAt(i);          // here u can hide all text views for example.         if (child instanceof TextView) {             child.setVisibility(View.GONE );         }     } 

this way is a lot better than writing two activities