# 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  Side menu view  Switch to another fragment view  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) ```
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up