Toolbar turns darker than normal while opening drawer

Question

While I open the drawer the toolbar's colors turns way more darker than the color of the rest of the screen.

Initially Toolbar's background color is white. Any ideas why this is happening ?

The code I'm using is below :

<android.support.v4.widget.DrawerLayout
android:id="@+id/dl_poll_container"
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:background="@color/white"
android:layout_width="match_parent" android:layout_height="match_parent"
android:fitsSystemWindows="false">

<LinearLayout android:id="@+id/ll_toolbar_container"
    android:orientation="vertical"
    android:layout_width="match_parent" android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar android:id="@+id/tb_poll_toolbar"
        android:gravity="center"
        android:layout_width="match_parent" android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv_poll_toolbar_title"
            android:gravity="center" android:layout_gravity="center"
            android:textSize="@dimen/text_size_xxxlarge" android:fontFamily="sans-serif"
            android:textColor="@color/black" tools:text="My Title"
            android:layout_width="wrap_content" android:layout_height="wrap_content" />

    </android.support.v7.widget.Toolbar>

</LinearLayout>

<FrameLayout android:background="@color/white"
    android:layout_marginTop="?attr/actionBarSize"
    android:layout_width="match_parent" android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_poll_viewpager"
        android:background="@color/white"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:layout_gravity="center_horizontal"
        android:layout_marginTop="48dp"
        android:background="@drawable/background_line"
        android:layout_width="144dp" android:layout_height="wrap_content">

        <FrameLayout android:layout_width="36dp" android:layout_height="36dp"
            android:layout_alignParentLeft="true">

            <ImageView
                android:id="@+id/pager_img_one"
                android:layout_width="36dp" android:layout_height="36dp"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/ic_active_nav" />

            <TextView android:id="@+id/tv_poll_one"
                android:textStyle="bold"
                android:text="1" android:gravity="center"
                android:textColor="@color/white"
                android:layout_width="36dp" android:layout_height="36dp" />

        </FrameLayout>

        <FrameLayout android:layout_width="36dp" android:layout_height="36dp"
            android:layout_centerInParent="true">

            <ImageView
                android:id="@+id/pager_img_two"
                android:layout_width="36dp" android:layout_height="36dp"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/ic_deactive_nav" />

            <TextView android:id="@+id/tv_poll_two"
                android:visibility="invisible" android:textStyle="bold"
                android:text="2" android:gravity="center"
                android:textColor="@color/white"
                android:layout_width="36dp" android:layout_height="36dp" />

        </FrameLayout>

        <FrameLayout android:layout_width="36dp" android:layout_height="36dp"
            android:layout_alignParentRight="true">

            <ImageView
                android:id="@+id/pager_img_three"
                android:layout_width="36dp" android:layout_height="36dp"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/ic_deactive_nav" />

            <TextView android:id="@+id/tv_poll_three"
                android:visibility="invisible" android:textStyle="bold"
                android:text="3" android:gravity="center"
                android:textColor="@color/white"
                android:layout_width="36dp" android:layout_height="36dp" />

        </FrameLayout>


    </RelativeLayout>

    <LinearLayout android:orientation="vertical"
        android:layout_width="match_parent" android:layout_height="wrap_content">

        <LinearLayout android:id="@+id/pb_container"
            android:layout_width="match_parent" android:layout_height="8dp"
            android:background="@android:color/transparent"
            android:gravity="bottom">

            <ProgressBar android:id="@+id/progress_bar"
                style="@style/Widget.AppCompat.ProgressBar.Horizontal"
                android:progressDrawable="@drawable/progress_bar_drawable"
                android:indeterminate="false"
                android:max="100" android:progress="0"
                android:layout_width="match_parent" android:layout_height="8dp" />

        </LinearLayout>

        <TextView android:text="Uploading Video Progress"
            android:textColor="@color/app_body_text_3" android:gravity="center_horizontal"
            android:layout_width="match_parent" android:layout_height="wrap_content" />

    </LinearLayout>


</FrameLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/nv_poll_navigation"
    android:background="@color/white"
    android:layout_width="wrap_content" android:layout_height="match_parent"
    android:fitsSystemWindows="false" android:layout_gravity="start" />

Answer 1

DrawerLayout should have two children: the main content view and the navigation drawer. https://developer.android.com/training/implementing-navigation/nav-drawer.html#DrawerLayout

So you should wrap the main content with FrameLayout like this:

<android.support.v4.widget.DrawerLayout
        android:id="@+id/dl_poll_container"
        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:background="@color/white"
        android:layout_width="match_parent" android:layout_height="match_parent"
        android:fitsSystemWindows="false">

    <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <LinearLayout android:id="@+id/ll_toolbar_container"
                      android:orientation="vertical"
                      android:layout_width="match_parent" android:layout_height="wrap_content">
            ...
        </LinearLayout>

        <FrameLayout android:background="@color/white"
                     android:layout_marginTop="?attr/actionBarSize"
                     android:layout_width="match_parent" android:layout_height="wrap_content">
            ....
        </FrameLayout>
    </FrameLayout>

    <android.support.design.widget.NavigationView
            android:id="@+id/nv_poll_navigation"
            android:background="@color/white"
            android:layout_width="wrap_content" android:layout_height="match_parent"
            android:fitsSystemWindows="false" android:layout_gravity="start" />

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

Answer 2

There is a method in the DrawerLayout named setScrimColor with a default value (some kind of transparent dark grey). You can use that method to change the color that is drawn on top of the content when the drawer is opened. You can set it to fully transparent if needed