Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android: Navigation Drawer vertical shadow

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.

like image 706
Aspicas Avatar asked May 15 '14 23:05

Aspicas


2 Answers

(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:

enter image description here

like image 80
Krzysztof Dziuba Avatar answered Nov 11 '22 16:11

Krzysztof Dziuba


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

like image 34
user2511882 Avatar answered Nov 11 '22 16:11

user2511882