No layout preview visible after setting app theme to material design and using material button

Question

I am using the material design as my app theme, but due to this, there is some issue while viewing the layout preview in android studio. There is no preview displayed but when I run the code I am able to view the design on the device.

The issue is mainly because of the material button I have used. when I comment the button code the preview is shown, but when I uncomment the code and refresh the layout the preview is again not visible.

Below is the code od how I have applied the material theme to my app:

<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>
</style> 

Below is the Code I have used in my layout:

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

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


    <TextView
            android:id="@+id/tvTitle"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:layout_marginTop="115dp"
            android:layout_centerHorizontal="true"
            android:textSize="30dp"
            style="@style/text_sui_generis"
            android:textColor="@color/colorPrimary"/>

    <RelativeLayout
            android:id="@+id/rlSpinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tvTitle"
            android:layout_marginTop="80dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/border_shadow"
            android:padding="5dp">

        <ImageView android:layout_width="20dp"
                   android:layout_height="20dp"
                   android:src="@drawable/ic_location"
                   android:id="@+id/locationImage"
                   android:layout_centerVertical="true"/>

        <Spinner
                android:id="@+id/locationSpinner"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_toEndOf="@id/locationImage"
                android:layout_marginStart="5dp"
                android:layout_centerVertical="true"/>

    </RelativeLayout>

    <com.google.android.material.button.MaterialButton
            android:id="@+id/signin_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/sign_in"
            style="@style/buttonCustomFont"
            android:layout_below="@id/rlSpinner"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="60dp"
            android:elevation="1dp"/>

</RelativeLayout> 

Answer 1

Actually, this is the issue of Android Studio.

I also have faced this issue in Android Studio 3.4.2 stable version. In this stable version, the design preview is not working when set App theme as "Theme.MaterialComponents.*"

The design preview is working fine with beta "Android Studio 3.5 RC 1"

Try downloading the latest beta version.