In this blog post, we will discuss Jetpack’s Navigation Component. Let’s say you’ve mastered the basics of Android and are eager to master it.

What is JetPack?

Jetpack is a library of UI components launched at Google I/O 2018 to help developers follow best practices, reduce boilerplate code, and write code that works consistently across Android versions and devices so developers can focus on writing only the code they care about.

Do not useNavigation component

  • Navigation tasks in the application are created manually
  • There is no standard practice for creating/editing application routing navigation flows
  • There is no standard visual tool for understanding the application routing flow
  • No consistent approach will beActivity/FragmentManage into native applications

useNavigation component

  • We now have standard apis, as well as visual tools in the IDE, to help make the entire development process clearer, simpler, and more consistent
  • We can use design tools to create routes and define navigation paths

A prerequisite for

The navigation component requires Android Studio 3.3 or higher and relies on Java 8 language features.

A simple introduction

Routing navigation is a core part of the user experience across screens and applications. Some principles set a benchmark for a consistent and intuitive user experience across applications. The Navigation Component is designed to implement these principles by default, ensuring that users have the same heuristic and pattern of Navigation experience across different applications.

Navigation is a framework for navigating between different pages in an Android application. It provides a consistent API, whether the destination page is implemented as an Activity or Fragment or some other component.

Navigation Component consists of three parts:

  1. Navigation Graph(XML resource)This is a file that contains all the navigation pages. It contains everything in the applicationActivities,FragmentsandDialogs, and all the paths that the user might take in the application.
  2. NavHostFragment(Layout XML View): This is a special component in a Layout that displays the paths of different pages
  3. NavController (Kotlin/Java object): This is oneNavigationController, which can be used to control the jump and get the current location when you jump between different pages.

How to use

Step oneIn:build.gradleAdd a dependency to

Dependencies {def nav_version = "" / / Java 2.3.2 depend on implementation" androidx. Navigation: navigation - fragments: $nav_version" Implementation "androidx. Navigation: navigation - UI: $nav_version" / / Kotlin depend on implementation "Androidx. Navigation: navigation - fragments - KTX: $nav_version" implementation "Androidx. Navigation: navigation - UI - KTX: $nav_version" / / Feature modules depend on implementation "Androidx. Navigation: navigation - dynamic - the features - fragments: $nav_version" androidTestImplementation / / test module "Androidx. Navigation: navigation - testing: $nav_version"}Copy the code

Step 2: Adds to the ActivityNavHost

  1. This is the layout of an Activity that contains the global navigation, a bottom button, and a toolbar
  2. android:name="androidx.navigation.fragment.NavHostFragment" andapp:defaultNavHost="true"Connect the system back button toNavHostFragment
  3. app:navGraph="@navigation/app_navigation"Is used toNavHostFragmentwithNavigation GraphTo connect,Navigation GraphUsed to manage all route navigation.

Step 3: createnav_graphNavigation Graph

It is used to add all page routes as child elements to a file. Note that all child elements are assigned unique ids.

Route editor provided by IDE routing

Automatically generated source code

Four parameters are used:

  1. Android: ID: unique route ID, similar to setting ids for other components in XML
  2. Android :name: indicates the name of the class used for routing
  3. Android :label: indicates the route name
  4. Tools :layout: indicates the ID of the layout file

We use startDestination to define the first view location

Let’s seeactionThe parameters used in

  1. android:id: actionThe id of the
  2. App :destination: the id of the target page, associating the current action with the page
  3. App :popUpTo: If the application has already navigated from page A to page B, and then from page B to page C, this is for backward navigation. If you want to go from page A to page C, you can set page A’s ID here. The background navigation component will automatically manage the stack and lifecycle.
  4. popUpToInclusive=true: indicates to return topopUpToAfter specifying the page, the top of the stack will be cleared.
  5. We can also define some navigation animations that we can use inres/animDefine the animation in the folder
<fragment
    android:id="@+id/loginFragment"
    android:name="com.android.samples.LoginFragment"
    android:label="fragment_login"
    tools:layout="@layout/fragment_login" >
    <action
        android:id="@+id/action_loginFragment_to_forgotPasswordFragment"
        app:destination="@id/forgotPasswordFragment"
        app:popUpTo="@+id/signinMainFragment"
        app:popUpToInclusive="true"
        app:enterAnim="@anim/slide_in_right"
        app:exitAnim="@anim/slide_out_left"
        app:popEnterAnim="@anim/slide_in_left"
        app:popExitAnim="@anim/slide_out_right"/>
    <action
        android:id="@+id/action_loginFragment_to_tnCFragment"
        app:destination="@id/tnCFragment" />
</fragment>
Copy the code

We can define the animation using the following properties:

  • app:enterAnim=”@anim/slide_in_right”
  • app:exitAnim=”@anim/slide_out_left”
  • app:popEnterAnim=”@anim/slide_in_left”
  • app:popExitAnim=”@anim/slide_out_right”

Jump page (NavController)

NavController is very powerful because when you call methods like navigate() or popBackStack(), it converts those commands into framework compatible methods. For example, NavController internally calls startActivity() when you call navigate().

The jump page is done using NavController, an object that manages application navigation in NavHost. Each NavHost has its own NavController. You can get a NavController using one of the following methods:

Kotlin:

  • Fragment.findNavController()
  • View.findNavController()
  • Activity.findNavController(viewId: Int)

Java:

  • NavHostFragment.findNavController(Fragment)
  • Navigation.findNavController(Activity, @IdRes int viewId)
  • Navigation.findNavController(View)

The Navigation Component recommends using the Gradle plugin Safe Args to ensure type safety

We can get a NavController object and navigate to it

val directions: NavDirections = LoginFragmentDirections.actionLoginFragmentToForgotPasswordFragment()
Navigation.findNavController(view).navigate(directions)
Copy the code

Embedded routines by

We can nest some routes to reuse some components. We can do this using include

<include app:graph="@navigation/profile_nav_graph" />
Copy the code

useNavigationUIjump

NavigationUI allows you to navigate between common pages, such as the top navigation bar