How to Align Navigation Drawer and its Elements towards the Left or Right of the Screen in Android?

Last Updated : 15 Oct, 2020

The Navigation Drawer is a layout that can be seen in certain applications, that consists of some other activity shortcuts (Intents). This drawer generally can be seen at the left edge of the screen, which is by default. A Button to access the Navigation Drawer is by default provided at the action bar.

Example of Google Drive Navigation Drawer.

So now the question is why is it is necessary to align the Navigation Drawer and its elements towards the left or right of the screen. It is necessary because a screen can represent multiple layouts at a time. To keep all these elements fixed at desired positions, and sizes, each and every entity of these elements must be initialized. Though it is not necessary to initiate these entities in applications representing a single layout, it is always a better practice to initiate all the entities. In view of generating different styling for an application, one would like to implement a drawer toward the right of the screen with elements aligned towards left and other possible versions. Through this article, we want to extend the implementation of a Navigation Drawer and align it and its elements respectively.

Approach

Step 1: Create a New Project

Create a Navigation Drawer Activity in Android Studio. To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. As you click finish, the project builds, might take a minute or two.

Step 2: Working with the activity_main.xml file

When the setup is ready, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file for different cases. Note that we are going to modify only the activity_main.xml file in each case.

Align Navigation Drawer towards the Left of the screen:

PS: “ltr” means left to right.

XML

<?xml version="1.0" encoding="utf-8"?> 
<androidx.drawerlayout.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
                                             
    android:layoutDirection="ltr"
  
    tools:openDrawer="start"><!--set layoutDirection to 'ltr'-->
  
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" /> 
  
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" /> 
      
</androidx.drawerlayout.widget.DrawerLayout>

Output: Run on Emulator

Align Navigation Drawer towards the Right of the screen:

The approach is quite similar to the previous one. Changes are made only within the drawer layout.

PS: “rtl” means right to left

XML

<?xml version="1.0" encoding="utf-8"?> 
<androidx.drawerlayout.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
                                             
    android:layoutDirection="rtl"
  
    tools:openDrawer="start"><!--set layoutDirection to 'rtl',  
                                 else by default is left:-->
  
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" /> 
  
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" /> 
      
</androidx.drawerlayout.widget.DrawerLayout>

Output: Run on Emulator

Align Navigation Drawer Elements towards the left of the Drawer (by Default):

XML

<?xml version="1.0" encoding="utf-8"?> 
<androidx.drawerlayout.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start"> 
  
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" /> 
  
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"
      
        android:layoutDirection="ltr"/><!--set layoutDirection to 'ltr'-->
      
</androidx.drawerlayout.widget.DrawerLayout>

Output: Run on Emulator

Align Navigation Drawer Elements towards the Right of the Drawer:

XML

<?xml version="1.0" encoding="utf-8"?> 
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start"> 
  
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" /> 
  
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"
  
        android:layoutDirection="rtl"/><!--set layoutDirection to 'rtl', 
                                           else by default is left-->
  
</androidx.drawerlayout.widget.DrawerLayout>