Navigation Drawer for an Android App with source code

Navigation Drawer for an Android App with source code In this post, you’ll figure out how to show navigationdrawer in Android in kotlin language. We’ll cover how to utilize the.
DrawerLayout and NavigationView if you are new to Android Development this post will make you understand some of structure used in Android programming.
 The image below is an example of navigation drawer,  The user can view the navigation drawer when they touch menu icon.
How to add Navigation Drawer in Android, follow the steps below
#1. Open blank activity
Launch android studio and give your first application any name
After creating process has finished you can see project structure as shown in the image below.

#1 Adding dependencies .
This are found in build.gradle located in the following directory after android studio is launched           /app/build.gradle before we add any code to build.gradle let’s discuss few things about dependencies.
1. What are dependencies ?
2. Why do we add dependencies ?
In Android Studio, dependencies allows us to include external library or local jar files or other library modules in our Android project.
Example: Suppose I want to show some images in ImageView. But I’m using Glide Library to enhance the smoothness of application. So I have to add a dependency in the build.gradle(Module App) as:
compile ‘com.github.bumptech.glide:glide:3.7.0’
So Now I can use Glide library 🙂 and show my images. This makes it easy to manage external libraries in your project. To learn more about dependencies check here https://developer.android.com/studio/build/dependencies.html
Now open build.gradle file and add the following code below. [module-239]

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
 
android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.eufetresources.androidnavigationdrawer"
        minSdkVersion 15
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
 
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support:design:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}
Step 3. Create “drawer_view.xml” menu
Create first “Android Resource directory” and give it a name menu in the following directory /app/src/main/res/  then create resource file “drawer_view.xml” inthe follow directory /app/src/main/res/manu.
Then add the following code,


 

   
        <item
            android:id=”@+id/nav_profile”
            android:icon=”@drawable/ic_launcher_round”
            android:title=”Profile” />
        <item
            android:id=”@+id/nav_wallet”
            android:icon=”@drawable/ic_launcher_round”
            android:title=”Wallet” />
        <item
            android:id=”@+id/nav_offer”
            android:icon=”@drawable/ic_launcher_round”
            android:title=”Offers” />
        <item
            android:id=”@+id/nav_setting”
            android:icon=”@drawable/ic_launcher_round”
            android:title=”Setting” />
   




Once the above code is added you will realized the following code has an error android:icon="@drawable/ic_launcher_round" this can only be fixed by adding image icon named ic_launcher in drawable directory.  app/src/main/res/drawable/
You can download icon here Material icon download link: https://material.io/tools/icons/ and add to (app/src/main/res/drawable/      )   directory.
 



Adding code in  “activity_main.xml” layout file
Open activity_main,xml file and ad the follow code.



    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

   
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
   

   
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/drawer_view" />



Setting App Theme
 Open your “values/style.xml” and set the app theme
such as Theme.AppCompat.Light.NoActionBar: 


 
   
   
 

Adding code to MainActivity.kt
Now open MainActivity.kt file and add the following code.

package `com.eufetresource.androidnavigationdrawer
 
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.design.widget.NavigationView
import android.support.v4.view.GravityCompat
import android.support.v4.widget.DrawerLayout
import android.support.v7.app.ActionBar
import android.support.v7.widget.Toolbar
import android.view.MenuItem
import android.widget.Toast
 
class MainActivity : AppCompatActivity() {
 
    private lateinit var mDrawerLayout: DrawerLayout
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)
        val actionbar: ActionBar? = supportActionBar
        actionbar?.apply {
            setDisplayHomeAsUpEnabled(true)
            setHomeAsUpIndicator(R.mipmap.baseline_menu_white_18dp)
        }
 
        mDrawerLayout = findViewById(R.id.drawer_layout)
 
        val navigationView: NavigationView = findViewById(R.id.nav_view)
        navigationView.setNavigationItemSelectedListener { menuItem ->
            // set item as selected to persist highlight
            menuItem.isChecked = true
            // close drawer when item is tapped
            mDrawerLayout.closeDrawers()
 
            // Handle navigation view item clicks here.
            when (menuItem.itemId) {
 
                R.id.nav_profile -> {
                    Toast.makeText(this, "Profile", Toast.LENGTH_LONG).show()
                }
                R.id.nav_wallet -> {
                    Toast.makeText(this, "Wallet", Toast.LENGTH_LONG).show()
                }
                R.id.nav_offer -> {
                    Toast.makeText(this, "Offer", Toast.LENGTH_LONG).show()
                }
                R.id.nav_setting -> {
                    Toast.makeText(this, "Setting", Toast.LENGTH_LONG).show()
                }
            }
            // Add code here to update the UI based on the item selected
            // For example, swap UI fragments here
 
            true
        }
    }
 
    //appbar - toolbar button click
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            android.R.id.home -> {
                mDrawerLayout.openDrawer(GravityCompat.START)
                true
            }
 
            else -> super.onOptionsItemSelected(item)
        }
    }
}

Download Source code

 

apk

Leave a Reply

Your email address will not be published. Required fields are marked *