How to create a Navigation Drawer in Android
6 minute(s) read | Published on: Sep 16, 2021 Updated on: Jan 26, 2022 |
In developed applications ( in Czech: vyvinuté aplikace ), many options make working with the application and using it much easier for the user. Navigation Drawer is another of these options that can be used in extended applications, but this menu is hidden by default and will appear if the user selects it and slides.
What is Navigation Drawer?
Applications that are designed and developed ( on Slovak: Aplikácie, ktoré sú navrhnuté a vyvinuté ) have options for users to be able to use them and help them get things done and meet their needs. Another of these options is Navigation Drawer. This menu is hidden by default and will appear when the user selects it and slides. This menu is usually located on the right or left side of the application and can be displayed by swiping it to the right and left.
Navigation Drawer has another name which is Sliding Menu. Of course, Sliding Menu or Navigation Drawer is the main panel in the application that can display buttons and other items in the application. As we said, this menu normally hides by default, and the user does not see it. It will appear when the user pulls it like a drawer. This drop-down menu has a Header or a Menu. Of course, it should be noted that the NavigationDrawer option has been introduced by the Android operating system and can be easily used by using the Design Support library.
How can we create a Navigation Drawer?
To design a Navigation Draw or a Sliding Menu, I must first create a new project with a custom name.
1- In this section, the first step for creating and designing the Sliding Menu option in applications is to create a new project. This article's desired name chosen for this project is NavigationDrawer and MinimumSDK 17.
2- To design and use the Navigation Draw option, it is necessary to first add the design library to the project.
Note:
It should be noted that in addition to the appcompat library, we also need another library called the design library.
3- Go to build.gradle and add the design library to the project.
4- Of course, the rejection of this project to design and use the drop-down menu option should be noted; we only need appcompat-v7 and design. For this reason, remove the rest.
5- I define NavigationDrawer in the main activity of the project. By defining it in the project's main activity, other items such as fragments, etc., will be available.
6- It is better to delete the contents inside activity_main.xml put a layout of android.support.v4.widget.DrawerLayout type and replace it.
7- We must complete DrawerLayout as follows:
In the codes listed above, we define the height and width equal to match_parent and then assign an id to them. For DrawerLayout, the value of true and the android: fitsSystemWindows property allows DrawerLayout to cover the entire activity level, and the start value for tools: open drawer also means that the menu on the left can be opened.
8- Then, we need to add a NavigationView to DraweLayout.
NavigationView is also defined in the design library, which can be inserted into an activity as follows:
In the code above, the header and menu are located inside the NavigationView. We add the necessary attributes to the tag in the code listed above and then create the header and menus. After creating them, we add them to NavigationView.
9- If we look in the Preview, we will see that it shows us a blank white page.
10- It is better to remove the action bar and replace it with a toolbar.
11- In the AppTheme, which is in the DarkActionBar section, replace the parent with NoActionBar until the action bar is removed.
12- After that, we will create a layout in the directory and a special layer for the toolbar. It should be noted that the name of this toolbar is arbitrary, and the name that we have chosen arbitrarily in this article is toolbar.xml. The selected layer type in this article is RelativeLayout.
13- After that, we must add the toolbar layout file to the main activity layout within the project using the include tag.
In the codes listed above, we also select the width and height of the tags match_parent until the toolbar is displayed as a cocoon.
14- Then, we must define the Toolbar inside MainActivity.java.
15- After that, we must run the project.
16- After running the project, we will see a drop-down menu appear after dragging. Of course, this panel and the drop-down menu that we have designed in this article will appear by dragging it to the right, as the drop-down menu is located on the left side of the app. Of course, it should also be noted that this panel and the drop-down menu that appears is a blank white screen.
17- We must complete all the contents of NavigationView.
18- To do this and complete its contents, we must first create a header.
19- Create a file and select the desired name for it. The name of choice in this article is nav_header.xml, and its type is LinearLayout.
20- We must add this created file to the project layout directory.
21- In the Header section of the apps, there is an image at the top, with a name and text next to the image.
22- Then, we select a background image for the header and enter the text related to it.
"code"
The standard height for the header is 160dp. In the code above, we have added padding so that the elements in the application are slightly spaced from the header.
In the next lines of code above, we have selected the image we added to the drawable directory as the header background image.
We also consider the bottom value for the gravity property so that all the elements we add to the header are well arranged from the bottom of the header upwards.
23- Complete the part related to the header as follows:
In the codes listed above, to display the images, we have included an ImageView and two TextViews to insert the name and email.
We also use the content description and text appearance properties to style the written text for image descriptions.
DotNek Android development services