Android: Navigation Drawer vertical shadow

Question

I have implemented a NavigationDrawer in my application. I would like to know how I can add a vertical shadow effect which is below the main Fragment, similar to the picture below.

enter image description here

I have one image on my drawable with the shadow image. It's called "drawer_shadow.9" but I don't know how I can implement this inside my NavigationDrawer.

No problem. I wanted to add in the image for you because I wanted to help. Welcome to StackOverflow! — rayryeng, May 15 '14 at 23:21
Is `drawer_shadow.9` also useable for the right-side drawer? — Alexander Farber, Jul 14 '15 at 19:33
yes, of course @AlexanderFarber you need get the correct `drawer_shadow.9` — Aspicas, Jul 15 '15 at 06:29

score 26 · Accepted Answer · edited Feb 23 '15 at 16:48

26

You will need to use a drawable for the shadow. Use the setDrawerShadow method on the navigationDrawer object. For example:

navigationDrawer.setDrawerShadow(R.drawable.someDrawable, GravityCompat.START);

Link to the official document: setDrawerShadow

Hope this helps

edited Feb 23 '15 at 16:48

Ruben

796
3
9
21

answered May 16 '14 at 00:27

user2511882

9,022
10
51
59

Is there a way to do it in the xml? – RCB Apr 22 '15 at 16:21
Can you put the information for the `R.drawable.someDrawable` part. Do you have a sample for that? Is it a drawable png file or is more like a gradient through xml? – RCB May 05 '15 at 18:52
7

I was able to find a .png file called drawer_shadow.9.png it's a 9 patch file included in the Google sample code. http://developer.android.com/shareables/training/NavigationDrawer.zip – RCB May 07 '15 at 20:10

score 2 · Answer 2 · edited Aug 25 '20 at 21:01

(Drawer on right side) Activity layout:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    ...
</LinearLayout>

<LinearLayout
    android:layout_width="280dp"
    android:layout_height="match_parent"
    android:layout_gravity="end"
    android:orientation="horizontal">

    <View
        android:layout_width="20dp"
        android:layout_height="match_parent"
        android:background="@drawable/drawer_shadow"
        android:paddingEnd="0dp"
        android:paddingLeft="-20dp"
        android:paddingRight="0dp"
        android:paddingStart="-20dp" />

    <fragment
        android:id="@+id/fragment_drawer"
        android:name="com.....HomeDrawer"
        android:layout_width="260dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:choiceMode="singleChoice"
        tools:layout="@layout/drawer_home" />

</LinearLayout></android.support.v4.widget.DrawerLayout>

draver shadow:

    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient
            android:startColor="#00FFFFFF"
            android:endColor="#f2e9e9e9"
            android:type="linear" />
        <size
            android:height="@dimen/activity_vertical_margin"
            android:width="5dp">
        </size>
    </shape>

effect:

Android: Navigation Drawer vertical shadow

2 Answers2