NavigationDrawer with Background image

Question

I want to have an image in the background of the drawer behind the menu. In this piece of code the image is in front of the menu. Im not sure, but I cannot use a FrameLayout in this particular case.

The image should also maintain its aspect ratio and the semitransparent color should stay in front of it. This color is provided by the @color/menuSemi

<?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/content_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.NavigationView
        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"
        android:background="@color/menuSemi"
        app:itemTextColor="@color/white"
        app:itemIconTint="@color/white"
        android:paddingTop="16dp"
        style="@style/AppTheme.navigation"
        app:menu="@menu/activity_main">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start">

            <ImageView
                android:id="@+id/drawer_bg"
                android:src="@drawable/sidebar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:alpha="1"
                android:scaleType="centerCrop"/>
        </RelativeLayout>

    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

Answer 1

Put your NavigationView in RelativeLayout and set the RelativeLayout gravity "start" and add ImageView inside the Relativelayout as first element.

And, Set NavigationView Background transparent

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start">

        <ImageView
            android:id="@+id/drawer_bg"
            android:src="@drawable/sidebar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="1"
            android:scaleType="centerCrop"/>
<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    android:background="@android:color/transparent"
    app:itemTextColor="@color/white"
    app:itemIconTint="@color/white"
    android:paddingTop="16dp"
    style="@style/AppTheme.navigation"
    app:menu="@menu/activity_main">

</android.support.design.widget.NavigationView>

    </RelativeLayout>

So,your layout now looks like:-

     <?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/content_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
 <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start">

            <ImageView
                android:id="@+id/drawer_bg"
                android:src="@drawable/sidebar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:alpha="1"
                android:scaleType="centerCrop"/>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        android:background="@color/menuSemi"
        app:itemTextColor="@color/white"
        app:itemIconTint="@color/white"
        android:paddingTop="16dp"
        style="@style/AppTheme.navigation"
        app:menu="@menu/activity_main">

    </android.support.design.widget.NavigationView>

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