MaterialButton 在 Android 5.1.1（API 级别 22）中看起来不像 "MaterialButton"

Question

我遇到了 Material 按钮的奇怪行为。当我在 Android 10（API 级别 29）中尝试时它看起来不错，但在 Android 5.1.1（API 22级）。你能告诉我它有什么问题吗？

fragment_log_in.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:fillViewport="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingStart="24dp"
            android:paddingEnd="24dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.textview.MaterialTextView
                style="@style/PacificTextView"
                android:text="@string/log_in"
                android:textSize="32sp" />

            <androidx.appcompat.widget.AppCompatAutoCompleteTextView
                style="@style/EditTextStyle"
                android:layout_marginTop="24dp"
                android:hint="@string/email_or_username"
                android:imeOptions="actionNext"
                android:inputType="textEmailAddress" />

            <EditText
                style="@style/EditTextStyle"
                android:layout_marginTop="16dp"
                android:hint="@string/password"
                android:imeOptions="actionDone"
                android:inputType="textPassword"
                tools:ignore="Autofill" />

            <com.google.android.material.button.MaterialButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="24dp"
                app:backgroundTint="@color/teal_700"/>

        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

values\themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">

    <!-- Base application theme. -->
    <style name="Theme.Moviery" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/naturally_calm</item>
        <item name="colorPrimaryVariant">@color/naturally_calm</item>
        <item name="colorOnPrimary">@color/wet_asphalt</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/bright_grey</item>
        <item name="colorSecondaryVariant">@color/bright_grey</item>
        <item name="colorOnSecondary">@color/asphalt</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">@color/asphalt</item>
        <!-- Customize your theme here. -->
        <item name="android:background">@color/naturally_calm</item>
        <item name="android:navigationBarColor" tools:targetApi="l">@color/asphalt</item>
    </style>

    <style name="PacificTextView">
        <item name="android:textColor">@color/wet_asphalt</item>
        <item name="fontFamily">@font/pacifico</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:padding">8dp</item>
    </style>

    <style name="SmallTextView">
        <item name="android:textColor">@color/asphalt</item>
        <item name="android:fontFamily">@font/rubik</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">wrap_content</item>
    </style>

    <style name="SmallImageView">
        <item name="android:layout_height">20dp</item>
        <item name="android:layout_width">20dp</item>
        <item name="android:src">@drawable/ic_down</item>
    </style>

    <style name="IncludeLanguage">
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_marginTop">8dp</item>
        <item name="android:padding">8dp</item>
    </style>

    <style name="ViewSeparator">
        <item name="android:layout_height">0.5dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:background">@color/asphalt</item>
    </style>

    <style name="EditTextStyle">
        <item name="android:background">@drawable/edit_text_background</item>
        <item name="android:layout_height">50dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:paddingStart">8dp</item>
        <item name="android:paddingEnd">8dp</item>
        <item name="android:textCursorDrawable">@null</item>
        <item name="android:textSize">15sp</item>
    </style>

</resources>

night\themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">

    <!-- Base application theme. -->
    <style name="Theme.Moviery" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/wet_asphalt</item>
        <item name="colorPrimaryVariant">@color/wet_asphalt</item>
        <item name="colorOnPrimary">@color/bright_grey</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/asphalt</item>
        <item name="colorSecondaryVariant">@color/asphalt</item>
        <item name="colorOnSecondary">@color/naturally_calm</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">@color/naturally_calm</item>
        <!-- Customize your theme here. -->
        <item name="android:background">@color/wet_asphalt</item>
        <item name="android:navigationBarColor" tools:targetApi="l">@color/naturally_calm</item>
    </style>

    <style name="PacificTextView">
        <item name="android:textColor">@color/bright_grey</item>
        <item name="fontFamily">@font/pacifico</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:padding">8dp</item>
    </style>

    <style name="SmallTextView">
        <item name="android:textColor">@color/naturally_calm</item>
        <item name="android:fontFamily">@font/rubik</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">wrap_content</item>
    </style>

    <style name="SmallImageView">
        <item name="android:layout_height">20dp</item>
        <item name="android:layout_width">20dp</item>
        <item name="android:src">@drawable/ic_down_night</item>
    </style>

    <style name="ViewSeparator">
        <item name="android:layout_height">0.5dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:background">@color/naturally_calm</item>
    </style>

    <style name="EditTextStyle">
        <item name="android:background">@drawable/edit_text_background_night</item>
        <item name="android:layout_height">50dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:paddingStart">8dp</item>
        <item name="android:paddingEnd">8dp</item>
        <item name="android:textCursorDrawable">@null</item>
        <item name="android:textSize">15sp</item>
    </style>

</resources>

Android 5.1.1（API 22 级）

Android 10（API 29 级）

Android Studio（最新版）

Answer 1

问题出在“Theme.Moviery”样式 android: background 属性中。

Answer 2

style.xml

<style name="Widget.AppTheme.ConfirmButton" parent="Widget.MaterialComponents.Button.UnelevatedButton">

        <item name="android:backgroundTint">?colorSecondary</item>

        <item name="android:textColor">?colorOnSecondary</item>>

        <item name="cornerRadius">2dp</item>

        <item name="android:paddingTop">@dimen/margin_12</item>

        <item name="android:paddingBottom">@dimen/margin_12</item>

        <item name="android:letterSpacing">-0.02</item>

    </style>

fragment_log_in.xml

<com.google.android.material.button.MaterialButton

        android:id="@+id/btn_allow"

        style="@style/Widget.AppTheme.ConfirmButton"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="20dp"

        android:layout_marginEnd="@dimen/margin_20"

        android:layout_marginBottom="@dimen/margin_16"

        android:text="@string/str_continue" />

MaterialButton 在 Android 5.1.1（API 级别 22）中看起来不像 "MaterialButton"

MaterialButton doesn't look as a "MaterialButton" in Android 5.1.1 (API level 22)

xml

layout

android

android-layout

android-studio