# Örnek-5: Navigation Komponenti ile BottomNavigationView Kullanımı

Bu örneğimizi aslında bir önceki örneğimiz olan **Örnek-4** içerisinde anlatmayı planlıyordum ancak üç UI komponentinin kodları bir arada yeterince kafa karışıklığına sebebiyet vermemesi için özellikle ayırdım.  Aynı zaman Navigation komponentinin gerçekten navigasyonu ne kadar kolaylaştırdığını göstermek için de bir UI komponentini tek olarak göstermek güzel bir fırsattı.

Öncelikle menümüzü oluşturacak **menu\_bottom\_nav.xml** ismiyle oluşturduğum menü dosyası, aşağıdaki gibi olacaktır.

```markup
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/blankFragment"
        android:icon="@android:drawable/ic_lock_idle_alarm"
        android:title="Fragment" />
    <item
        android:id="@+id/navigation"
        android:icon="@android:drawable/ic_btn_speak_now"
        android:title="Navigation" />
    <item
        android:id="@+id/blankFragment4"
        android:icon="@android:drawable/ic_menu_camera"
        android:title="Fragment4" />
    <item
        android:id="@+id/blankFragment5"
        android:icon="@android:drawable/ic_menu_mylocation"
        android:title="Fragment5" />
</menu>
```

Kullandığım bağlantılarda hali hazırda **nav\_graph.xml** ile daha önce de kullandığımız **destination**'ları kullandım. Aynı zamanda örnek için kullandığım ikon dosyaları da Android'in core ikonları arasında.

> Ben örneğe 4 menü ekledim. Ancak BottomNavigationView 5 menüye kadar kullanım izni verir. Daha fazlasını kullanamazsınız.

**activitiy\_main.xml** dosyamızı da aşağıdaki gibi güncelleyip, **BottomNavigationView** bileşenini ekleyelim.

```kotlin
<?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"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    tools:openDrawer="start">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true"
            android:theme="@style/AppTheme.AppBarOverlay">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </com.google.android.material.appbar.AppBarLayout>

        <fragment
            android:id="@+id/nav_host_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:defaultNavHost="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/appbar"
            app:navGraph="@navigation/nav_graph" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_nav"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@color/colorPrimary"
            app:itemIconTint="@color/white"
            app:itemTextColor="@color/white"
            app:labelVisibilityMode="selected"
            app:menu="@menu/menu_bottom_nav" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <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"
        android:background="@android:color/white"

        android:fitsSystemWindows="true"
        android:isScrollContainer="true"
        android:saveEnabled="true"
        android:scrollY="1dp"
        android:scrollbars="none"
        app:elevation="2dp"
        app:headerLayout="@layout/nav_header"
        app:insetForeground="@color/colorPrimaryDark"

        app:itemIconTint="@color/colorPrimaryDark"
        app:menu="@menu/navigation_menu" />

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

Menüyü eklediğime göre artık **MainActivity.kt** içerinde gerekli değişiklikleri yapmaya başlayabiliriz. İlk olarak **onCreate** metodunu aşağıdaki gibi düzenliyorum.

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

    drawerLayout = findViewById(R.id.drawer_layout)
    navView = findViewById(R.id.nav_view)
    toolbar = findViewById(R.id.toolbar)
    bottomNav = findViewById(R.id.bottom_nav)

    navController = findNavController(R.id.nav_host_fragment)
    appBarConfig = AppBarConfiguration(navController.graph, drawerLayout)

    setupActionBar(navController, appBarConfig)
    setupNavigationController(navController)
    setupBottomNavMenu(navController)
}
```

Dikkat ettiğiniz üzere yeni olarak aşağıdaki kod satırlarım eklenmiş oldu.

```kotlin
navView = findViewById(R.id.nav_view)
setupBottomNavMenu(navController)
```

**setupBottomNavMenu** isimli metodun içeriği ise şöyle oluştu.

```kotlin
private fun setupBottomNavMenu(navController: NavController) {
    bottomNav.setupWithNavController(navController)
}
```

Bir önceki örneğimizde de öğrenmiş olduğumuz gibi **bottomNav** isimlik **BottomNavigationView** bileşenini **setupWithNavController** metodu ile **Navigation** komponentinin ellerine bıraktık.

![BottomNavigationView](/files/-M-n85rjjpnkf9lP3ll1)

İnanmayacaksınız ama bütün yapacağımız bu kadar!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://egemen-mede.gitbook.io/jetpack-navigation/11.-talk-is-cheap-show-me-the-code/oernek-5-navigation-komponenti-ile-bottomnavigationview-kullanimi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.