Search⌘ K
Home
Courses
Mastering MVVM Architecture in Android Development using Kotlin

Hooking Navigation Components

Learn how to hook the bottom navigation bar to the navigation graph.

We'll cover the following...

Adding navigation components to the news activity

We’ll add a NavHost and a BottomNavigationView to activity_news.xml.

NavHost is a container that hosts fragment destinations as they are swapped from one fragment to the next.

Let’s start with the FragmentContainerView. It will be inside a frame layout nested inside a ConstraintLayout.

XML
<?xml version="1.0" encoding="utf-8"?>
<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="com.example.ui.activities.NewsActivity">
    <FrameLayout
        android:id="@+id/flFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/newsNavHostFragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:defaultNavHost="true"
            app:navGraph="@navigation/news_nav_graph" />
    </FrameLayout>
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:menu="@menu/bottom_navigation_menu"
        app:itemBackground="@color/black"
        app:itemIconTint="@drawable/bottom_selector"
        app:itemTextColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

  • android:name="androidx.navigation.fragment.NavHostFragment": This defines the class name of our NavHost.

  • app:navGraph="@navigation/news_nav_graph": This references the location of the navGraph, which is located inside the folder navigation with the filename news_nav_graph.

  • app:defaultNavHost="true": This ensures that the NavHost is able to access and intercept the back button of the application to get the user to some fragment, which is the BreakingNewsFragment. ...