Dark Background in NavigationDrawer in Android

Question

I have a problem making a Navigation Drawer in my App:

In the Screenshot below you can see the darker area in the Navigation View...

Can anybody tell me how to remove this darker area? The second issue: Why does the Margin-Top not work? You see that the "Large Text" isn't shown correctly!

Here's my code:

-main_activity:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:orientation="vertical"
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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="?attr/actionBarSize"
    android:id="@+id/nav_view"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/nav_drawer_menu" />

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

-nav_header

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="Large Text"
    android:id="@+id/txvAccountname"
    android:paddingLeft="10dp"
    android:paddingTop="10dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="Medium Text"
    android:id="@+id/txvAccountemail"
    android:paddingLeft="10dp"
    android:paddingTop="5dp" />
</LinearLayout>

Answer 1

Can anybody tell me how to remove this darker area?

Remove this line in the XML

android:background="@color/colorAccent"

Also, see if this looks any better. Not sure if you need the Toolbar, but it looks like you are using the AppCompatActivity.

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true"
  android:orientation="vertical">

  <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/abc_action_bar_default_height_material"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

  <android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Real content goes here -->
    <include
        layout="@layout/content_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- The navigation drawer -->
    <android.support.design.widget.NavigationView
      android:id="@+id/nav_view"
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:layout_gravity="start"
      app:headerLayout="@layout/nav_header"
      app:menu="@menu/nav_drawer_menu"/>

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

Answer 2

To change the background color on navigation drawer interactions, use this method:

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.setScrimColor(Color.TRANSPARENT);
//or you can use Color.parseColor("#00FFFFFF"); too

Need xml layout code for the other question.