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.
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>
Output: Run on Emulator
Similar Reads
How to Change the Text Font of Side Navigation Drawer Items in Android?
The navigation drawer is the most common feature offered by android and the navigation drawer is a UI panel that shows your app’s main navigation menu. It is also one of the important UI elements, which provides actions preferable to the users like example changing user profile, changing settings of
2 min read
How to Make an Alert Dialog Fill Majority of the Screen Size in Android?
An Alert Dialog is a window that appears on the screen to give notifications to the user, make some decisions for the user, or enter some information from the user. An Alert Dialog is generally not full screen, but in this article, we'll be implementing something similar. Building an Alert Dialog:Ti
3 min read
How to Grouping Navigation Drawer Menu Items in Android?
Navigation Drawer or Slider Drawer is a UI pattern, used in Mobile Applications and Websites. It is used to provide easy access to different features or parts of an app or website.Functioning of Navigation DrawerIt is usually accessed by tapping on the hamburger menu icon (3 horizontal lines), prese
4 min read
How to Add Icons in Navigation Drawer in Android?
Android navigation drawer is a user interface that shows the app's main navigation menu. It appears when the user touches the drawer icon in the app bar or when the user swipes their fingers or does some kind of action on the screen. It is not visible by default and it needs to open either by slidin
2 min read
How to Set the Selected Item of Spinner By Value and Not By Position in Android?
Spinner is used in many android applications to display multiple options within a drop-down list and the user will be able to select a specific option from the given list. The default item which is selected within the spinner is the first item within the list which we will be creating to be displaye
4 min read
How to Check Navigation Drawer Menu Items in Android?
Navigation Drawer or Slider Drawer is a UI component that is used in Mobile Applications and Websites to provide easy access to different features or parts of an app or website. Functioning of Navigation Drawer It is generally accessed by tapping on the hamburger menu icon (3 horizontal lines), pres
4 min read
How to Scale an Image in ImageView to Keep the Aspect Ratio in Android?
ImageView is used to display image resources like BitMap or Drawables. ImageView class or android.widget.ImageView inherits the android.view.View class which is the subclass of Kotlin.any_class. Application of ImageView is also in applying tints to an image in order to reuse a drawable resource and
2 min read
How to Change the Screen Orientation Programmatically using a Button in Android?
Generally, the screen orientation of any application is Portrait styled. But when it comes to gaming or any other multimedia service such as watching a video, the screen orientation must change functionally from Portrait to landscape or vice-versa when the functionality is not required. So a develop
3 min read
How to Add a Floating Action Button to Bottom Navigation Bar in Android?
The floating action button is a bit different button from the ordinary buttons. Floating action buttons are implemented in the app’s UI for primary actions (promoted actions) for the users and the actions under the floating action button are prioritized by the developer. For example the actions like
3 min read
How to Get Screen Width and Height in Android?
Android applications are being developed for different device orientations to support a huge range of devices. So that users with different device size configurations can use the application. Many applications need to get the height and width of the device screen to create UI. In this article, we wi
3 min read