Bottom navigation in android[Koltin]

Bottom navigation with the android navigation component is a little bit tricky. I found most of the resources are activity-based. I wanna implement it inside fragment with navigation component. So let’s start step by step…

Bottom navigation screenshoot

1. res/menu/bottom_navigation_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/detailFragmentBottom"
        android:enabled="true"
        android:icon="@drawable/ic_home_24"
        android:title="@string/home"/>
    <item
        android:id="@+id/imagePickerFragmentBottom"
        android:enabled="true"
        android:icon="@drawable/ic_music_note_24"
        android:title="@string/music"/>
    <item
        android:id="@+id/expandableRecyclerViewFragmentBottom"
        android:enabled="true"
        android:icon="@drawable/ic_article_24"
        android:title="@string/article"/>
</menu>

2. res/navigation/bottom_navigation.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/bottom_navigation"
    app:startDestination="@id/detailFragmentBottom">

    <fragment
        android:id="@+id/detailFragmentBottom"
        android:name="com.piashcse.experiment.mvvm_hilt.ui.fragment.DetailFragment"
        android:label="DetailFragment" />
    <fragment
        android:id="@+id/expandableRecyclerViewFragmentBottom"
        android:name="com.piashcse.experiment.mvvm_hilt.ui.fragment.ExpandableRecyclerViewFragment"
        android:label="fragment_expandable_recycler_view"
        tools:layout="@layout/fragment_expandable_recycler_view" />
    <fragment
        android:id="@+id/imagePickerFragmentBottom"
        android:name="com.piashcse.experiment.mvvm_hilt.ui.fragment.ImagePickerFragment"
        android:label="fragment_image_picker"
        tools:layout="@layout/fragment_image_picker" />

</navigation>

3. res/layout/fragment_bottom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.fragment.BottomNavigationFragment">
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment_bottom_navigation"
        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_toTopOf="parent"
        app:navGraph="@navigation/bottom_navigation" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_navigation_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

4. BottomNavigationFragment.kt

package com.piashcse.experiment.mvvm_hilt.ui.fragment

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.navigation.NavController
import androidx.navigation.fragment.NavHostFragment
import androidx.navigation.ui.setupWithNavController
import com.piashcse.experiment.mvvm_hilt.R
import com.piashcse.experiment.mvvm_hilt.databinding.FragmentBottomNavigationBinding
import com.piashcse.experiment.mvvm_hilt.utils.hide
import com.piashcse.experiment.mvvm_hilt.utils.show
import dagger.hilt.android.AndroidEntryPoint

@AndroidEntryPoint
class BottomNavigationFragment : Fragment() {
    private var _binding: FragmentBottomNavigationBinding? = null
    private val binding get() = requireNotNull(_binding) // or !!_binding
    private lateinit var navController: NavController
    private lateinit var navHostFragment: NavHostFragment
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        // Inflate the layout for this fragment
        _binding = FragmentBottomNavigationBinding.inflate(layoutInflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        initView()
    }

    fun initView() {
        navHostFragment =
            childFragmentManager.findFragmentById(R.id.nav_host_fragment_bottom_navigation) as NavHostFragment
        navController = navHostFragment.navController
        binding.bottomNavigation.setupWithNavController(navController)
        navController.addOnDestinationChangedListener { _, destination, _ ->
            when (destination.id) {
                R.id.detailFragmentBottom, R.id.expandableRecyclerViewFragmentBottom, R.id.imagePickerFragmentBottom -> {
                    binding.bottomNavigation.show()
                }
                else ->
                    binding.bottomNavigation.hide()
            }
        }
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }

}

Github: https://github.com/piashcse/blog_piashcse_code/tree/master/MVVM_Hilt

Ref: https://piashcse.medium.com/bottom-navigation-in-android-koltin-42c746b3ddf4