State Based Navigation with Jetpack Compose Navigation

Foto oleh Alex Andrews dari Pexels: https://www.pexels.com/id-id/foto/fotografi-fokus-dangkal-dari-kompas-hitam-dan-perak-di-atas-peta-1203808/

These days many Android developers are moving from xml to compose. Lot of code refactoring will involved. Not limited to navigation.

In the xml era, majority of Android developers are using navigation graph component. The idea of it is to represent the set of screens into defined connections / graph. If we take closer look of the taken term here, “graph”, for the navigation structure, is because each screen can be treated as vertex / node that possibly have many to many connections.

Navigation graph in xml is typically to handle the connections between fragments. In this case, the fragments can be seen as a node.

Now, let’s take a look at this snippet code

<!-- res/navigation/nav_graph.xml -->
<?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/fragment_home">

    <fragment
        android:id="@+id/fragment_home"
        android:name="com.example.myapp.HomeFragment"
        android:label="Home"
        tools:layout="@layout/fragment_home">
        <action
            android:id="@+id/action_home_to_detail"…