Bottom Navigation in Android With Fragment (Kotlin) With Source Code.

Hello Everyone,

In Android, there are many options for making navigation easy in your application for the user. Bottom Navigation Bar is one of them. Bottom Navigation Bar always stays at the bottom of your application and provides navigation between the views of your application. So in this Bottom Navigation Android Example, we will see how we combine the Bottom Navigation and Fragments.

Step 1: Create a Android Project.

            

            Create a Android Project with Kotlin Language. 

Step 2: Create Menu File.

            

            In this, We will Create Three Fragment Like Home, Chat, Setting.

            So For that First We have to Create Menu item File as Below.

nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:id="@+id/menuHome"

        android:icon="@drawable/ic_home"

        android:title="Home"  />

    <item

        android:id="@+id/menuChat"

        android:icon="@drawable/ic_chat"

        android:title="Chat" />

    <item

        android:id="@+id/menuSetting"

        android:icon="@drawable/ic_setting"

        android:title="Setting" />

</menu>

Step 3 : Open Main Activity and Put BottomNav and Frame Layout.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <include

        layout="@layout/toolbar"

        android:id="@+id/hometoolbar"/>

    <FrameLayout

        android:id="@+id/container"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1" />

    <com.google.android.material.bottomnavigation.BottomNavigationView

        android:id="@+id/bottomNavigationView"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_gravity="bottom"

        android:background="@color/white"

        app:itemBackground="@color/white"

        app:itemIconTint="@color/black"

        app:itemTextColor="@color/black"

        app:labelVisibilityMode="labeled"

        app:menu="@menu/bottom_navigation_menu" />

</LinearLayout>

Step 4: Create three Fragment -- Home, Chat, Setting.

            Right Click on Package -> New -> Fragment -> Fragment (Blank).

            Create Three Fragment Same as Above.

Step 5 : In Open MainActivity.kt File and Paste the Below Code.

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        loadFragment(HomeFragment())

        var bottomNav = findViewById(R.id.bottomnav) as BottomNavigationView

        bottomNav.setOnNavigationItemReselectedListener {

            when(it.itemId){

                R.id.home -> {

                    loadFragment(HomeFragment())

                    return@setOnNavigationItemReselectedListener true

                }

                R.id.chat ->

                {

                    loadFragment(ChatFragment())

                    return@setOnNavigationItemReselectedListener true

                }

                R.id.Setting -> {

                    loadFragment(SettingFragment())

                    return@setOnNavigationItemReselectedListener true

                }

                else -> false

            }

        }

    }

    private  fun loadFragment(fragment: Fragment){

        val transaction = supportFragmentManager.beginTransaction()

        transaction.replace(R.id.container,fragment)

        transaction.addToBackStack(null)

        transaction.commit()

    }

}

If you want to understand this code do watch the tutorial on YouTube.

Thank You !! Share With Your Friends 

Dream Developers - Unlock the knowleage