Material design: Failed to find style 'toolbarStyle' in current theme

Question

I'm learning material design using the Theme.Material.Light.NoActionBar theme. I'm trying to add a toolbar to my Activity following the tutorial here.

style.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

v21\style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:colorPrimary">@color/colorPrimary</item>
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:colorAccent">@color/colorAccent</item>
        <item name="toolbarStyle">@style/Widget.AppCompat.Toolbar</item>
    </style>
</resources>

tool_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorPrimary"
    android:elevation="4dp">

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

build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:support-v4:24.2.1'
    compile 'com.android.support:recyclerview-v7:24.2.1'
    compile 'com.android.support:design:24.2.1'
    testCompile 'junit:junit:4.12'
}

But I'm getting this Rendering Problem

Missing styles. Is the correct theme chosen for this layout?  Use the Theme combo box above the layout to choose a different layout, or fix the theme style references.

Failed to find style 'toolbarStyle' in current theme

Everything I've tried so far didn't work

• Refreshing the layout.
• Updated android studio to the latest version 2.2.2 and installed everything was recommended for me in the top-right pop-ups.
• Clicking on File>Invalidate caches/restart.
• Changing the API version in editor in the preview window to 21, 22, 23, 24 and 25 -I can't try preview on versions less then 21(a material design requirement/ or am I wrong???)-.
• Changed the Theme in editor in the preview window to a NoActionBar material theme and to the AppTheme -There's no use of changing it to AppCompat theme since I won't be able to view material elements like cards and so on-.
• I did also try to change it to AppCompat, but when I choose it from the themes list and press ok, it doesn't become the selected one; AppTheme becomes the selected theme for preview instead.

I tried also to add <item name="toolbarStyle">@style/Widget.AppCompat.Toolbar</item> but it gave me another warning : Failed to find '?attr/actionBarSize' in current theme.

What could the problem in the preview be, and how can I fix it.
Another question, as I understand until now, AppCompat theme doesn't contain all features of Material themes. Why would other people use it to solve the problem of preview or even add a reference to it in the v21\style.xml file instead of referencing to a Toolbar that exists in the Material themes?

Answer 1

try this

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

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

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

Answer 2

You have two or both styles theme with the same name.

You must change one of them to a different name, say, name="CustomTheme" or "myTheme" or whatever you want.

In the other hand, when you are learning from those tutorials always check your Android Studio Version. Things are being updated fast so find out what has changed at android Dev page or any other.