Bottom Navigation View: BookLog Application

#BuildTogether Day14/100

Today I spent time learning Navigation Architecture Library of Jetpack Navigation so that I can implement the same in my BookLog Application.

I believe Jetpack Navigation Component was announced at Google I/O 2018, 4 years late I finally got the chance to implement it ;) On the other hand, it is much better to use a stable library than to use the alpha or beta versions that are soon expected to change :D

So, I found out there are 3 key parts when you use Navigation in your application.

• Navigation Graph (New XML resource) — This is a resource that contains all navigation-related information in one centralized location. This includes all the places in your app, known as destinations, (fragments or activities), and possible paths a user could take through your app.
• NavHostFragment (Layout XML view) — This is a special widget you add to your layout. It displays different destinations from your Navigation Graph.
• NavController (Kotlin/Java object) — This is an object that keeps track of the current position within the navigation graph. It orchestrates swapping destination content in the NavHostFragment as you move through a navigation graph.

Step 1: Adding Dependencies

The first step was to add the navigation dependencies

//Navigation Component
implementation 'androidx.navigation:navigation-fragment-ktx:2.2.1'
implementation 'androidx.navigation:navigation-ui-ktx:2.2.1'

Step2: Adding UI Design Screens as fragments

As I mentioned yesterday, I will be adding 3 screens

• Add Book
• Add Owner
• BookList

As I am using Bottom Navigation View to display them, I would need to add 3 fragments to my app to help me create the navigation graph.

I created 3 Blank Fragments and their layouts bas destinations for my application

• AddBookFragment
• AddOwnerFragment
• BookListFragment

Step 3: Creating a Navigation Graph

A Navigation graph displays all possible destinations that an application will take depending on the workflow.

To create this graph, right-click on res > new > Android Resource File and it will open a window. I added details as shown.

This creates an empty blank design window and the XML code looks like this below:

In the next step, I added the fragments created in the previous step, starting with the BookList Fragment as my first destination when the app launches.

The design view looks as below after adding all fragments. The code also gets added to the XML file when fragments are added.

nav_graph

Step4: Adding Menu for Bottom Navigation

The menu graph contains the menu for the bottom navigation with their names, icons, and titles.

To connect BottomNavigationView and the navigation destinations, the same Ids are declared in both the menu and navigation files.

The menu file created is as below, I added vector assets for icons.

Step5: Adding NavHostFragment and Bottom Navigation View

NavHostFragment works as a starting point in the navigation graph. As mentioned, it’s a widget added to an activity layout. A NavHostFragment swaps different fragments that are part of the graph.

BookLog application launches LibraryActivity at startup so I added a fragment to the activity_library and named it as NavHostFragment

The next step is to connect all pieces in the Library Activity. The code looks as below:

The UI design for BookLog Application looks like this:

The updated code can be checked on my Github

GitHub - hennasingh/BookLog

References:

1. Bottom Navigation View with Jetpack Navigation

Will continue tomorrow on the next section of adding database operation details and views on the Add UI screens.