What is Navigation Drawer

Navigation drawer is a sliding panel that contain app’s navigation menu. This panel is hidden when not in use. To open the Navigation drawer we need to touch the navigation icon in the left edge of the screen.

How To build the Navigation Drawer in Kotlin?

Follow the below steps to build the Navigation Drawer in Kotlin.

Step 1

Create new kotlin project

Create a new Kotlin project using Android studio 3. If you don’t know How to do that please read my previous post.

Now Select the “Navigation Drawer Activity”.

Now click “Finish” it will create the kotlin project with Default Navigation Drawer.

We have successfully created the Navigation Drawer project with kotlin support.

Step 2

Add Util.kt File

Util.kt is the kotlin file which will help us to replace the main content when we click on the navigation menu.

Util.kt

package com.mad.kotlin_navigation_drawer

import android.app.Fragment
import android.support.annotation.IdRes
import android.support.v7.app.AppCompatActivity

/**
 * Created by nir21 on 23-01-2018.
 */
fun AppCompatActivity.replaceFragmenty(fragment: Fragment,
                                       allowStateLoss: Boolean = false,
                                       @IdRes containerViewId: Int) {
    val ft = fragmentManager
            .beginTransaction()
            .replace(containerViewId, fragment)
    if (!supportFragmentManager.isStateSaved) {
        ft.commit()
    } else if (allowStateLoss) {
        ft.commitAllowingStateLoss()
    }
}

Step 3

Add the Fragments

Step 4

Change MainActivity.kt file

MainActivity.kt

package com.mad.kotlin_navigation_drawer

import android.os.Bundle
import android.support.design.widget.Snackbar
import android.support.design.widget.NavigationView
import android.support.v4.view.GravityCompat
import android.support.v7.app.ActionBarDrawerToggle
import android.support.v7.app.AppCompatActivity
import android.view.Menu
import android.view.MenuItem
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.app_bar_main.*

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

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

        fab.setOnClickListener { view ->
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show()
        }

        val toggle = ActionBarDrawerToggle(
                this, drawer_layout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close)
        drawer_layout.addDrawerListener(toggle)
        toggle.syncState()

        nav_view.setNavigationItemSelectedListener(this)
    }

    override fun onBackPressed() {
        if (drawer_layout.isDrawerOpen(GravityCompat.START)) {
            drawer_layout.closeDrawer(GravityCompat.START)
        } else {
            super.onBackPressed()
        }
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        // Inflate the menu; this adds items to the action bar if it is present.
        menuInflater.inflate(R.menu.main, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        when (item.itemId) {
            R.id.action_settings -> return true
            else -> return super.onOptionsItemSelected(item)
        }
    }

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        // Handle navigation view item clicks here.
        when (item.itemId) {
            R.id.nav_camera -> {
                // Handle the camera action
                replaceFragmenty(
                        fragment = Fragment1(),
                        allowStateLoss = true,
                        containerViewId = R.id.mainContent
                )
                setTitle("Import")
            }
            R.id.nav_gallery -> {
                replaceFragmenty(
                        fragment = Fragment2(),
                        allowStateLoss = true,
                        containerViewId = R.id.mainContent
                )
                setTitle("Gallery")
            }
            R.id.nav_slideshow -> {
                replaceFragmenty(
                        fragment = Fragment3(),
                        allowStateLoss = true,
                        containerViewId = R.id.mainContent
                )
                setTitle("Slideshow")
            }
            R.id.nav_manage -> {
                replaceFragmenty(
                        fragment = Fragment4(),
                        allowStateLoss = true,
                        containerViewId = R.id.mainContent
                )
                setTitle("Tools")
            }
            R.id.nav_share -> {
                replaceFragmenty(
                        fragment = Fragment5(),
                        allowStateLoss = true,
                        containerViewId = R.id.mainContent
                )
                setTitle("Share")
            }
            R.id.nav_send -> {
                replaceFragmenty(
                        fragment = Fragment6(),
                        allowStateLoss = true,
                        containerViewId = R.id.mainContent
                )
                setTitle("Send")
            }
        }

        drawer_layout.closeDrawer(GravityCompat.START)
        return true
    }
}

Now Navigation Drawer project is ready to run.