{"id":36941,"date":"2024-11-01T09:53:30","date_gmt":"2024-11-01T09:53:30","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=36941"},"modified":"2024-11-01T11:42:56","modified_gmt":"2024-11-01T11:42:56","slug":"%d0%baotlin-android-app-development-course-drawer-layout-side-screen-configuration","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/36941\/","title":{"rendered":"\u041aotlin Android App Development Course, Drawer Layout &#8211; Side Screen Configuration"},"content":{"rendered":"<p><body><\/p>\n<p>While developing Android applications, there are many UI components that help users seamlessly navigate through various menus and screens within the application. Among them, <strong>Drawer Layout<\/strong> 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.<\/p>\n<h2>What is Drawer Layout?<\/h2>\n<p>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.<\/p>\n<h2>Components of Drawer Layout<\/h2>\n<p>Drawer Layout consists of the following main elements:<\/p>\n<ul>\n<li><strong>DrawerLayout:<\/strong> The layout that contains the drawer.<\/li>\n<li><strong>NavigationView:<\/strong> The component that defines menu items inside the drawer.<\/li>\n<li><strong>MainActivity:<\/strong> The activity that forms the main screen.<\/li>\n<\/ul>\n<h2>Implementing Drawer Layout<\/h2>\n<p>Now, let&#8217;s implement the Drawer Layout directly. You can set up the project and write the code following the steps below.<\/p>\n<h3>Step 1: Create a New Android Project<\/h3>\n<pre><code>Open Android Studio and create a new project. Select \"Empty Activity\" or \"Basic Activity\". Choose Kotlin and set the project name.<\/code><\/pre>\n<h3>Step 2: Modify the build.gradle File<\/h3>\n<p>You need to add the necessary dependencies to use Drawer Layout and Navigation View. Add the following to your app-level <code>build.gradle<\/code> file:<\/p>\n<pre><code>dependencies {\n    implementation 'androidx.drawerlayout:drawerlayout:1.1.1'\n    implementation 'com.google.android.material:material:1.4.0'\n}<\/code><\/pre>\n<h3>Step 3: Configure Layout<\/h3>\n<p>Now, open the <code>activity_main.xml<\/code> file and configure the Drawer Layout.<\/p>\n<pre><code>&lt;androidx.drawerlayout.widget.DrawerLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:id=\"@+id\/drawer_layout\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".MainActivity\"&gt;\n\n    &lt;FrameLayout\n        android:id=\"@+id\/content_frame\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"&gt;\n       &lt;!-- Area for main content --&gt;\n    &lt;\/FrameLayout&gt;\n\n    &lt;com.google.android.material.navigation.NavigationView\n        android:id=\"@+id\/nav_view\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"match_parent\"\n        android:layout_gravity=\"start\" <!-- Set to open the drawer from the left -->\n        app:menu=\"@menu\/drawer_view\"&gt;\n    &lt;\/com.google.android.material.navigation.NavigationView&gt;\n\n&lt;\/androidx.drawerlayout.widget.DrawerLayout&gt;<\/code><\/pre>\n<h3>Step 4: Add Menu Resources<\/h3>\n<p>Now you need to create an XML file to define the drawer menu items. Create a file named <code>drawer_view.xml<\/code> under the <code>res\/menu\/<\/code> directory and write as follows:<\/p>\n<pre><code>&lt;menu xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\n    &lt;item\n        android:id=\"@+id\/nav_home\"\n        android:title=\"Home\" \/&gt;\n    &lt;item\n        android:id=\"@+id\/nav_gallery\"\n        android:title=\"Gallery\" \/&gt;\n    &lt;item\n        android:id=\"@+id\/nav_slideshow\"\n        android:title=\"Slideshow\" \/&gt;\n&lt;\/menu&gt;<\/code><\/pre>\n<h3>Step 5: Modify MainActivity<\/h3>\n<p>Now, in <code>MainActivity.kt<\/code>, you need to initialize the Drawer Layout and handle menu item click events. Write the code as follows:<\/p>\n<pre><code>import android.os.Bundle\nimport androidx.appcompat.app.AppCompatActivity\nimport androidx.drawerlayout.widget.DrawerLayout\nimport com.google.android.material.navigation.NavigationView\nimport android.view.MenuItem\nimport android.widget.Toast\n\nclass MainActivity : AppCompatActivity() {\n    private lateinit var drawerLayout: DrawerLayout\n    private lateinit var navigationView: NavigationView\n\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContentView(R.layout.activity_main)\n\n        drawerLayout = findViewById(R.id.drawer_layout)\n        navigationView = findViewById(R.id.nav_view)\n\n        navigationView.setNavigationItemSelectedListener { menuItem ->\n            when (menuItem.itemId) {\n                R.id.nav_home -> {\n                    Toast.makeText(this, \"Home Clicked\", Toast.LENGTH_SHORT).show()\n                }\n                R.id.nav_gallery -> {\n                    Toast.makeText(this, \"Gallery Clicked\", Toast.LENGTH_SHORT).show()\n                }\n                R.id.nav_slideshow -> {\n                    Toast.makeText(this, \"Slideshow Clicked\", Toast.LENGTH_SHORT).show()\n                }\n            }\n            drawerLayout.closeDrawers() \/\/ Close the drawer after clicking\n            true\n        }\n    }\n}<\/code><\/pre>\n<h3>Step 6: Apply and Run Drawer Layout<\/h3>\n<p>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.<\/p>\n<h2>Benefits and Considerations of Drawer Layout<\/h2>\n<p>Drawer Layout has the following benefits:<\/p>\n<ul>\n<li>Provides various navigation options<\/li>\n<li>Simplifies user experience<\/li>\n<li>Keeps the design clean<\/li>\n<\/ul>\n<p>However, there are also some considerations:<\/p>\n<ul>\n<li>On mobile devices, space must be used efficiently on small screens.<\/li>\n<li>Considering user experience, menu items should be concise and intuitive.<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>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.<\/p>\n<h2>Additional Resources<\/h2>\n<p>If you want more information, you can refer to the following resources:<\/p>\n<ul>\n<li>Official Android Development Documentation: <a href=\"https:\/\/developer.android.com\/guide\/navigation\/snav-drawer\">Navigation Drawer<\/a><\/li>\n<li>Official Kotlin Documentation: <a href=\"https:\/\/kotlinlang.org\/docs\/home.html\">Kotlin Language<\/a><\/li>\n<\/ul>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. &hellip; <a href=\"https:\/\/atmokpo.com\/w\/36941\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;\u041aotlin Android App Development Course, Drawer Layout &#8211; Side Screen Configuration&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[143],"tags":[],"class_list":["post-36941","post","type-post","status-publish","format-standard","hentry","category-kotlin-android-app-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u041aotlin Android App Development Course, Drawer Layout - Side Screen Configuration - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/36941\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u041aotlin Android App Development Course, Drawer Layout - Side Screen Configuration - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"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. &hellip; \ub354 \ubcf4\uae30 &quot;\u041aotlin Android App Development Course, Drawer Layout &#8211; Side Screen Configuration&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/36941\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:53:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:42:56+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/36941\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/36941\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"\u041aotlin Android App Development Course, Drawer Layout &#8211; Side Screen Configuration\",\"datePublished\":\"2024-11-01T09:53:30+00:00\",\"dateModified\":\"2024-11-01T11:42:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/36941\/\"},\"wordCount\":471,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"Kotlin Android app development\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/36941\/\",\"url\":\"https:\/\/atmokpo.com\/w\/36941\/\",\"name\":\"\u041aotlin Android App Development Course, Drawer Layout - Side Screen Configuration - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:53:30+00:00\",\"dateModified\":\"2024-11-01T11:42:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/36941\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/36941\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/36941\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u041aotlin Android App Development Course, Drawer Layout &#8211; Side Screen Configuration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u041aotlin Android App Development Course, Drawer Layout - Side Screen Configuration - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/36941\/","og_locale":"ko_KR","og_type":"article","og_title":"\u041aotlin Android App Development Course, Drawer Layout - Side Screen Configuration - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"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. &hellip; \ub354 \ubcf4\uae30 \"\u041aotlin Android App Development Course, Drawer Layout &#8211; Side Screen Configuration\"","og_url":"https:\/\/atmokpo.com\/w\/36941\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:53:30+00:00","article_modified_time":"2024-11-01T11:42:56+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"4\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/36941\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/36941\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"\u041aotlin Android App Development Course, Drawer Layout &#8211; Side Screen Configuration","datePublished":"2024-11-01T09:53:30+00:00","dateModified":"2024-11-01T11:42:56+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/36941\/"},"wordCount":471,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["Kotlin Android app development"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/36941\/","url":"https:\/\/atmokpo.com\/w\/36941\/","name":"\u041aotlin Android App Development Course, Drawer Layout - Side Screen Configuration - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:53:30+00:00","dateModified":"2024-11-01T11:42:56+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/36941\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/36941\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/36941\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"\u041aotlin Android App Development Course, Drawer Layout &#8211; Side Screen Configuration"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/36941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=36941"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/36941\/revisions"}],"predecessor-version":[{"id":36942,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/36941\/revisions\/36942"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=36941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=36941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=36941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}