The "Material Design Components" aren't being rendered in the layout previewer

Question

In all of my android apps, I implemented the Material Design Components (MDC) dependency for AndroidX and everything was working fine until I updated Android Studio to the 3.4 stable version. The app compiles and runs perfectly in both emulators and real phones, but the XML Layout Previewer of Android Studio doesn't render any of the MDC and the Preview page just freezes.

I have already tried many things and none has fixed my problem:

• Updating to Android Studio 3.5 Canary or Dev
• Changing the targetSdkVersion and compileSdkVersions to 28
• Reinstall Android Studio
• Invalidate cache and restart
• Use different Theme.MaterialComponents variants

This XML Layout Previewer problem ONLY OCCURS in layouts that have at least 1 MDC in it. If there is non of those components everything works fine.

My styles.xml file looks like this:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorGroupPrimary">@color/colorPrimary</item>
        <item name="colorGroupPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorGroupAccent">@color/colorAccent</item>
        <item name="android:fontFamily">@font/montserrat</item>
        <item name="android:windowBackground">@drawable/splash_bg</item
</style>

Even if I extend the AppTheme to be Theme.MaterialComponents.Light.NoActionBar it's not working.

My build.gradle file looks like this:

android {
    compileSdkVersion 28
    defaultConfig {
        minSdkVersion 23
        targetSdkVersion 28
        maxSdkVersion 28
        ...
    }
    ...
}

dependencies {
    implementation 'com.google.android.material:material:1.1.0-alpha05'
    implementation 'androidx.appcompat:appcompat:1.1.0-alpha04'
    ...
}

Example of a layout that doesn't render

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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="@color/colorBackground"
    tools:context=".Activities.AddNoteActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="?attr/colorGroupPrimaryDark">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/addNote_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:paddingStart="6dp"
            android:paddingEnd="6dp"
            app:contentInsetStartWithNavigation="0dp"
            app:navigationIcon="@drawable/ic_close"
            app:title="@string/addNotes_toolbar"
            app:titleTextAppearance="@style/TextAppearance.CACH.Title"
            app:titleTextColor="@color/colorWhite" />

    </com.google.android.material.appbar.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:orientation="vertical"
        android:padding="10dp">

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/addNote_titleInput"
            style="@style/Widget.CACH.TextInputLayout.Primary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:hint="@string/addNotes_title"
            android:paddingBottom="8dp"
            app:errorEnabled="true">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/addNote_titleText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@color/colorBlack"
                android:textSize="22sp" />

        </com.google.android.material.textfield.TextInputLayout>
    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

In the example, the Toolbar and AppBar don't cause any trouble, but at the moment I added the TextInputLayout and TextInputEditText the previewer freezed. If in another layout I add a MaterialButton or FloatingActionButton or MaterialCardView same thing happens.

(In the example, all of the style attributes extend a MaterialComponent theme that's specific for the component. Example: TextInputLayout style has as parent Widget.MaterialComponents.TextInputLayout.OutlinedBox)

Thanks for your answers!!

Answer 1

I couldn't find a complete solution to this problem, but what I tried out and worked perfectly every time was downloading AndroidStudio 3.5 Beta. Using that version of the IDE solved all the issues I had with MaterialComponents.