BottomNavigation with Kotlin. Use Fragments with Kotlin.

Hello Guys, Here i'm showing you demo of BottomNavigation with Kotlin also you can find how to create fragment and attach fragment to activity using Kotlin.

Here we have three different fragment for three different tabs in bottom navigation

1) Create Fragment layout 1 : fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textViewHome"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Home"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:drawableTop="@drawable/ic_home_black_24dp"/>

    <EditText
        android:id="@+id/editTextHome"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        />
</RelativeLayout>

2) Create Fragment layout 2 : fragment_dashboard.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textViewDashboard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Dashboard"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:drawableTop="@drawable/ic_dashboard_black_24dp"/>

    <EditText
        android:id="@+id/editTextDashboard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        />
</RelativeLayout>

3) Create Fragment layout 3 : fragment_notification.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textViewNotifiation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Notification"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:drawableTop="@drawable/ic_notifications_black_24dp"/>

    <EditText
        android:id="@+id/editTextNotification"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        />
</RelativeLayout>

4) Create Fragment file for HomeFragment : FragmentHome.kt

package fragment

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.EditText
import com.example.chirag.kotlindemo.R

/**
 * Created by chirag on 31/7/17.
 */
class FragmentHome : Fragment() {
    /**
     * Initialize newInstance for passing paameters
     */
    companion object {
        fun newInstance(): FragmentHome {
            var fragmentHome = FragmentHome()
            var args = Bundle()
            fragmentHome.arguments = args
            return fragmentHome
        }

    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }


    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var rootView = inflater!!.inflate(R.layout.fragment_home, container, false)
        return rootView
    }

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

        var editTextHome = view!!.findViewById(R.id.editTextHome) as EditText
    }
}

5) Create Fragment file for DashboardFragment : FragmentDashboard.kt

package fragment

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.chirag.kotlindemo.R

/**
 * Created by chirag on 31/7/17.
 */
class FragmentDashboard : Fragment(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var rootView = inflater!!.inflate(R.layout.fragment_dashboard, container, false)
        return rootView
    }
}

6) Create Fragment file for notificationFragment : FragmentNotification.kt

package fragment

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.chirag.kotlindemo.R

/**
 * Created by chirag on 31/7/17.
 */
class FragmentNotification : Fragment(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var rootView = inflater!!.inflate(R.layout.fragment_notification, container, false)
        return rootView
    }
}

7) Finally Create MainActivity layout file : activity_bottom_navigation.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.chirag.kotlindemo.BottomNavigationActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation" />

</LinearLayout>

8) Create menu file for bottom navigation option under res/menu/navigation.xml :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

9) Create activity BottomNavigationActivity.kt

package com.example.chirag.kotlindemo

import android.os.Bundle
import android.support.design.widget.BottomNavigationView
import android.support.v4.app.Fragment
import android.support.v7.app.AppCompatActivity
import android.view.MenuItem
import android.widget.FrameLayout
import fragment.FragmentDashboard
import fragment.FragmentHome
import fragment.FragmentNotification


class BottomNavigationActivity : AppCompatActivity() {

    private var content: FrameLayout? = null

    private val mOnNavigationItemSelectedListener = object : BottomNavigationView.OnNavigationItemSelectedListener {

        override fun onNavigationItemSelected(item: MenuItem): Boolean {
            when (item.itemId) {
                R.id.navigation_home -> {

                    val fragment = FragmentHome.Companion.newInstance()
                    addFragment(fragment)

                    return true
                }
                R.id.navigation_dashboard -> {
                    val fragment = FragmentDashboard()
                    addFragment(fragment)
                    return true
                }
                R.id.navigation_notifications -> {
                    var fragment = FragmentNotification()
                    addFragment(fragment)
                    return true
                }
            }
            return false
        }

    }

    /**
     * add/replace fragment in container [framelayout]
     */
    private fun addFragment(fragment: Fragment) {
        supportFragmentManager
                .beginTransaction()
                .setCustomAnimations(R.anim.design_bottom_sheet_slide_in, R.anim.design_bottom_sheet_slide_out)
                .replace(R.id.content, fragment, fragment.javaClass.getSimpleName())
                .addToBackStack(fragment.javaClass.getSimpleName())
                .commit()
    }

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

        content = findViewById(R.id.content) as FrameLayout
        val navigation = findViewById(R.id.navigation) as BottomNavigationView
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)


        val fragment = FragmentHome.Companion.newInstance()
        addFragment(fragment)
    }

}

Do same like above...Good Luck ;)