Step #6: Setting Up a New Activity Layout Resource

To navigate between fragments, the Navigation component uses one fragment as the “host”. That fragment, in turn, will hold the fragments representing individual screens.

Earlier in the book, we had an activity_main layout resource, but we renamed it to todo_roster when we converted the app to use fragments. Now, we need a layout resource for our MainActivity again, where we can set up the host fragment.

So, right-click over the res/layout/ directory and choose “New” > “Layout resource file” from the context menu. Fill in activity_main for the filename and use ConstraintLayout for the “Root element” (if you start typing in that name, it will show up in a selection list for you to choose from). Click “OK” to create the mostly-empty layout resource.

We want to add a <FragmentContainerView> element to the layout resource. As the name suggests, this is a container for a fragment and will show that fragment wherever we size and position it. An android:name attribute will indicate what fragment class we want.

While the drag-and-drop GUI builder offers FragmentContainerView, not all widgets and containers that we want to use will be available for drag-and-drop. So, in this case, we will add this element by hand, directly in the XML.

Click on the “Code” button to switch to the XML editor view. There, add in this XML element as a child of the ConstraintLayout element:

  <androidx.fragment.app.FragmentContainerView
    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_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:navGraph="@navigation/nav_graph" />

This fragment will be part of our UI for as long as we are using this layout. The actual fragment implementation is androidx.navigation.fragment.NavHostFragment, which is a fragment from the Navigation component that knows how to switch between screens defined in a navigation resource. That navigation resource is identified via the app:navGraph attribute, in this case pointing to our nav_graph that we defined. The fragment also has app:defaultNavHost="true", which tells the Navigation component that this fragment is the one responsible for that navigation graph.

You may find that the app namespace shows up in red:

app is used as a namespace prefix for a lot of attributes used by widgets and containers that we get from libraries. To add the definition of this namespace, with the text cursor in one of those app prefixes, press Alt-Enter (Option-Return on macOS) and choose “Create namespace declaration” from the quick-fix menu.