---
# System prepended metadata

title: NavigationUI

---

# NavigationUI
1. Create a 'navigation.xml'
```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/navigation"
    app:startDestination="@id/blankFragment1">

    <fragment
        android:id="@+id/blankFragment1"
        android:name="com.cloudwu.navigationui.BlankFragment1"
        android:label="fragment_blank1"
        tools:layout="@layout/fragment_blank1" />
    <fragment
        android:id="@+id/blankFragment2"
        android:name="com.cloudwu.navigationui.BlankFragment2"
        android:label="fragment_blank2"
        tools:layout="@layout/fragment_blank2" />
    <fragment
        android:id="@+id/blankFragment3"
        android:name="com.cloudwu.navigationui.BlankFragment3"
        android:label="fragment_blank3"
        tools:layout="@layout/fragment_blank3" />
</navigation>
```

2. Create a 'menu.xml'
Let id of fragment and item match, it will navigate automatically
```xml=
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">

        <item android:id="@+id/blankFragment1" android:title="Item 1"/>
        <item android:id="@+id/blankFragment2" android:title="Item 2"/>
        <item android:id="@+id/blankFragment3" android:title="Item 3"/>
    </group>
</menu>
```

3. Edit 'activity_main.xml'
```xml=
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
    <fragment
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:id="@+id/nav_host_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/navigation" />

    <!-- Container for contents of drawer - use NavigationView to make configuration easier -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/menu"
        android:fitsSystemWindows="true" />

</androidx.drawerlayout.widget.DrawerLayout>
```

4. Add code in MainActivity class
```kotlin=
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val navController = nav_host_fragment.findNavController()

    nav_view.setupWithNavController(navController)
}
```

5. Now the item will navigate automatically

## Auto manage bar title and toggle button
```kotlin=
class MainActivity : AppCompatActivity() {

    private lateinit var navController: NavController
    private lateinit var appBarConfiguration: AppBarConfiguration

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

        navController = nav_host_fragment.findNavController()

        appBarConfiguration = AppBarConfiguration(navController.graph, drawer_layout)

        nav_view.setupWithNavController(navController)

        setupActionBarWithNavController(navController, appBarConfiguration)
    }

    override fun onSupportNavigateUp(): Boolean {

        return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
    }

}
```

## Appearance
First view
![](https://i.imgur.com/9lWZtBw.png)
Side menu view
![](https://i.imgur.com/l9Uz46H.png)
Switch to another fragment view
![](https://i.imgur.com/E5kLIId.png)

Because...
```kotlin=12
appBarConfiguration = AppBarConfiguration(navController.graph, drawer_layout)
```

Change to...
```kotlin=12
appBarConfiguration = AppBarConfiguration(setOf(R.id.blankFragment1,R.id.blankFragment2,R.id.blankFragment3), drawer_layout)
```



