Curve Navigation Drawer in Android using ArcNavigationView

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. 

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: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" />

    <!--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: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" />

      <!--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