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
targetSdkVersionandcompileSdkVersionsto 28 - Reinstall Android Studio
- Invalidate cache and restart
- Use different
Theme.MaterialComponentsvariants
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)
