Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output: Run on Emulator

My Personal Notes arrow_drop_up
Recommended Articles
Page :