Creating a navigation menu in an Android application

Developing a mobile application interface begins with thinking through the navigation structure. The user should intuitively understand how to get to the desired section without wandering around the screens. In the ecosystem Android there are several standard patterns for organizing menus, each of which solves specific UX problems.

The choice of navigation type depends on the number of sections in your product and the frequency of their use. If there are few screens, a bottom panel will do, but for complex services with a dozen categories it is better to use a drawer. We will look at the technical aspects of implementing both options so that you can choose the optimal solution for your project.

In the process, you will need basic knowledge of the language Java or Kotlin, as well as an understanding of the structure of projects in the environment Android Studio. All code examples will be given taking into account modern support libraries, since outdated methods can cause compatibility problems on new versions of the operating system.

Project preparation and necessary dependencies

Before drawing the interface, you need to make sure that the project is connected to the necessary libraries. The modern Android development stack relies heavily on AndroidXwhich has replaced older support packages. Without the correct dependencies, menu components will simply not appear or will cause a compilation error.

Open the file build.gradle (Module: app) and check the dependencies section. You will need libraries to work with design materials and fragments. Often, developers forget to add Material Components, which makes the styling of elements look archaic.

Add the following lines to your build file if they are not there:

implementation 'com.google.android.material:material:1.9.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
implementation 'androidx.core:core-ktx:1.12.0'

After synchronizing the project (Sync Now), make sure that your application's theme inherits from Theme.MaterialComponents. This is critical because many menu widgets take colors and styles directly from the current theme. If you are using a custom theme, check for the necessary attributes.

⚠️ Attention: Do not mix old support.v4 and new AndroidX libraries in the same project. This will lead to a class conflict and the impossibility of building the APK file.

Creating a side sliding menu (Navigation Drawer)

The navigation drawer is a classic interface element hidden behind the “hamburger” button. It is ideal for applications with deep partition hierarchies. The implementation begins with the markup of the main layout, where DrawerLayout acts as the root container.

Inside this container there should be exactly two child elements: the main content of the application and the menu itself. Violating this rule will cause the application to crash on startup. The main content usually takes up all the free space, and the menu is fixed at the left edge.

A widget is used to create the menu itself. NavigationView. It needs to specify a data source in the form of an XML menu resource. The structure of a menu file is simple: it is a set of elements item with icons and headings.

• 📂 activity_main.xml: Root layout file with DrawerLayout.
• 📂 app_bar_main.xml: Layout for the top panel and content.
• 📂 menu_main.xml: XML file describing the navigation items.
• 🎨 header_main.xml: Optional file for the menu header with profile photo.

An example code for a menu file might look like this:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">


</group>
</menu>

Implementation of the bottom navigation bar (BottomNavigationView)

When the number of main sections of the application does not exceed five, the best solution is the bottom navigation bar. This pattern is recommended by the guidelines Material Design for quick access to key functions. The user does not need to drag up the screen or open additional menus.

The component BottomNavigationView is placed at the bottom of the screen and is rigidly attached to the anchor. It is important to understand that this panel is intended only for navigation between equivalent top-level screens. You should not place secondary actions like “About” or “Help” there.

In the activity or fragment code, you must implement an event listener setOnItemSelectedListener. It is this method that describes the logic of switching between fragments when you click on an icon. Without this processing, clicks will be visual, but functionally useless.

Please note the limitation on the number of elements. If you add more than 5 items, the system will automatically switch the display mode to sliding labels, which may worsen the perception of the interface. Try to keep the navigation concise and focused.

Customizing the top toolbar (Toolbar)

The top bar, or Toolbar, is the de facto standard for title screens in Android. It replaces the legacy ActionBar and gives the developer full control over the appearance. A Toolbar can contain not only a title, but also action buttons, an overflow menu and a navigation button.

To integrate Toolbar into your application, replace the standard title in the theme with NoActionBar. Next, add the Toolbar widget to your activity's XML markup. After that, in the activity code, call the method setSupportActionBar(toolbar)to activate its functionality.

A common task is to add a "Back" button or a "hamburger" menu on the left. For this purpose, an object ActionBarDrawerToggleis used, which connects the Toolbar with the DrawerLayout. This ensures the correct animation of the arrow turning into a hamburger and back.

The action menu on the right (three dots) is configured through the same menu XML file as the sidebar, but with the showAsActionattribute. Value ifRoom will show the icon if there is space, and always will force it out, hiding the signature.

Attribute	Value	Description of behavior
showAsAction	never	The element is always hidden in the overflow menu
showAsAction	ifRoom	Showed if there is space on the panel
showAsAction	always	Always visible as an icon (not recommended for many items)
showAsAction	withText	Showed with a text caption next to it

⚠️ Attention: Do not use Toolbar to accommodate more than 3-4 action buttons. This overloads the interface and makes finger taps difficult on small screens.

Handling clicks and navigating between screens

The hardest part of creating a menu is bringing its elements to life. Clicking on an item should lead to a specific action: opening a new screen, loading a fragment, or starting a service. In modern development, the standard is to use the library Navigation Component.

This tool allows you to describe the transition graph in a separate XML navigation file. You associate menu item IDs with ID_destinations in the graph. With this approach, you do not need to write cumbersome constructions if-else or switch-case to handle each click manually.

If you are working with FragmentActivity, make sure that content replacement occurs through FragmentManager. Direct initialization of activities via Intent is acceptable, but can lead to stack accumulation and increased memory consumption during frequent switching.

The problem of state loss when rotating the screen

When the device orientation changes, the activity is recreated. To prevent the menu from being reset to the first item, save the ID of the selected element in the Bundle during onSaveInstanceState and restore it in onCreate.

To handle the selection of elements in the side menu, implement an interface NavigationView.OnNavigationItemSelectedListener. Inside the method onNavigationItemSelected you get a MenuItem object from which you can get the ID and perform the necessary logic. Don't forget to return true at the end of the method to confirm that the event was processed.

Common mistakes and performance optimization

Beginners often make the mistake of creating new instances of fragments every time they click on the menu. This leads to memory leaks and duplicate objects on the stack. The correct approach is to check whether the required fragment has already been created, and only initiate its creation if necessary.

Another problem is that the main thread (UI Thread) is blocked by heavy operations when switching tabs. If going to a section requires loading data from the network or database, do it asynchronously. The user should not see a frozen interface while the menu is loading.

Use the profiler in Android Studio to track memory allocations. Excessive creation of View objects when redrawing menus can cause micro-lags (junk), which are noticeable on low-end devices. Optimizing the view hierarchy solves this problem.

⚠️ Attention: Interfaces and APIs of support libraries may change in new versions of Android Studio. Always check the syntax with the official Google documentation before copying code from old tutorials.

FAQ: Frequently Asked Questions

How to make menu items highlighted when selected?

To do this, In the menu XML file, use the android:checkableBehavior="single" attribute inside the group tag. In the activation code, set the selected element as checked through the method setChecked(true).

Is it possible to programmatically hide a menu in a specific section?

Yes, you can access the DrawerLayout or BottomNavigationView object in the activity code and call the method setVisibility(View.GONE). This is useful for login screens or full-screen media browsing.

Why are menu icons grayed out?

You are most likely using vector drawables that don't have built-in color, and the app theme is applying a filter. Set the color via the app:itemIconTint attribute in XML or set nullto use the original icon colors.

How to add a separator between groups of menu items?

Use a tag <group> to separate logical blocks. Android will automatically add padding between groups. For a visual line, you can use a custom layout as a group header.

Does Navigation Drawer support swipe gestures on new Androids?

Yes, the DrawerLayout component handles swiping from the edge of the screen by default. However, on Android 10 and above, this gesture may conflict with system gesture navigation. It is recommended to adjust edgeSize or disable swipe if this interferes with the user.