Visual navigation graph representation in Jetpack Compose?

Question

Jetpack navigation component has a nice visual representation of nav_graph.xml file between fragments, however if we use navigation component for Jetpack Compose there is no support nav_graph.xml for composable functions. Then the question is how visually to see the navigation graph between composable widgets and screens similarly what we can see with nav_graph.xml in Android Studio?

Answer 1

As far as I know there is currently no way of doing this with Jetpack Compose Navigation.

Answer 2

Visualization of composable functions in Jetpack Compose Navigation is not supported in Android Studio at the moment. However as a workaround you could use Jetpack Navigation library and preview your composable widgets inside of fragments.

---

Workaround:

To get preview working, we can use Jetpack Navigation library (non-compose version) for handling navigation inside the app and previewing graphs. Therefore, we need to use our composable widgets inside of a Fragment .

Create XML resource for your Fragment with a root element being ComposeView :

<androidx.compose.ui.platform.ComposeView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/composeView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:composableName="com.example.myapplication.HomeScreenKt.PreviewHome" />

In tools:composableName attribute specify full path to your annotated @Preview function.

Then create a Fragment for your composable widget ( how ):

class HomeFragment : Fragment() {

    private var _binding: FragmentHomeBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View = FragmentHomeBinding
        .inflate(inflater, container, false)
        .also { _binding = it }
        .root

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        initComposeView()
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }

    private fun initComposeView() {
        with(binding.composeView) {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                HomeScreen()
            }
        }
    }
}

Create graph res/navigation/home_graph and add your fragment:

<?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/home_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.myapplication.HomeFragment"
        android:label="HomeFragment"
        tools:layout="@layout/fragment_home" />
</navigation>

Don't forget to specify tools:layout tag as it tells Android Studio to draw the preview of XML file.

Build project and you will see working preview of a composable function inside the navigation graph!