Implement the Android Navigation Component in your App with Android Jetpack
The year 2019 is going to be end soon, but it was a great year for the global web app development industry. As the entire year, the global web app development community has created and seen a lot of awesomeness in the multiple tech platforms, especially in the Android app development platform. Likewise moving on the same with and withholding the same charm, in the ending duration of the year once again this Android App Development platform has introduced something new and exciting for the developers through which they can build the application with more excellent features. This time it introduces a navigation component for the Android app with the Android Jetpack.
Let’s see what is Android Navigation?
Navigations are the interactions that allow the user to navigate across any particular page or content of the web application. While the newly stated Android Jetpack Navigation Component is introduced in the figure of a Framework which will create a wonderful in-app UI for your application and concentrating on the building of an application with a single activity.
Advantages of the Android Navigation Components:
- It has a feature to manage the fragment transactions simply with the available API of the Android Navigation Component.
- It allows the user a facility to check the flow of the whole application through the navigation graph.
- It provides the developers with a facility for standardizes resources to add some elegant animations and the transitions in the application.
- It allows the developers to add and manage the deep linking.
- In order to the addition and the management of front and back action wonderfully the Android Jetpack is come along with some by-default features.
Steps to implement the Android Jetpack Navigation in the application:
Step 1:
For the first, build the app the dependency in the app module Gradle file (build.gradle).
dependencies {
def nav_version = “2.1.0”
// navigation
implementation “androidx.navigation:navigation-fragment-ktx:$nav_version”
implementation “androidx.navigation:navigation-ui-ktx:$nav_version”
}
Step 2:
Now create a new Android Resource Directory with the Resource Type as Navigation and then Add a new New Navigation Resource file, save the file in your app folder
Step 3:
Now hold a fragment in the MainActivity of your app in hwich you want to navigate the another Fragment. To implement the process, apply the code:
<fragment
android:id=”@+id/nav_host”
android:name=”androidx.navigation.fragment.NavHostFragment”
android:layout_width=”match_parent”
app:defaultNavHost=”true”
app:navGraph=”@navigation/nav_graph”
android:layout_height=”match_parent”
/>
Step 4:
Now it’s time create a blank fragment and then navigate it from the app Home fragment to the newly created fragment. Add the both fragments in the Navigation Graph.
Step 5:
In the home fragment of your app add the following code on the click event to make the user navigate to the next fragment.
class HomeFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = inflater.inflate(R.layout.fragment_home, container, false)
if (view != null) {
init(view)
}
return view
}
private fun init(view: View?) {
view?.findViewById(R.id.tvShowAll)?.setOnClickListener {
// val bundle = bundleOf(“userText” to “John Connor”)
Navigation.findNavController(view).navigate(R.id.action_homeActivity_to_allFragment)
}
view?.findViewById(R.id.tvShowBikes)?.setOnClickListener {
val bundle = bundleOf(“userText” to “Jack Sparrow”)
Navigation.findNavController(view).navigate(R.id.action_homeActivity_to_bikesFragment, bundle)
}
view?.findViewById(R.id.tvShowCars)?.setOnClickListener {
Navigation.findNavController(view).navigate(R.id.action_homeActivity_to_carsFragment)
}
view?.findViewById(R.id.tvShowTrucks)?.setOnClickListener {
Navigation.findNavController(view).navigate(R.id.action_homeActivity_to_trucksFragment)
}
}
}
Step 6:
Likewise in the similar manner, add a few more fragments in your project and then add all the fragments in the navigation graph of your project.
Step 7:
Insert the mentioned code in the XML file of the navigation grapg of your project:
<?xml version=”1.0" encoding=”utf-8"?>
<navigation 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:id=”@+id/nav_graph”
app:startDestination=”@+id/homeFragment”>
<fragment
android:id=”@+id/homeFragment”
android:name=”com.spaceo.testconfirm.navigationgraphdemo.Views.HomeFragment”
android:label=”fragment_home”
tools:layout=”@layout/activity_home”>
<action
android:id=”@+id/action_homeActivity_to_carsFragment”
app:destination=”@id/carsFragment”
app:popEnterAnim=”@anim/nav_default_pop_enter_anim”
app:popExitAnim=”@anim/nav_default_pop_exit_anim”
app:popUpTo=”@id/carsFragment” />
<action
android:id=”@+id/action_homeActivity_to_allFragment”
app:destination=”@id/allFragment”
app:enterAnim=”@anim/nav_default_enter_anim”
app:exitAnim=”@anim/nav_default_exit_anim”
app:popUpTo=”@id/allFragment” >
<argument
android:name=”userText”
app:argType=”string”
android:defaultValue=”Hello World 2" />
</action>
<action
android:id=”@+id/action_homeActivity_to_bikesFragment”
app:destination=”@id/bikesFragment”
app:popUpTo=”@id/bikesFragment” />
<action
android:id=”@+id/action_homeActivity_to_trucksFragment”
app:destination=”@id/trucksFragment”
app:popUpTo=”@id/trucksFragment” />
</fragment>
<fragment
android:id=”@+id/bikesFragment”
android:name=”com.spaceo.testconfirm.navigationgraphdemo.Views.BikesFragment”
android:label=”fragment_bikes”
tools:layout=”@layout/fragment_bikes” >
<argument
android:name=”userText”
app:argType=”string”
android:defaultValue=”Hello World3" />
</fragment>
<fragment
android:id=”@+id/carsFragment”
android:name=”com.spaceo.testconfirm.navigationgraphdemo.Views.CarsFragment”
android:label=”fragment_cars”
tools:layout=”@layout/fragment_cars” >
<argument
android:name=”userText”
app:argType=”string”
android:defaultValue=”Hello World1" />
</fragment>
<fragment
android:id=”@+id/trucksFragment”
android:name=”com.spaceo.testconfirm.navigationgraphdemo.Views.TrucksFragment”
android:label=”fragment_trucks”
tools:layout=”@layout/fragment_trucks” />
<fragment
android:id=”@+id/allFragment”
android:name=”com.spaceo.testconfirm.navigationgraphdemo.Views.AllFragment”
android:label=”fragment_all”
tools:layout=”@layout/fragment_all”>
</fragment>
</navigation>
Final Words:
It’s all done, now your code for the Android navigation code component is ready to use. Enjoy running the code.
