Nested NavGraph in a Fragment
Sagar Malhotra
Android dev by day, Creator by night.???? Sharing my passion through videos, blogs and conferences.??
Android Jetpack's Navigation component helps you implement navigation, from simple button clicks to more complex patterns, such as app bars and the navigation drawer.
In this article, we will learn how you can Implement the Navigation component in a complex(maybe) UI flow.
Here, we will see the use of ACTUAL NESTING of the Navigation component and not just grouping some flow in one graph. Even if you are a beginner you can still read this article, I will explain everything in detail.
To include Navigation support in your project, add the following dependencies to your app's build.gradle file:
dependencies {
? def nav_version = "2.5.3"
// Kotlin
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
}
The Navigation component consists of three key parts:
? ? <androidx.fragment.app.FragmentContainerView
? ? ? ? android:id="@+id/nav_host_fragment"
? ? ?android:name="androidx.navigation.fragment.NavHostFragment"
? ? ? ? android:layout_width="0dp"
? ? ? ? android:layout_height="0dp"
? ? ? ? app:layout_constraintLeft_toLeftOf="parent"
? ? ? ? app:layout_constraintRight_toRightOf="parent"
? ? ? ? app:layout_constraintTop_toTopOf="parent"
? ? ? ? app:layout_constraintBottom_toBottomOf="parent"
? ? ? ? app:defaultNavHost="true"
? ? ? ? app:navGraph="@navigation/nav_graph" />
Our Goal:
Using Navigation between Fragments that are created on top of one activity is a very easy task. If you can new to this thing, you can check out the basics of Navigation components.
I am supposing that you know how to use a Navigation graph with fragments in one graph, but what about nested graphs?
In official docs: A series of destinations can be grouped into a nested graph within a parent navigation graph called the root graph. The nested graph encapsulates its destinations.
IMO, that IS NOT NESTING!! This is just grouping, right?
Here, you can see we just grouped some of our destinations to make our code look cleaner. But this was not my requirement!
What I wanted:
领英推荐
In our design it will look like:
Implementation:
<androidx.fragment.app.FragmentContainerView
android:id="@+id/main_fragment_container"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/main_nav_graph" />
<androidx.fragment.app.FragmentContainerView
android:id="@+id/genreFragmentContainer"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
android:padding="10dp"
app:layout_constraintBottom_toTopOf="@id/bottomNavigationView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/genre_description_text"
app:navGraph="@navigation/genre_graph" />
val nestedNavHostFragment =childFragmentManager
.findFragmentById(R.id.genreFragmentContainer) as? NavHostFragment
val navController = nestedNavHostFragment?.navController!!
view.bottomNavigationView.setupWithNavController(navController)
Some helpful things:
I hope you found this helpful. If yes, the do FOLLOW me for more Android-related content.