Error inflating class android.support.design.widget.NavigationView

Question

I followed a tutorial of new component NavigationView in Support Design Library and can't get through this error message :

Error inflating class android.support.design.widget.NavigationView

I tried every workaround here

Error when using any Android Design Support Library Elements

but error message still exists.

xml

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true" >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

    <include layout="@layout/toolbar" android:id="@+id/mainToolBar" />

    <fragment android:name="com.ais.cherry.fragment.LoginFragment"
        android:id="@+id/loginFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/mainToolBar" />
    <fragment     android:name="com.ais.cherry.fragment.WaterFallFragment"
        android:id="@+id/mainFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/mainToolBar" />
    <fragment android:name="com.ais.cherry.fragment.SearchFragment"
        android:id="@+id/searchFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/mainToolBar" />
    <fragment android:name="com.ais.cherry.fragment.ChatMainFragment"
        android:id="@+id/chatMainFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/mainToolBar" />
    <fragment android:name="com.ais.cherry.fragment.ProfileFragment"
        android:id="@+id/profileFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/mainToolBar" />


    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white"
        app:itemTextColor="#212121"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>

build.gradle

buildscript {
    repositories {
        mavenCentral()
        maven { url 'https://maven.fabric.io/public' }
    }

    dependencies {
        classpath 'io.fabric.tools:gradle:1.+'
        classpath 'com.android.tools.build:gradle:1.2.3'
    }
}

compileSdkVersion 22
buildToolsVersion "22.0.1"

defaultConfig {
    applicationId "com.ais.cherry"
    minSdkVersion 16
    targetSdkVersion 22      
    multiDexEnabled true
    renderscriptTargetApi 22
    renderscriptSupportModeEnabled true

}
dependencies {
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:support-v4:22.2.0'
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'
}

Project build.gradle

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.2.3'
    }
}

styles.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">

</style>

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowActionBarOverlay">true</item>
    <item name="android:windowActionModeOverlay">true</item>
    <item name="android:actionModeStyle">@style/AppTheme.ActionModeStyle</item>
    <item name="android:windowActionBar">false</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowNoTitle">true</item>
    <!-- Support library compatibility -->
    <item name="windowActionBarOverlay">true</item>

    <!-- ActionBar color -->
    <item name="colorPrimary">#E91E63</item>
    <!-- Status bar color -->
    <item name="colorPrimaryDark">#C2185B</item>
    <!-- Window color -->
    <item name="android:windowBackground">@color/white</item>
    <!-- ActionBar title text -->
    <item name="android:titleTextStyle">@style/AppTheme.MyActionBarTitleText</item>

    <item name="colorAccent">#9E9E9E</item>

    <item name="drawerArrowStyle">@style/AppTheme.MyDrawerArrowStyle</item>

    <!-- color for actionMenu-->
    <item name="actionMenuTextColor">#FFFFFF</item>
    <item name="android:actionMenuTextColor">#FFFFFF</item>
    <!-- android:textColorSecondary is the color of the menu
   overflow icon (three vertical dots) -->
    <item name="android:textColorPrimary">#212121</item>
    <item name="android:textColorSecondary">#FFFFFF</item>
    <!--Navigation bar color-->
    <item name="android:navigationBarColor">#E91E63</item>
    <!--Status bar color-->
    <item name="android:statusBarColor">#C2185B</item>
</style>

Any help would be appreciated!

Edit -- add @menu/drawer & @menu/drawer_header & stacktrace

drawer.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_first_fragment"
            android:icon="@drawable/home_view"
            android:checked="true"
            android:title="@string/main"/>
        <item
            android:id="@+id/nav_second_fragment"
            android:icon="@drawable/comment_view"
            android:title="@string/chat"/>
        <item
            android:id="@+id/nav_third_fragment"
            android:icon="@drawable/user_view"
            android:title="@string/profile"/>
        <item android:title="@string/search">
            <menu>
                <item
                    android:title="@string/clothes"/>
                <item
                    android:title="@string/pants"/>
            </menu>
        </item>
    </group>
</menu>

drawer_header.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="?attr/colorPrimaryDark"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:gravity="bottom">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/title"
        android:textColor="@android:color/white"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
</LinearLayout>

StackTrace (only part of them)

It thrown out three exceptions as below : all points out that the problems is caused by the line of "setContentView(layout)" at in layout.xml.

java.lang.RuntimeException: Unable to start activity  ComponentInfo{com.ais.cherry/com.ais.cherry.activity.FirstActivity}:    android.view.InflateException: Binary XML file line #32: Error inflating    class android.support.design.widget.NavigationView

Caused by: android.view.InflateException: Binary XML file line #32: Error inflating class android.support.design.widget.NavigationView

Caused by: java.lang.reflect.InvocationTargetException

Caused by: android.content.res.Resources$NotFoundException: Resource ID #0x0

Answer 1

Actually it is not the matter of the primarycolortext, upgrading or downgrading the dependencies.This problem will likely occur when the version of your appcompat library and design support library doesn't match.

Example of matching condition

compile 'com.android.support:appcompat-v7:23.1.1' // appcompat library
compile 'com.android.support:design:23.1.1'       //design support library