{"id":4782,"date":"2019-05-30T17:54:26","date_gmt":"2019-05-30T12:24:26","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=4782"},"modified":"2019-05-30T17:54:32","modified_gmt":"2019-05-30T12:24:32","slug":"how-to-setup-navigation-drawer-in-android-application","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/how-to-setup-navigation-drawer-in-android-application\/","title":{"rendered":"How to setup navigation drawer in android application"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to setup navigation drawer in android application<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Date : 29\/05\/2019<\/h4>\n\n\n\n<h3 class=\"wp-block-heading\">Introduction<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">With the navigation drawer one can navigate to many screens or functionalities of the app by clicking on the \u2018hamburger\u2019 icon. Swiping from the left is also a way to bring the drawer into view, a screen then slides in, showing many items. You can click on these said items and go to those screens to use that feature of the app.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"328\" height=\"533\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-49-03.png\" alt=\"\" class=\"wp-image-4785\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-49-03.png 328w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-49-03-185x300.png 185w\" sizes=\"(max-width: 328px) 100vw, 328px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1 : Create a new project<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">As the blog only  describes the setup of navigation drawer, create a fresh project. Navigation drawer can be demonstrated in existing project too.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Primarily we need a header XML file and XML file under menu category  and Navigation drawer implementation in activity&#8217;s or fragment&#8217;s XML file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2 : Create header and menu categories for Navigation drawer<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create an XML file that include Image and  other views withing image view if you want to include<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"750\" height=\"548\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-52-09.png\" alt=\"\" class=\"wp-image-4787\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-52-09.png 750w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-52-09-300x219.png 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Create XML file that this only to manage options in the navigation drawer.This should only under menu category.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"651\" height=\"677\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-47-50-1.png\" alt=\"\" class=\"wp-image-4788\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-47-50-1.png 651w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-47-50-1-288x300.png 288w\" sizes=\"(max-width: 651px) 100vw, 651px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3 : Setup menu and header with navigation drawer in Activity&#8217; XML file<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You have to setup Navigation widget inside Drawer widget in XML file. Most common use cases will have <strong><code>layout_width<\/code><\/strong> not as match parent but to a certain limit. Next need to include header file and menu file inside Navigation object.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"911\" height=\"492\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-28-03.png\" alt=\"\" class=\"wp-image-4789\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-28-03.png 911w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-28-03-300x162.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-28-03-768x415.png 768w\" sizes=\"(max-width: 911px) 100vw, 911px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4 : Essential code for navigation drawer demonstration<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You need to navigation drawer and <strong><code>NavgationView<\/code><\/strong> object to manipulate the views in activity class. You get it from <strong><code>findViewById<\/code> <\/strong>attribute in activity class. After getting drawer object, Create a hamburger in action bar and sync it. Then put listener for <strong><code>NavigationView<\/code><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"983\" height=\"247\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-44-41.png\" alt=\"\" class=\"wp-image-4794\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-44-41.png 983w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-44-41-300x75.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-44-41-768x193.png 768w\" sizes=\"(max-width: 983px) 100vw, 983px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5 : Implement <strong><code>NaigationView.OnNavigationItemSelectedListener<\/code><\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Inherit <strong><code>NaigationView.OnNavigationItemSelectedListene<\/code><\/strong> to implement methods upon clicking the different views in the drawer. New to override those all methods in  in your activity.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"657\" height=\"43\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-44-22.png\" alt=\"\" class=\"wp-image-4790\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-44-22.png 657w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-44-22-300x20.png 300w\" sizes=\"(max-width: 657px) 100vw, 657px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">As the name suggests, you can to whatever with the menu item object. In  this code, it will move to another fragment upon clicking the options to different fragments<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"952\" height=\"143\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-10-01-50.png\" alt=\"\" class=\"wp-image-4792\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-10-01-50.png 952w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-10-01-50-300x45.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-10-01-50-768x115.png 768w\" sizes=\"(max-width: 952px) 100vw, 952px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We need to manually operate drawer which means it should be closed if it is opened.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"963\" height=\"897\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-46-16.png\" alt=\"\" class=\"wp-image-4793\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-46-16.png 963w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-46-16-300x279.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot-from-2019-05-30-09-46-16-768x715.png 768w\" sizes=\"(max-width: 963px) 100vw, 963px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks for using&nbsp;<a href=\"https:\/\/pheonixsolutions.com\/\">pheonix solutions<\/a>.<br>You find this tutorial helpful? Share with your friends to keep it alive.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to setup navigation drawer in android application Date : 29\/05\/2019 Introduction With the navigation drawer one can navigate to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1021],"tags":[569,669,670,667],"class_list":["post-4782","post","type-post","status-publish","format-standard","hentry","category-mobile-flutter","tag-android","tag-drawer","tag-navigation","tag-views","psol-cat-mobile-flutter"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-1f8","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=4782"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4782\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=4782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=4782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=4782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}