android.support.design.widget.CollapsingToolbarLayout could not be instantiated

Question

I am a newbie here;

I want to make an Android app for my school project, and I have been experimenting with RecyclerView and CardView. I was following this tutorial here at:

http://www.androidhive.info/2016/05/android-working-with-card-view-and-recycler-view/

I ran into some problems when I tried to do step 9: copy out the code into activity_main.xml and content_main.xml.

Under the XML preview for activity_main.xml in Android Studio, it would say:

Image of rendering problem under Preview

and the stack error is:

android.content.res.Resources$NotFoundException
    at com.android.layoutlib.bridge.android.BridgeContext.obtainStyledAttributes(BridgeContext.java:656)
    at android.content.res.Resources_Theme_Delegate.obtainStyledAttributes(Resources_Theme_Delegate.java:71)
    at android.content.res.Resources$Theme.obtainStyledAttributes(Resources.java:1436)
    at android.content.Context.obtainStyledAttributes(Context.java:587)
    at android.support.v7.widget.TintTypedArray.obtainStyledAttributes(TintTypedArray.java:59)
    at android.support.design.widget.CollapsingTextHelper.setExpandedTextAppearance(CollapsingTextHelper.java:231)
    at android.support.design.widget.CollapsingToolbarLayout.<init>(CollapsingToolbarLayout.java:196)
    at android.support.design.widget.CollapsingToolbarLayout.<init>(CollapsingToolbarLayout.java:142)
    at sun.reflect.GeneratedConstructorAccessor350.newInstance(Unknown Source)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
    at org.jetbrains.android.uipreview.ViewLoader.createNewInstance(ViewLoader.java:465)
    at org.jetbrains.android.uipreview.ViewLoader.loadClass(ViewLoader.java:172)
    at org.jetbrains.android.uipreview.ViewLoader.loadView(ViewLoader.java:105)
    at com.android.tools.idea.rendering.LayoutlibCallbackImpl.loadView(LayoutlibCallbackImpl.java:186)
    at android.view.BridgeInflater.loadCustomView(BridgeInflater.java:334)
    at android.view.BridgeInflater.loadCustomView(BridgeInflater.java:345)
    at android.view.BridgeInflater.createViewFromTag(BridgeInflater.java:245)
    at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:727)
    at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:858)
    at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:70)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:834)
    at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:821)
    at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:861)
    at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:70)
    at android.view.LayoutInflater.rInflate(LayoutInflater.java:834)
    at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:821)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:518)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:397)
    at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:324)
    at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:429)
    at com.android.ide.common.rendering.LayoutLibrary.createSession(LayoutLibrary.java:389)
    at com.android.tools.idea.rendering.RenderTask$2.compute(RenderTask.java:548)
    at com.android.tools.idea.rendering.RenderTask$2.compute(RenderTask.java:533)
    at com.intellij.openapi.application.impl.ApplicationImpl.runReadAction(ApplicationImpl.java:966)
    at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:533)
    at com.android.tools.idea.rendering.RenderTask.lambda$inflate$70(RenderTask.java:659)
    at java.util.concurrent.FutureTask.run(FutureTask.java:266)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
    at java.lang.Thread.run(Thread.java:745)

This happened even when I included compile 'com.android.support:design:25.0.1' under my build.gradle.

I have already researched on this link CollapsingToolBarLayout could not be instantiated and this case did not apply for me, as the tutorial does not include any collapsedTitleTextAppearance XML attribute for the CollapsingToolbarLayout.

I tried downloading the src code from androidhive but it was kind of messed up and I couldn't find what went wrong.

Could someone tell me what went wrong with the CollapsingToolbarLayout and how do i fix it? Thanks!

Meeps

EDIT: Added content for activity_main.xml and content_main.xml

activity_main.xml

<?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"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@android:color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center_horizontal"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/love_music"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/backdrop_title"
                        android:textColor="@android:color/white"
                        android:textSize="@dimen/backdrop_title" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/backdrop_subtitle"
                        android:textColor="@android:color/white"
                        android:textSize="@dimen/backdrop_subtitle" />

                </LinearLayout>
            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_main" />
</android.support.design.widget.CoordinatorLayout>

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="@color/viewBg"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.example.alcheong.cardviewexample.MainActivity"
tools:showIn="@layout/activity_main">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:scrollbars="vertical" />

</RelativeLayout>

Answer 1

It's a known issue, kind of a bug with android studio.

If it's problematic to view the preview as a workaround for this issue you can replace your android.support.design.widget.CoordinatorLayout with a FrameLayout when you want to edit it in the visual design editor(Then is error will disappear), make your changes to the layout and then change it back to a CoordinatorLayout when you are finished.

At the run-time you wont have a problem.

Find more details here https://code.google.com/p/android/issues/detail?id=175595