How to implement fragment navigation using bottom navigation in Kotlin Android

How to implement fragment navigation using bottom navigation in Kotlin Android.

Here is a step-by-step tutorial on how to implement fragment navigation using bottom navigation in Kotlin Android:

Step 1: Create a new Android project in Android Studio.

Step 2: Open the activity_main.xml layout file and add the following code to create a BottomNavigationView:

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

Step 3: Create a new XML file called bottom_navigation_menu.xml in the res/menu directory. Add the following code to define the menu items for the bottom navigation:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:title="Home"
        android:icon="@drawable/ic_home" />
    <item
        android:id="@+id/navigation_dashboard"
        android:title="Dashboard"
        android:icon="@drawable/ic_dashboard" />
    <item
        android:id="@+id/navigation_notifications"
        android:title="Notifications"
        android:icon="@drawable/ic_notifications" />
</menu>

Step 4: Open the MainActivity.kt file and add the following code to set up the bottom navigation view and handle item selection:

class MainActivity : AppCompatActivity() {
    private lateinit var bottomNavigationView: BottomNavigationView

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

        bottomNavigationView = findViewById(R.id.bottom_navigation)
        bottomNavigationView.setOnNavigationItemSelectedListener { item ->
            when (item.itemId) {
                R.id.navigation_home -> {
                    // Replace the current fragment with the HomeFragment
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.fragment_container, HomeFragment())
                        .commit()
                    true
                }
                R.id.navigation_dashboard -> {
                    // Replace the current fragment with the DashboardFragment
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.fragment_container, DashboardFragment())
                        .commit()
                    true
                }
                R.id.navigation_notifications -> {
                    // Replace the current fragment with the NotificationsFragment
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.fragment_container, NotificationsFragment())
                        .commit()
                    true
                }
                else -> false
            }
        }

        // Set the default selected item
        bottomNavigationView.selectedItemId = R.id.navigation_home
    }
}

Step 5: Create three new Kotlin files called HomeFragment.kt, DashboardFragment.kt, and NotificationsFragment.kt for the three fragments.

Step 6: Add the following code to each fragment file to create the fragment layout:

class HomeFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_home, container, false)
    }
}

class DashboardFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_dashboard, container, false)
    }
}

class NotificationsFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_notifications, container, false)
    }
}

Step 7: Create the layout files for the three fragments (fragment_home.xml, fragment_dashboard.xml, fragment_notifications.xml) and add the desired UI components.

Step 8: Run the app on an emulator or a physical device to see the bottom navigation in action. You should be able to switch between the three fragments by tapping on the corresponding menu items.

That's it! You have successfully implemented fragment navigation using bottom navigation in Kotlin Android. Now you can further customize each fragment and add functionality as needed.