轮廓材质按钮没有显示任何边框。

Question

我试图建立一个带边框按钮的布局，如下所示（期望的行为）。从 Material 设计文档中，我了解到 Outlined Material Button 似乎非常适合我的需求。我在我的布局中定义了该按钮，提供了描边宽度和描边颜色，但它没有显示任何边框，我做错了什么？

<com.google.android.material.button.MaterialButton
            android:id="@+id/material_text_button"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:text="Change name"
            android:background="@android:color/transparent"
            android:textSize="12sp"
            app:layout_constraintBottom_toBottomOf="@+id/listTextView2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/listTextView2"
            app:layout_constraintTop_toTopOf="@+id/listTextView2"
            app:strokeColor="@color/green"
            app:strokeWidth="10dp" />

预期行为：

当前行为：

- Nicola Gallazzi

Answer 1

只需将此属性添加到您的MaterialButton即可

android:theme="@style/Theme.MaterialComponents"

避免将其添加到您的主题中。

例如：

<com.google.android.material.button.MaterialButton
            android:id="@+id/material_text_button"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:theme="@style/Theme.MaterialComponents"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:text="Change name"
            android:background="@android:color/transparent"
            android:textSize="12sp"
            app:layout_constraintBottom_toBottomOf="@+id/listTextView2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/listTextView2"
            app:layout_constraintTop_toTopOf="@+id/listTextView2"
            app:strokeColor="@color/green"
            app:strokeWidth="10dp" />

- appersiano

Answer 2

在你的 build.gradle 应用程序中使用以下代码:

    implementation 'com.google.android.material:material:1.2.0-alpha02'

我认为这是谷歌材料的一个漏洞。

更新：我刚刚测试了一下。使用下面Gradle应用程序中的依赖项。

implementation 'com.google.android.material:material:1.2.0-alpha05

在您的材料按钮XML中，添加样式。

style="@style/Widget.MaterialComponents.Button.OutlinedButton"

可能在您的XML预览中不会显示，但在运行应用程序时会显示。

- Cyd

---

在alpha03、04和05中仍然存在这个bug，但在02中却解决了？难道不应该在02之后的所有版本中都解决吗！？感谢指出这一点。 - Alaa AbuZarifa

Answer 3

尝试从您的xml中删除透明背景和样式。还要确保将样式更改为MaterialComponents。

  <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> 

 <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:textSize="16sp"
        android:layout_marginEnd="20dp"
        android:text="works"
        android:textAllCaps="false"
        android:textColor="@color/white"
        app:strokeColor="@color/white"
        app:strokeWidth="2dp" />

- Jiten Basnet

---

很遗憾，不起作用，没有显示边框和灰色背景。 - Nicola Gallazzi

请问您能否发布您的布局XML文件？ - Jiten Basnet

只有一个ConstraintLayout作为容器，没有其他东西。 - Nicola Gallazzi

哦哦！我不知道什么魔法使您的 XML 无法工作。也许尝试使用 RelativeLayout，只需试一下。 - Jiten Basnet

这是一个主题问题！通过将我的主题从Theme.AppCompat.Light.NoActionBar更改为Theme.MaterialComponents.Light.NoActionBar，它可以正常工作。 - Nicola Gallazzi

好的，很好！我已经提到了更新的代码。无论如何！很高兴它起作用了 ;) - Jiten Basnet

Answer 4

这对我有效。

 <style name="oval_button_outline" 
     parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="cornerFamily">rounded</item>
    <item name="cornerRadius">16dp</item>
    <item name="android:textColor">@color/dark_color</item>
</style>



 <com.google.android.material.button.MaterialButton
        android:id="@+id/start_login"
        style="@style/oval_button_outline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-medium"
        android:textStyle="normal"
        android:textSize="14sp"
        android:letterSpacing="0.09"
        android:lineSpacingExtra="2sp"
        android:gravity="center_horizontal"
        android:text="@string/login"
        android:textColor="@color/dark_color"
        android:theme="@style/Theme.MaterialComponents"
        app:strokeColor="@color/dark_color"
        app:strokeWidth="2dp" />

- The Codepreneur

Answer 5

依赖性

implementation 'com.google.android.material:material:1.2.1'

增加android:backgroundTint="@color/colorPrimary"

<com.google.android.material.button.MaterialButton
     android:id="@+id/material_text_button"
     style="@style/Widget.MaterialComponents.Button.OutlinedButton"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Pick Date"
     android:background="@drawable/register_edittext_background"
     android:textSize="12sp"

     app:backgroundTint="@color/colorPrimary"
/>

- Saiful Islam

---

仅仅添加 app:backgroundTint 对我来说就可以了。 - lasec0203