将应用程序主题设置为材料设计并使用材料按钮后，布局预览不可见

Question

我使用材料设计作为我的应用程序主题，但由于这个原因，在 android studio 中查看布局预览时出现了一些问题。没有显示预览，但是当我运行代码时，我可以在设备上查看设计。

这个问题主要是因为我使用的材质按钮。当我注释按钮代码时，会显示预览，但是当我取消注释代码并刷新布局时，预览再次不可见。

以下是我如何将材料主题应用到我的应用程序的代码：

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

以下是我在布局中使用的代码：

<?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

其实这是Android Studio的问题。

我在 Android Studio 3.4.2 稳定版中也遇到过这个问题。在此稳定版本中，将 App 主题设置为“Theme.MaterialComponents.*”时设计预览不起作用

设计预览在测试版“Android Studio 3.5 RC 1”上运行良好

尝试下载最新的测试版。

Answer 2

在设计预览中使用强制刷新布局选项

Answer 3

你写buttonCustomFont的风格不像我认为的那样

删除此行并刷新预览

 style="@style/buttonCustomFont"

完整代码

<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"
        android:layout_below="@id/rlSpinner"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="60dp"
        android:elevation="1dp"/>