Skip to content
Related Articles

Related Articles

Improve Article

Curve Navigation Drawer in Android using ArcNavigationView

  • Last Updated : 14 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.

UI changes can be applied to the Navigation Drawer. One such idea to change the Navigation Drawer UI is by making its outer edge an inner or an outer arc. This gives a creative and a richer look to the Drawer. Since some changes are limited by the Android Studio packages, such implementations require an outside library for making desired changes. This is done by implementing a known dependency (library) of an implementation that is desirable. Similarly, we as well implemented a dependency to fulfill our requirements.

Inside Arc Design on Navigation Drawer

To create an Inside Arc Design to the Navigation Drawer in an Android device, follow the following steps:

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: Add the Dependency to the build.gradle of the app

Add the following dependency to the build.gradle (app) file. 

implementation ‘com.rom4ek:arcnavigationview:2.0.0’

Step 3: 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. Add the Script as shown below between the opening and closing Drawer Layout element.

XML




<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 
    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" />
  
    <!--ArcNavigationView Element-->
    <com.rom4ek.arcnavigationview.ArcNavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white"
        android:fitsSystemWindows="true"
        app:itemBackground="@android:color/white"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"
          
        app:arc_cropDirection="cropInside"
                                                      
        app:arc_width="96dp"/>
  
</androidx.drawerlayout.widget.DrawerLayout>

Output: Run on Emulator

Outside Arc Design on Navigation Drawer

Similarly to create an Outside Arc, make changes to the layout file. Changes made to activity_main.xml file:

XML




<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 
    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" />
  
      <!--ArcNavigationView Element-->
    <com.rom4ek.arcnavigationview.ArcNavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white"
        android:fitsSystemWindows="true"
        app:itemBackground="@android:color/white"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"
        app:arc_width="96dp"
            
        app:arc_cropDirection="cropOutside"/>
  
</androidx.drawerlayout.widget.DrawerLayout>

Output: Run on Emulator

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :