Bottom Navigation View: BookLog Application
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
NavHostFragmentas you move through a navigation graph.
Step 1: Adding Dependencies
The first step was to add the navigation dependencies
//Navigation Componentimplementation 'androidx.navigation:navigation-fragment-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
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
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
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.
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
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…
Will continue tomorrow on the next section of adding database operation details and views on the Add UI screens.