While developing Android applications, there are many UI components that help users seamlessly navigate through various menus and screens within the application. Among them, Drawer Layout is a side menu that users can access by swiping the edge of the screen or clicking a specific button, and it is commonly used in many Android apps. In this article, I will explain in detail how to create a simple Android app using Drawer Layout with Kotlin.
What is Drawer Layout?
Drawer Layout essentially provides a menu that users can pull from the left or right side of the screen by swiping or clicking a button. This menu generally includes multiple options or pages, aiding users in navigating through the application intuitively.
Components of Drawer Layout
Drawer Layout consists of the following main elements:
- DrawerLayout: The layout that contains the drawer.
- NavigationView: The component that defines menu items inside the drawer.
- MainActivity: The activity that forms the main screen.
Implementing Drawer Layout
Now, let’s implement the Drawer Layout directly. You can set up the project and write the code following the steps below.
Step 1: Create a New Android Project
Open Android Studio and create a new project. Select "Empty Activity" or "Basic Activity". Choose Kotlin and set the project name.
Step 2: Modify the build.gradle File
You need to add the necessary dependencies to use Drawer Layout and Navigation View. Add the following to your app-level build.gradle
file:
dependencies {
implementation 'androidx.drawerlayout:drawerlayout:1.1.1'
implementation 'com.google.android.material:material:1.4.0'
}
Step 3: Configure Layout
Now, open the activity_main.xml
file and configure the Drawer Layout.
<androidx.drawerlayout.widget.DrawerLayout
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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Area for main content -->
</FrameLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/drawer_view">
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
Step 4: Add Menu Resources
Now you need to create an XML file to define the drawer menu items. Create a file named drawer_view.xml
under the res/menu/
directory and write as follows:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_home"
android:title="Home" />
<item
android:id="@+id/nav_gallery"
android:title="Gallery" />
<item
android:id="@+id/nav_slideshow"
android:title="Slideshow" />
</menu>
Step 5: Modify MainActivity
Now, in MainActivity.kt
, you need to initialize the Drawer Layout and handle menu item click events. Write the code as follows:
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView
import android.view.MenuItem
import android.widget.Toast
class MainActivity : AppCompatActivity() {
private lateinit var drawerLayout: DrawerLayout
private lateinit var navigationView: NavigationView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
drawerLayout = findViewById(R.id.drawer_layout)
navigationView = findViewById(R.id.nav_view)
navigationView.setNavigationItemSelectedListener { menuItem ->
when (menuItem.itemId) {
R.id.nav_home -> {
Toast.makeText(this, "Home Clicked", Toast.LENGTH_SHORT).show()
}
R.id.nav_gallery -> {
Toast.makeText(this, "Gallery Clicked", Toast.LENGTH_SHORT).show()
}
R.id.nav_slideshow -> {
Toast.makeText(this, "Slideshow Clicked", Toast.LENGTH_SHORT).show()
}
}
drawerLayout.closeDrawers() // Close the drawer after clicking
true
}
}
}
Step 6: Apply and Run Drawer Layout
All setups are complete. Now you can run the app and swipe from the left edge of the screen or click the top hamburger menu to open the drawer. Clicking on the menu items will display the name of the item in a toast message.
Benefits and Considerations of Drawer Layout
Drawer Layout has the following benefits:
- Provides various navigation options
- Simplifies user experience
- Keeps the design clean
However, there are also some considerations:
- On mobile devices, space must be used efficiently on small screens.
- Considering user experience, menu items should be concise and intuitive.
Conclusion
In this article, we thoroughly examined how to implement Drawer Layout using Kotlin. Drawer Layout is an essential UI element that helps users navigate easily within an application. By utilizing this layout, you can provide a better user experience for your app. Try creating your own Drawer Layout by setting various options and designs.
Additional Resources
If you want more information, you can refer to the following resources:
- Official Android Development Documentation: Navigation Drawer
- Official Kotlin Documentation: Kotlin Language