导航抽屉与android中的curverd边缘

Question

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

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

---

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

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:menu will 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.

Answer 1

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

Answer 2

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() {
  }
});

Answer 3

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>

Answer 4

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