CODEWITHSUNDEEP
androidlayoutmaterial-designnavigation-drawer
Charuka Silva
Charuka Silva

Reputation: 13153

Navigation drawer with curverd edge in android

I have done different Navigation Drawer types like Permanent,Persistent Mini variant,Temporary.

All of them are rectangle in their outline shape like below.

enter image description here

Requirement: I want to create a Navigation Drawer with a curved edge(in its right side).

enter image description here

Let's have a look on my nav. view

 <android.support.design.widget.NavigationView
            android:background="#FFF"
            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"/>

It contains app:headerLayout and a app:menu. If I can change the parent NavigationView edges those app:headerLayout and app:menuwill be displayed inside it's parent boundaries. Am i right ?

Change of the android:background didn't work for me.

What about adding dimen in dimens.xml is there any attribute that I can use?

Is it possible to curve Navigation Drawer's edge (programmatically or using an image)?

If yes any guidance will be highly appreciated.

Upvotes: 10

Views: 5628

Answers (4)

Hanisha
Hanisha

Reputation: 887

Use this from above library :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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.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:menu="@menu/activity_main_drawer"
    app:itemBackground="@android:color/white"
    app:headerLayout="@layout/nav_header_main"
    app:arc_cropDirection="cropInside"
    app:arc_width="96dp"/>

Upvotes: 0

MilapTank
MilapTank

Reputation: 10076

This Lib may helps you

https://github.com/mzule/FantasySlide

How to Use: XML

<com.github.mzule.fantasyslide.FantasyDrawerLayout   xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/drawerLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/fake" />// this image is part of home scren 

<com.github.mzule.fantasyslide.SideBar
    android:id="@+id/leftSideBar"
    android:layout_width="200dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@color/colorPrimary"
    app:maxTranslationX="66dp"> // This attribute is for curve  

    <!--  SideBar  -->

</com.github.mzule.fantasyslide.SideBar>

JAVA: 

SideBar leftSideBar = (SideBar) findViewById(R.id.leftSideBar);
leftSideBar.setFantasyListener(new SimpleFantasyListener() {
  @Override
  public boolean onHover(@Nullable View view) {
    return false;
  }

  @Override
  public boolean onSelect(View view) {
     return false;
   }

  @Override
   public void onCancel() {
  }
});

Upvotes: 6

romtsn
romtsn

Reputation: 11992

Finally, I've decided to create library for this case: https://github.com/rom4ek/ArcNavigationView, feel free to explore and use it:) It's based on Florent Champigny's ArcLayout, with some adjustments, thanks to him.

The advantage of this lib over suggested is that it was built on top of standard NavigationView from android design library, and you can use it as usual, just change the classname. Hopefully, will be published on jcenter soon. Here are some screenshots:

Thanks for the idea! :)

Upvotes: 12

Amit Upadhyay
Amit Upadhyay

Reputation: 7401

According to me, to achieve this you will have to make your own custom class extending ViewGroup (or FrameLayout) like we have in DrawerLayout class.

EX:

public class DrawerLayout extends ViewGroup implements DrawerLayoutImpl {
/*
..
*/
}

In your custom class, you can use Canvas and Paint to draw your preferred shape. You can override the methods implement it in your way.

Then you can use it inside your Activity:

MyDrawerLayout drawer = (MyDrawerLayout) findViewById(R.id.my_drawer_layout);

In your activity_file.xml :

<com.yourpackage.MyDrawerLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/my_drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

<!-- .... -->

</com.yourpackage.MyDrawerLayout>

Upvotes: 2

Related Questions