> For the complete documentation index, see [llms.txt](https://egemen-mede.gitbook.io/jetpack-navigation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://egemen-mede.gitbook.io/jetpack-navigation/11.-talk-is-cheap-show-me-the-code/oernek-5-navigation-komponenti-ile-bottomnavigationview-kullanimi.md).

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

Bu örneğimizde Android'te sıklıkla kullanılan BottomNavigationView'in Navigation komponenti ile nasıl kullanıldığını inceleyeceğiz.

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](https://2300662549-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M-9we-f91sgtHSNx_N3%2F-M-n7jw31hA5_3vkVu84%2F-M-n85rjjpnkf9lP3ll1%2F039.jpeg?alt=media\&token=4f455f1c-38ea-45c0-9ee0-6a0e583597c3)

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