How to create a side menu in Android Studio

The development of a modern mobile application is rarely complete without a well-thought-out navigation system. One of the most popular and recognizable patterns in the ecosystem Google Material Design is the side slide-out menu known as the Navigation Drawer. This interface element allows developers to compactly place the main sections of the application, settings and user profile, freeing up the central screen space for content.

The implementation of such a component may seem difficult for a beginner, but Android Studio this process is as automated and structured as possible. Understanding the architecture of working with navigation fragments and containers is a fundamental skill for any Android developer who wants to create convenient and professional products. We will analyze all the stages from creating a template to customizing the appearance.

The use of standard libraries AndroidX ensures that your application will be displayed correctly on thousands of different devices with different screen sizes. The side menu doesn’t just hide items behind the “hamburger” icon; it manages the life cycle of screens and ensures smooth transitions between them.

Preparing a project and choosing a template

Starting work on a new project in Android Studio gives the developer the opportunity to immediately select the architecture of the future application. When creating a new project through the menu New Project you need to pay attention to the available templates. A template Navigation Drawer Activityis ideal for implementing a side menu, which automatically generates all the necessary XML markup structure and basic code in the language Kotlin or Java.

If you choose this template, the studio will create a project where key components have already been implemented: DrawerLayoutNavigationView to display a list of items and AppBarConfiguration to control the menu button in the top panel. This allows you to save significant time, since manually registering all these connections is quite labor-intensive. However, even when using a template, it is important to understand how these parts interact.

In some cases, for example, when adding a menu to an existing project, an automatic template will not work. Then you have to implement the components manually, adding dependencies to the file build.gradle. The main libraries that will be required for navigation to work include com.google.android.material:material and androidx.drawerlayout:drawerlayout. Without these libraries, the components simply will not be found during compilation.

⚠️ Attention: Project templates in Android Studio are regularly updated. The structure of the generated code in new versions of the IDE may differ from older tutorials on the Internet. Always check the official documentation if a standard template behaves unexpectedly.

After choosing a template and creating a project, the first thing to do is check the dependency file. Make sure that the library versions are compatible with your targetSdkVersion. A version conflict may cause the menu to look incorrect or the application to crash upon launch. Modern versions Android Studio usually offer the latest versions of dependencies via Version Catalog.

Home screen XML markup architecture

The basis of any interface in Android is XML markup. To implement a side menu, the root element of the main activity layout is usually DrawerLayout. This widget works as a container that can contain two main types of child elements: the main content of the application and the navigation menu itself, which will slide out from the side.

Inside DrawerLayout the first child should always be the main content. Most often it is CoordinatorLayout or regular LinearLayoutwhich occupies the entire screen. It is on top of this layer that the menu will appear. If you break the nesting order and put the menu first, it will be considered the main content, and there will be nothing to leave. This is critical error in the XML structure.

The second child DrawerLayout is located NavigationView. This component is responsible for visualizing a list of menu items, a header with a user avatar, and separators. It is important to set the attribute android:layout_gravity="start"to this element so that the system understands on which side of the screen the menu should appear (on the left for languages with left-to-right writing).

• 📱 DrawerLayout —the root container that controls the logic for opening and closing the curtain.
• 🖼️ NavigationView —a widget that displays a list of menu items and the user’s header.
• 📄 Menu Resource —a separate XML file describing the structure of items (icons, text, ID).
• 🖌️ Header Layout —a separate XML file for the top part of the menu with a photo and name.

To manage content NavigationView use the attribute app:menu, which refers to the menu resource, and app:headerLayout for the header. Separating the list display logic and its structure allows you to flexibly change the design without affecting the activity code. This is the principle of separation of concerns, which makes the code cleaner and more understandable.

Setting up menu and header resources

The visual part of the side menu is defined by two XML resource files. The first file is responsible for the menu header (headerLayout), where the user’s round avatar, his name and email are usually located. The second file (menu) describes the list of actions available to the user. These files are created in folders res/layout and res/menu respectively.

In the header file, for example nav_header_main.xml, you can use any set of View elements: ImageView for photos, TextView for text, background gradients or even buttons. Often placed here CircleImageView from the library Material Components to beautifully display the avatar. Dynamic change of data in the header (for example, substitution of a real name after the login) is carried out in the activity code through the method getHeaderView(0).

The menu file, for example activity_main_drawer.xml, has a specific structure. It must contain a root tag menuwithin which elements item or groups groupare located. Each item item has attributes android:id (for identification in the code), android:icon (vector or raster icon) and android:title (text name). To group items, tags are used group, which allow, for example, making items mutually exclusive (only one is selected).

Particular attention should be paid to the icons. In modern Android, it is recommended to use vector graphics (VectorDrawable), as they scale without loss of quality and take up less space. Raster images (png, jpg) may be blurred on screens with high pixel densities. All icons must be monochrome (usually white or black), since the system itself will apply (tint) to them, depending on the theme of the application. accent color (tint) depending on the application theme.

// Example of processing a click on Kotlin
navView.setNavigationItemSelectedListener { menuItem ->
when (menuItem.itemId) {
R.id.nav_gallery -> {
// Logic for going to the gallery
true
}
R.id.nav_slideshow -> {
// Logic for going to the slide show
true
}
else -> false
}
}