Navigation drawer view background color showing black background

Question

I am facing a weired issue, I have a navigation drawer activity in my app, and i found some errors with toolbar when app running on below API 21 i have fixed it by changing toolbar color.And accidently the navigation drawer color changed to black .I could not find how it changed to black in color.

Here is the navigationView

<?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/app_bar_home_page_new"
    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_home_page_new"
    app:menu="@menu/activity_home_page_new_drawer" />

 and the toolbar layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
tools:context=".NEWUI.HomePageNew">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
      android:background="?attr/colorPrimary"
      app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_home_page_new" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:backgroundTint="@color/colorFab"
    app:srcCompat="@drawable/ic_fab_svg" />
 </android.support.design.widget.CoordinatorLayout>

And my color primary ,primary dark and accent color

 <color name="colorPrimary">#2B2B2B</color>
<color name="colorPrimaryDark">#2B2B2B</color>
<color name="colorAccent">#FFF</color>

and my styles

<resources xmlns:android="http://schemas.android.com/apk/res/android">

<!--
    Base application theme, dependent on API level. This theme is replaced
    by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Light">
    <!--
        Theme customizations available in newer API levels can go in
        res/values-vXX/styles.xml, while customizations related to
        backward-compatibility can go here.
    -->
</style>


<style name="AppTheme" parent="AppTheme.Base">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="treeViewListStyle" parent="android:style/Widget.ListView">
    <item name="android:background">@android:color/white</item>
    <item name="android:divider">@drawable/divider</item>
</style>

<!--  Transparent dialog -->
<style name="TransparentProgressDialog" parent="@android:style/Theme.Dialog">
    <item name="android:windowFrame">@null</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowTitleStyle">@null</item>
    <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
    <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:background">@android:color/transparent</item>
</style>

<style name="TabLargeTextTheme" parent="@android:style/Theme">
    <item name="android:tabWidgetStyle">@style/TabLargeWidget</item>
</style>

<style name="TabLargeWidget" parent="@android:style/Widget.TabWidget">
    <item name="android:textAppearance">@style/TabLargeWidgetText</item>
</style>

<style name="TabLargeWidgetText" parent="@android:style/TextAppearance.Widget.TabWidget">
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">true</item>
</style>

<style name="alert_dialog" parent="android:Theme.Dialog">
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowIsTranslucent">false</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">false</item>
    <item name="android:windowBackground">@color/float_transparent</item>
    <item name="android:windowAnimationStyle">@null</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:backgroundDimAmount">0.4</item>
</style>

<style name="dialog_blue_button" parent="android:Widget.Button">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">31dp</item>
    <item name="android:background">@drawable/blue_button_background</item>
    <item name="android:textSize">14sp</item>
    <item name="android:paddingLeft">21dp</item>
    <item name="android:paddingRight">21dp</item>
    <item name="android:textColor">@color/black</item>
</style>

<!--Style for the normal font to be used across the application -->
<style name="style_medium_font">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>
<!--Style for the font to be used in buttons -->
<style name="style_button_font">
    <item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
       <item name="android:textColor">@android:color/primary_text_dark</item>
      <item name="android:background">#CC000000</item>
     </style>

      <style name="style_pwd_dialog_button_font" 
        parent="style_button_font">
        <item name="android:textAppearance">? 
       android:attr/textAppearanceMedium</item>
        </style>

     <style name="AppTheme.AppBarOverlay" 
     parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppCompatAlertDialogStyle" 
    parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorAccent">#FFCC00</item>
    <item name="android:textColorPrimary">#FFFFFF</item>
    <item name="android:background">#5fa3d0</item>
</style>

<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<!--<style name="ToolBarStyle" parent="">-->
<!--<item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>-->
<!--<item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>-->
<!--</style>-->

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

 <style name="TextLabel" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">10sp</item>
       </style>
        </resources>

I have tried changing my color primary ,dark n accent it doesnt work also tried to change the background of navigation view but the setting color is on top that black color so it is not a solution.Any help is appreciated

Friedman

Answer 1

Try to change the background-tint:

<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_home_page_new"
 app:menu="@menu/activity_home_page_new_drawer"
 android:backgroundTint="#ffffff"/>

Mcglone

android:backgroundTint worked for me. Note, I used it in a style: <style name="NavigationDrawerStyle"> <item name="android:backgroundTint">@color/navigationDrawerNight</item> </style> – Stillman

Answer 2

Use android:background with the color you want and transparent app:itemBackground:

<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_home_page_new"
    app:menu="@menu/activity_home_page_new_drawer"
    app:itemBackground="@android:color/transparent"
    android:background="@color/your_color" />

Rowenarowland

I need the default color of navigation drawer ,how can i do it? – Friedman

Answer 3

just use theme for NavigationView :

 <com.google.android.material.navigation.NavigationView
            android:id="@+id/navigation"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="false"
            app:headerLayout="@layout/navigation_header"
            app:itemIconTint="@color/button_background"
            app:itemTextAppearance="@style/NavigationTextAppearance"
            app:menu="@menu/navigation_menu"
            android:theme="@style/NavigationViewTheme"
            >

here's the theme:

<style name="NavigationViewTheme">
    <item name="android:background">@color/root_background</item>
</style>

Jordan