Ö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.

<?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.

<?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.

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.

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

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

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

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