Jetpack Navigation Component w SafeArgs

Concept

Jetpack Navigation allows users to navigate across, into and back out from the various pieces within an app.

 

Benefits

- simplifies setup for common navigation patterns

- handles backstack

- automates fragment transactions

- types safe argument passing

- handles transition animations

- simplifies deep linking

- centralizes and visualizes navigation

 

Supports for

- Activities, Fragments, Customized destinations

- UI (Options Menus, Bottom Navigation, Navigation View, Navigation Drawer, ActionBar, Toolbar, Collapsing Toolbar)

 

Comprised of

- Navigation graph(xml resource)

- NavHostFragment(destination displayer)

- NavController(swiper)

 

Example

<Demo>

 

- Create two fragments 

- Create file named "navigation" in the package "navigation" in res

- Set a new destination (click the phone plus icon and add fragments)

- make a link between fragments for destination (just drag it). The action will be added automatically in xml file.

- Set a fragment in activity_main with a few mandatory attributes such as android:name, app:defaultNavHost, app:navGraph.

<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        app:defaultNavHost="true"
        app:navGraph="@navigation/navigation"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

- set a navController in MainActivity

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val navController = Navigation.findNavController(this, R.id.fragment)
    NavigationUI.setupActionBarWithNavController(this, navController)

}
// back button
override fun onSupportNavigateUp(): Boolean {
    return NavigationUI.navigateUp(navController, null)
}

 

How to parse data?

- Bundle: it is necessary to check type and key to transfer data

EnterDetailsFragment

VerifyDetailsFragment

- SafeArgs: it generates classes based on your navigation graph to ensure type-safe access to arguments for destinations and actions

 

1. build.gradle(project)

classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"

2. build.gradle(module)

plugins { id 'androidx.navigation.safeargs.kotlin' }

3. navigation

- add args

<fragment
    android:id="@+id/verifyDetailsFragment"
    android:name="com.example.navtest.VerifyDetailsFragment"
    android:label="fragment_verify_details"
    tools:layout="@layout/fragment_verify_details">
    <argument
        android:name="name"
        app:argType="string"
        android:defaultValue='""' /> <!--empty string-->
    <argument
        android:name="phone"
        app:argType="long"
        android:defaultValue="0L" />
</fragment>

4. Fragments

EnterDetailsFragment

VerifyDetailsFragment

 

 

 

 

 

 

Ref1: https://www.youtube.com/watch?v=WyNpxXmPbfU

Ref2: https://developer.android.com/guide/navigation?gclsrc=aw.ds&gclid=Cj0KCQiAuP-OBhDqARIsAD4XHpfxvCAvFaKs2dU98t8U3v3xAJ2oLf_hT6ppXEbAdpOiACiC9wlJRhkaAiWMEALw_wcB