10/27/2019 Navigation Drawer Android Kotlin With Fragments Material Design

All Android Tutorials

iOS
UITableView
Listview/RecyclerView
Kotlin

Android Basic Concepts

DemoNuts Lets begin learning!

FOLLOW: ANDROID / KOTLIN / NAVIGATION MORE
     DRAWER/TAB LAYOUT
iOS 2
UITableView
Kotlin
Google
Push Notification/ Cloud messaging
Listview/RecyclerView
Navigation Drawer/Tab Layout
PHP
Facebook Replay

SQLite
WebView
Android
About us
Privacy Policy Navigation Drawer In
Contact us

Millions of high-quality
Android Kotlin With
Fragments And
clips, now on rotation

Search Now

Material Design
Example
BY EDITORIAL TEAM ·
LATEST POSTS
SEARCH TUTORIALS Today’s tutorial is Navigation Drawer Android Kotlin
 Kotlin
With Fragments And Material Design Example.
 To search type and hit enter ExpandableListView With
Navigation Drawer Android Kotlin example guides CheckBox Android |
you to create a sliding navigation menu with Multiple checkboxes
ANDROID BASIC TUTORIALS recyclerview.
 Android Login And
Navigation Drawer Android Kotlin tutorial uses Register Using Volley
# LinearLayout fragments for navigation purpose. PHP MySQL Session
Manage
Visit this for more information about navigation
# RelativeLayout
drawer.  Android Login

First, check the output and then follow all the Registration Using
# SQLite Basics
steps.

/
10/27/2019
# VideoView
# Expandable ListView
# Runtime Permissions
With Example
RECENT POSTS
 Kotlin ExpandableListView With
CheckBox Android | Multiple
checkboxes
 Android Login And Register
Using Volley PHP MySQL Session
Manage
 Android Login Registration Using
Retrofit Session Management
Tutorial
 Kotlin Take Screenshot
Programmatically And Share |
Particular Layout
 Kotlin RecyclerView Swipe To
Delete Android Like Gmail
Navigation Drawer Android Kotlin With Fragments Material Design
Retrofit Session
drawer basic kotlin android
Management Tutorial
 Kotlin Take Screenshot
Programmatically And
Share | Particular Layout
 Kotlin RecyclerView
Swipe To Delete Android
Like Gmail
 Kotlin Swipe To Delete
ListView Android
Step 1: Create a new project Example Like Gmail
in Android Studio.  Kotlin RecyclerView
Step 2: Update With Edittext Android |
Get/Set text Value
build.gradle(Module:app) file
 Kotlin ListView With
Add below in build.gradle(Module:app) file
EditText | Get/Set
compile 'com.android.support:recyclerview-v7:26.0.2' Values Of EditText In
Final code for build.gradle(Module:app) ListView
apply plugin: 'com.android.application'  Kotlin RecyclerView
apply plugin: 'kotlin-android' Search Using EditText |
apply plugin: 'kotlin-android-extensions' Search Filter Android
android {
compileSdkVersion 26  Kotlin RecyclerView
defaultConfig {
applicationId "com.example.parsaniahardik.kotlindrawerb SearchView Example
minSdkVersion 15
targetSdkVersion 22 Tutorial | Search Filter
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.A
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation"org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_
implementation 'com.android.support:appcompat-v7:26.0.2'
implementation 'com.android.support.constraint:constraint-l
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runne
androidTestImplementation 'com.android.support.test.espres
compile 'com.android.support:recyclerview-v7:26.0.2'
}
Step 3: Preparing two
fragments
Create two fragments and give them name as
“FriendListFragment” and
“NotificationFragment.”
Add below code in fragment_friend_list.xml
/
10/27/2019
Flight delayed?
You can get up to 600
Euros for your delayed or
cancelled ight
RECENT COMMENTS
 Frank on Android RecyclerView
with EditText Example
 Alicia on Current Location
Latitude Longitude Android Studio
Tutorial
 Hassan on Android Custom
Camera Tutorial Example Using
Surfaceview Programmatically
 Asotes on Android Image Slider
From URL | Fetch Image From
Server URL
 Henry on Image Slider With
Slideshow Using Viewpager
Android Studio Example
Navigation Drawer Android Kotlin With Fragments Material Design
<FrameLayout xmlns:android="http://schemas.android.com/apk
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:background="#4aef44"
android:textColor="#fff"
android:text="Friends List" />
</FrameLayout>
Add below code in FriendListFragment.kt
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
class FriendListFragment : Fragment() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
override fun onCreateView(inflater: LayoutInflater?, containe
savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment
return inflater!!.inflate(R.layout.fragment_friend_list, conta
}
Copy following source code in
fragment_notification.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:background="@color/colorAccent"
android:textColor="#fff"
android:text="Notification" />
</FrameLayout>
Copy following code in NotificationFragment.kt
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
class NotificationFragment : Fragment() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
}
override fun onCreateView(inflater: LayoutInflater?, containe
savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment
return inflater!!.inflate(R.layout.fragment_notification, con
}
}
Step 4: Adding images
/
10/27/2019 Navigation Drawer Android Kotlin With Fragments Material Design
Download images and copy them into “drawable”
directory.
Best Selling a Spy On Any a

Download icons
Android Spy a VPN For a

Android App a Top 10 a Step 5: Updating strings.xml

Mobile a Best Small a and styles.xml
Upcoming a GPS a Update string.xml as per below code

Best Selling Android a Spy On Any Cell Phone a

Android Spy Apps a VPN For Android a

1. APPS FOR ANDROID a

Android App a Top 10 Android Phones a

2. FREE ANDROID APPS & GAMES a Mobile Application a GPS Navigation a

3. ANDROID APP DEVELOPMENT a Upcoming Android a Apps For Android a

4. GPS NAVIGATION SOFTWARE a

<resources>
5. ANDROID APK APP DOWNLOAD a <string name="app_name">KotlinDrawerBasic</string>

<!-- TODO: Remove or change this placeholder text -->

6. HOW TO FIX GMAIL PROBLEMS a <string name="drawer_open">Open</string>
<string name="drawer_close">Close</string>
<string name="hello_blank_fragment">Hello blank fragment</s
7. BEST SELLING ANDROID PHONES a </resources>

Update styles.xml as following

8. CHEAP ANDROID PHONES
9. TOP 10 ANDROID SMARTPHONES
10 BEST ANDROID
10.
SMARTPHONES
11. LATEST ANDROID PHONES
12. BEST ANDROID SPY APPS
a
<resources>
<!-- Base application theme. -->
a <style name="AppTheme" parent="Theme.AppCompat.Light.
<!-- Customize your theme here. -->
<item name="windowNoTitle">true</item>
a <item name="windowActionBar">false</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDar
a <item name="colorAccent">@color/colorAccent</item>
</style>
a </resources>

Step 6: Adding toolbar.xml

Create new layout resource file and give it name as
“toolbar.xml”

Copy below source code in it.

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

<android.support.v7.widget.Toolbar xmlns:android="http://sche
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionB
local:popupTheme="@style/ThemeOverlay.AppCompat.Light

Step 7: Creating lv_item.xml

file
Make a new layout resource file named
“lv_item.xml”

/
10/27/2019 Navigation Drawer Android Kotlin With Fragments Material Design
This file is a recyclerview item file. Add below
code in it

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

<LinearLayout xmlns:android="http://schemas.android.com/apk
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:clickable="true">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ivicon"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:src="@drawable/notification"/>

<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:paddingLeft="10dp"
android:paddingTop="7dp"
android:text="Noti"
android:paddingBottom="10dp"
android:textSize="15dp"
android:textStyle="bold" />

</LinearLayout>

Step 8: Creating Model

Create a new Kotlin class named “DrawerModel”
and add following code

import android.R.attr.name

/**
* Created by Parsania Hardik on 16-Feb-18.
*/
class DrawerModel {

var name: String? = null

var image: Int = 0

fun getImages(): Int {

return image
}

fun setImages(image: Int) {

this.image = image
}

fun getNames(): String? {

return name
}

fun setNames(name: String) {

this.name = name
}

Step 9: Making Recyclerview

Adapter
Create a new Kotlin class named
“DrawerAdapter” and paste below code

/**
* Created by Parsania Hardik on 16-Feb-18.
*/
import android.content.Context
import android.view.LayoutInflater
import android.support.v7.widget.RecyclerView
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import java.util.ArrayList

/
10/27/2019 Navigation Drawer Android Kotlin With Fragments Material Design
class DrawerAdapter(private val context: Context, arrayList: Arra

internal var arrayList = ArrayList<DrawerModel>()

private val inflater: LayoutInflater

init {
inflater = LayoutInflater.from(context)
this.arrayList = arrayList
}

override fun onCreateViewHolder(parent: ViewGroup, viewTy

val view = inflater.inflate(R.layout.lv_item, parent, false)
return ViewHolder(view)
}

override fun onBindViewHolder(holder: ViewHolder, position:

holder.title.setText(arrayList[position].getNames())
holder.ivicon.setImageResource(arrayList[position].getIma
}

override fun getItemCount(): Int {

return arrayList.size
}

inner class ViewHolder(itemView: View) : RecyclerView.ViewH

var title: TextView
var ivicon: ImageView

init {
title = itemView.findViewById(R.id.name) as TextView
ivicon = itemView.findViewById(R.id.ivicon) as ImageVie
}
}
}

Step 10: Creating

DrawerFragment
Make a new fragment named DrawerFragment.

Add below source code in fragment_drawer.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#e45a2c">

<RelativeLayout
android:id="@+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:background="#4fe7ec">

<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@mipmap/ic_launcher"
android:scaleType="fitCenter"
android:layout_centerInParent="true" />

</RelativeLayout>

<android.support.v7.widget.RecyclerView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp" />

</LinearLayout>

Add following source code into

DrawerFragment.kt

/
10/27/2019 Navigation Drawer Android Kotlin With Fragments Material Design

/**
* Created by Parsania Hardik on 16-Feb-18.
*/
import android.content.Context
import android.os.Bundle
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentTransaction
import android.support.v4.widget.DrawerLayout
import android.support.v7.app.ActionBarDrawerToggle
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView
import android.support.v7.widget.Toolbar
import android.view.GestureDetector
import android.view.LayoutInflater
import android.view.MotionEvent
import android.view.View
import android.view.ViewGroup
import java.util.ArrayList

class DrawerFragment : Fragment() {

private var views: View? = null

private var mDrawerToggle: ActionBarDrawerToggle? = null
private var mDrawerLayout: DrawerLayout? = null
private var drawerAdapter: DrawerAdapter? = null
private var containerView: View? = null
private var recyclerView: RecyclerView? = null
private val names = arrayOf("Friends List", "Notification")
private val images = intArrayOf(R.drawable.friendlist, R.drawa

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

override fun onCreateView(inflater: LayoutInflater?, containe

savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment
views = inflater!!.inflate(R.layout.fragment_drawer, contain
recyclerView = views!!.findViewById<View>(R.id.listview) as
drawerAdapter = DrawerAdapter(activity, populateList())

recyclerView!!.adapter = drawerAdapter
recyclerView!!.layoutManager = LinearLayoutManager(activ
recyclerView!!.addOnItemTouchListener(RecyclerTouchList
override fun onClick(view: View, position: Int) {
openFragment(position)
mDrawerLayout!!.closeDrawer(containerView)
}

override fun onLongClick(view: View?, position: Int) {

}
}))

openFragment(0)

return views
}

private fun openFragment(position: Int) {

when (position) {
0 -> removeAllFragment(FriendListFragment(), "Friends
1 -> removeAllFragment(NotificationFragment(), "Notifia

else -> {
}
}
}

fun removeAllFragment(replaceFragment: Fragment, tag: Stri

val manager = activity.supportFragmentManager
/
10/27/2019 Navigation Drawer Android Kotlin With Fragments Material Design
val ft = manager.beginTransaction()
manager.popBackStackImmediate(null, FragmentManager

ft.replace(R.id.container_body, replaceFragment)
ft.commitAllowingStateLoss()
}

fun setUpDrawer(fragmentId: Int, drawerLayout: DrawerLayo

containerView = activity.findViewById(fragmentId)
mDrawerLayout = drawerLayout
mDrawerToggle = object : ActionBarDrawerToggle(activity,
override fun onDrawerOpened(drawerView: View?) {
super.onDrawerOpened(drawerView)
activity.invalidateOptionsMenu()
}

override fun onDrawerClosed(drawerView: View?) {

super.onDrawerClosed(drawerView)
activity.invalidateOptionsMenu()
}

override fun onDrawerSlide(drawerView: View?, slideOff

super.onDrawerSlide(drawerView, slideOffset)
toolbar.alpha = 1 - slideOffset / 2
}
}

mDrawerLayout!!.setDrawerListener(mDrawerToggle)
mDrawerLayout!!.post { mDrawerToggle!!.syncState() }

private fun populateList(): ArrayList<DrawerModel> {

val list = ArrayList<DrawerModel>()

for (i in names.indices) {
val drawerModel = DrawerModel()
drawerModel.name = names[i]
drawerModel.image = images[i]
list.add(drawerModel)
}
return list
}

interface ClickListener {
fun onClick(view: View, position: Int)

fun onLongClick(view: View?, position: Int)

}

internal class RecyclerTouchListener(context: Context, recycl

private val gestureDetector: GestureDetector

init {
gestureDetector = GestureDetector(context, object : Ges
override fun onSingleTapUp(e: MotionEvent): Boolean
return true
}

override fun onLongPress(e: MotionEvent) {

val child = recyclerView.findChildViewUnder(e.x, e.y
if (child != null && clickListener != null) {
clickListener.onLongClick(child, recyclerView.get
}
}
})
}

override fun onInterceptTouchEvent(rv: RecyclerView, e: M

val child = rv.findChildViewUnder(e.x, e.y)

if (child != null && clickListener != null && gestureDetect
clickListener.onClick(child, rv.getChildPosition(child))
}
return false
}

override fun onTouchEvent(rv: RecyclerView, e: MotionEve

override fun onRequestDisallowInterceptTouchEvent(disal

}
}
}

/
10/27/2019 Navigation Drawer Android Kotlin With Fragments Material Design

Step 11: Description of

DrawerFragment.java
In onCreateView() method, recyclerview is
initialized and its onClick() method is
implemented.

For recyclerview’s onClick() method

implementation, a class named
RecycletTouchListener and an interface named
ClickListener is defined.

openFragment() method will open fragment.

Here, a removeAllFragment() method is used to
remove all fragments from back stack and open a
fresh new fragment.

setUpDrawer() method will be used in

MainActivity.

Step 12: Updating

MainActivity
Copy below code into activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
android:id="@+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
</LinearLayout>

<FrameLayout
android:id="@+id/container_body"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<fragment
android:id="@+id/fragment_navigation_drawer"
android:name="com.example.parsaniahardik.kotlindrawer
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="@layout/fragment_drawer"
tools:layout="@layout/fragment_drawer" />

</android.support.v4.widget.DrawerLayout>

Update MainActivity.kt as per following

import android.support.v4.widget.DrawerLayout
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.Toolbar
import android.view.View

class MainActivity : AppCompatActivity() {

/
10/27/2019 Navigation Drawer Android Kotlin With Fragments Material Design

private var toolbar: Toolbar? = null

private var drawerFragment: DrawerFragment? = null

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

toolbar = findViewById<View>(R.id.toolbar) as Toolbar?

setSupportActionBar(toolbar)
supportActionBar!!.setDisplayShowHomeEnabled(true)
drawerFragment = supportFragmentManager.findFragmen
drawerFragment!!.setUpDrawer(R.id.fragment_navigation_
}
}

Java Version
Java version of this tutorial : Navigation Drawer
Android
Searching Perfect
Android Example In
Google
Click to get Important Google searching tips

The End for Navigation Drawer In Android Studio

example.

Comment if you have queries or want to give a

review. Thank you

Download Source Code

For Navigation Drawer
Android Kotlin tutorial
[sociallocker]KotlinDrawerBasic[/sociallocker]

Tags: android drawer fragment Kotlin navigation

recyclerview

PREVIOUS STORY NEXT STORY

Custom Android
Tablayout LinearLayout
 Android Kotlin Tutorial With 
With Custom Example | Basic
View And Icon Concepts

/
10/27/2019 Navigation Drawer Android Kotlin With Fragments Material Design

 YOU MAY ALSO LIKE...

 10 0 4

Android Android Tablayout

Shake Easy Android
Detection Runtime Studio With
Tutorial Permissions Different
Example With Dexter Actionbar/T
Sensor Library oolbar
Listener Example MenuItems
Acceleromet Tutorial For Different
er SEPTEMBER Fragments
OCTOBER 13, 20, 2018 MAY 26, 2017
2018

2 RESPONSES

 Comments 2  Pingbacks 0

Craig  August 31, 2018 at 3:52 pm

thanks for the tutorial, do you have the source code
to download?

Reply

Editorial Member

 September 1, 2018 at 4:23 am
Yes, download link is available at the end of
the tutorial.

Reply

LEAVE A REPLY

Comment

/
10/27/2019 Navigation Drawer Android Kotlin With Fragments Material Design

Name * Email *

Website

Post Comment

CATEGORIES TAGS

 Android (190) adapter android android basics

android custom dialog animation button checkbox
 Android Basic Concepts (20)
contact drawer fragment google api google

 Facebook (1) map gps handler image imageview JSON

Kotlin laravel listview
 Google (14) listview/recyclerview header location login

navigation PHP progressbar Push Notification

 Google Maps (7)
qrcode recyclerview retrofit runtime
permissions scan feature screenshot scrollview
 iOS (2)
searchview slider spinner Splash Screen sqlite
 Kotlin (42) tab layout textview videoview viewpager
volley WebView

 Laravel (30)

 Listview/RecyclerView (48)

 Navigation Drawer/Tab Layout (12)

 PHP (45)

 Push Notification/ Cloud messaging

(3)

 SQLite (4)

 UITableView (2)

 WebView (3)


DemoNuts © 2019. All Rights Reserved.
    
/
10/27/2019 Navigation Drawer Android Kotlin With Fragments Material Design