Day60 of #100DaysOfCode

#CodeTogether Day 60/100

Hii folks 🙌

Today I will be continuing the same pathway in which I will learn to use the Navigation Graph.

Unit 3: Navigation

Pathway 2: Introduction to the Navigation component

Source: https://developer.android.com/courses/android-basics-kotlin/course

Now, that we have familiarity with the basics of the fragments and their lifecycle, it’s time to use the Navigation Graph.

The Navigation Graph is a virtual mapping of our app’s navigation. Each screen or fragment in our case becomes a possible “destination” that can be navigated to. A NavGraph can be represented by an XML file showing how each destination relates to one another.

Use FragmentContainerView in MainActivity

Because our layouts are now contained in fragment_letter_list.xml and, fragment_word_list.xml, our activity_main.xml file no longer needs to contain the layout for the first screen in our app. Instead, we’ll repurpose MainActivity to contain a FragmentContainerView to act as the NavHost for our fragments. From this point forward, all the navigation in the app will take place within the FragmentContainerView.

• Replace the content of the FrameLayout in activity_main.xml that is androidx.recyclerview.widget.RecyclerView with a FragmentContainerView. Give it an ID of nav_host_fragment and set its height and width to match_parent to fill the entire frame layout.

<androidx.fragment.app.FragmentContainerView
   android:id="@+id/nav_host_fragment"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

• Below is the id attribute, add a name attribute and set it to androidx.navigation.fragment.NavHostFragment. While we can specify a specific fragment for this attribute, setting it to NavHostFragment allows our FragmentContainerView to navigate between fragments.

android:name="androidx.navigation.fragment.NavHostFragment"

Now we will set the app:defaultNavHost="true"

and app:navGraph="@navigation/nav_graph"

Finally, we have added the two attributes with the app namespace, now we will add the xmlns:app attribute to the FrameLayout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

Now we will set up the Navigation Graph and perform the navigation action.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

And then configure the MainActivity

private lateinit var navController: NavController

Then after the call to setContentView() in onCreate() we will get the reference to the nav_host_fragment and assign to our navController property.

val navHostFragment = supportFragmentManager
    .findFragmentById(R.id.nav_host_fragment) as NavHostFragment
navController = navHostFragment.navController

• Finally, implement onSupportNavigateUp(). Along with setting defaultNavHost to true in the XML, this method allows us to handle the up button. However, our activity needs to provide the implementation.

override fun onSupportNavigateUp(): Boolean {
   return navController.navigateUp() || super.onSupportNavigateUp()
}

Now, all the components are in place to get navigation working with fragments. However, now that navigation is performed using fragments instead of the intent, the intent extra for the letter that we use in WordListFragment will no longer work. In the next step, we'll update WordListFragment, to get the letter argument.

That is all for Day60 ✅

Thanks for reading, See you tomorrow!

If you are reading my #100Days Journey, feel free to drop by ;)

The Journey of #100DaysOfCode (@im_Kushagra)