Add drop shadow to slide out navigation

Question

I have implemented slide out navigation using this.

The content should drop shadow near menu list's right edge; like

I'm trying to add shadow by adding a view to content left edge, but it wont show up.

Any clue on how to do this will be appreciated.

Answer 1

Guys I know I am late to the party but i had a hard time finding an answer to this issue that was satisfactory to me so i just wanted to share my solution to this. Fist, create a drawable navbar_shadow.xml and put it with the rest of your drawables. All it is, is a rectangle with a transparent gradient.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#111"
        android:endColor="#00000000">
    </gradient>
    <size
        android:height="@dimen/activity_vertical_margin"
        android:width="5dp">
    </size>
</shape>

Then, wherever you are instantiating your drawer, use your DrawerLayout variable to attach it to your drawer.

mDrawerLayout.setDrawerShadow(R.drawable.navbar_shadow, Gravity.LEFT);

Bam. No need to draw line by line or include any extra resources. You can use your own startColor to match your drawer color, but endColor should remain #00000000 as it is a transparent black.

Answer 2

I know this post is quite old but I had trouble finding a solution so I thought it might help somebody if I posted mine here.

I wanted to add a fade to black on the right had side of this simple ListView.

<ListView
    android:id="@+id/sideMenuList"
    android:layout_width="300dp"
    android:layout_height="match_parent"/>

Created a PNG file with a gradient using GIMP. Add it to /res/drawable. Mine was named fade_from_right.png

Surrounded the ListView with a RelativeLayout. Give the RelativeLayout the background color you want your ListView to have.

Add another View to the right of your ListView. Set the new views background to be your 'fade_from_right.png'

Thats it.

<RelativeLayout
    android:layout_height="match_parent"
    android:layout_width="300dp"
    android:background="@color/solarized_base02">

    <ListView
        android:id="@+id/sideMenuList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <View
        android:layout_alignRight="@id/sideMenuList"
        android:layout_width="5dp"
        android:layout_height="match_parent"
        android:background="@drawable/fade_from_right"/>

</RelativeLayout>